cyclope

siklop

Snapshot DOM Cypress dan perbedaan gambar yang konsisten di cloud

Postingan blog

• Simpan Halaman Saat Tes Gagal

Video

• Cyclope: Simpan Satu Halaman Penuh Dengan Gaya Jika Tes Cypress Gagal

• Gunakan LocalStorage Dari Cypress Test Untuk Mengatur Data Awal

• Uji Menyeret Item

• Pengantar perintah cy.session

Pelajaran kursus

Menguji Toko Swag

• Bonus 39: Simpan seluruh halaman HTML jika pengujian gagal

Memasang

Tambahkan plugin ini ke proyek Anda. Dengan asumsi Cypress adalah ketergantungan dev

 $ npm i -D cyclope# atau jika Anda lebih suka benang$ benang tambahkan -D cyclope

Sertakan plugin dari file dukungan Anda atau file spesifikasi individual

 // di cypress/support/index.js// https://github.com/bahmutov/cyclopeimport 'cyclope'

Sertakan plugin dari file konfigurasi di Cypress v10

 // cypress.config.jsconst { defineConfig } = require('cypress')module.exports = defineConfig({
  e2e: {setupNodeEvents(on, config) { // https://github.com/bahmutov/cyclope require('cyclope/plugin')(on, config) // PENTING untuk mengembalikan objek konfigurasi // dengan perubahan apa pun variabel lingkungan mengembalikan konfigurasi},
  },})

Sertakan plugin dari file plugin di Cypress v9

Sertakan plugin dari file plugin Anda

 // cypress/plugins/index.jsmodule.exports = (aktif, konfigurasi) => {
  // https://github.com/bahmutov/cyclope
  memerlukan('cyclope/plugin')(aktif, konfigurasi)

  // PENTING untuk mengembalikan objek konfigurasi
  // dengan variabel lingkungan apa pun yang diubah
  kembalikan konfigurasi}

Simpan halaman saat ini

Jika Anda perlu menyimpan halaman aplikasi web saat ini, termasuk sumber daya apa pun

 // cypress/integration/spec.jsit('menyimpan halaman', () => {
  // perintah Cypress biasa
  cy.contains('.some-selector', 'some text').should('be.visible')// ketika aplikasi telah mencapai keadaan yang diinginkan// simpan halaman di folder "page".savePage(' halaman')})

Semua sumber daya lokal seperti gambar dan CSS harus disimpan sebagai file lokal. Anda dapat membuat arsip zip

 // gunakan ekstensi .zip untuk meng-zip folder ke dalam filecy.savePage('page.zip')

Saat menyimpan zip, fungsi tersebut menghasilkan objek dengan properti nama file, lebar, dan tinggi.

Pilihan

• removeIframes (salah secara default) menghapus semua elemen <iframe> dari halaman sebelum disimpan

 cy.savePage('nama', { hapusIframe: benar })

• ignoreFailedAssets (salah secara default) mengabaikan kegagalan jika sebagian aset tidak dapat dimuat

 cy.savePage('nama', { abaikanFailedAssets: true })

Simpan halaman yang gagal

Modul ini mencakup fungsi utilitas untuk menyimpan halaman jika pengujian gagal. Anda dapat menggunakan fungsi ini sebagai afterEach hook, mungkin dari file dukungan, sehingga ini berlaku untuk semua pengujian.

 // di cypress/support/index.js// https://github.com/bahmutov/cyclopeimport { savePageIfTestFailed } dari 'cyclope'afterEach(() => {
  simpanPageIfTestFailed()
  // jika ada bagian aset dalam proyek Anda yang rusak
  simpanPageIfTestFailed({ abaikanFailedAssets: benar })})

Secara default, halaman disimpan hanya dalam mode non-interaktif cypress run . Jika Anda ingin menyimpan halaman bahkan ketika dijalankan dalam mode cypress open , gunakan opsi saveInteractive

 simpanPageIfTestFailed({ simpanInteraktif: benar })

Semua halaman disimpan di folder cypress/failed/<spec name>/<test name> .

Tip: simpan cypress/failed sebagai artefak uji di CI. Jika pengujian gagal, unduh dan buka folder/index.html untuk memeriksa struktur aplikasi pada saat kegagalan.

siklop

Alias clope

Menghasilkan gambar PNG yang konsisten menggunakan layanan gambar Cyclope eksternal. Membutuhkan variabel lingkungan CYCLOPE_SERVICE_URL dan CYCLOPE_SERVICE_KEY saat menjalankan Cypress. Mendukung melayang

 cy.get('#theme-switcher').realHover().cyclope('hover-over-sun.png')// menyimpan gambar "hover-over-sun.png" yang dihasilkan // ekuivalency.get(' #pengalih tema').realHover()cy.clope()

Jika Anda hanya ingin melewati unggahan DOM dan pembuatan gambar jika layanan Cyclope tidak dikonfigurasi, atur opsi lingkungan Cypress, misalnya menggunakan file cypress.json

 { "env": {"cyclope": { "skipUploadWithoutUrl": true}
  }
}

Men-debug

Anda dapat mengaktifkan pesan debug verbose di terminal menggunakan modul debug dengan menjalankan pengujian menggunakan variabel lingkungan DEBUG=cyclope

$ DEBUG=cyclope npx cypress run

Contoh

• todo-app-for-cyclope

• sudoku-mock-module

Cetakan kecil

Penulis: Gleb Bahmutov <[email protected]> © 2021

• @bahmutov

• glebbahmutov.com

• blog

• video

• presentasi

• cemara.tips

Lisensi: MIT - lakukan apa pun dengan kode tersebut, tetapi jangan salahkan saya jika tidak berhasil.

Dukungan: jika Anda menemukan masalah dengan modul ini, email / tweet / buka masalah di Github

Lisensi MIT

Hak Cipta (c) 2021 Gleb Bahmutov <[email protected]>

Izin dengan ini diberikan, secara gratis, kepada siapa pun yang memperoleh salinan perangkat lunak ini dan file dokumentasi terkait ("Perangkat Lunak"), untuk menggunakan Perangkat Lunak tanpa batasan, termasuk tanpa batasan hak untuk menggunakan, menyalin, memodifikasi, menggabungkan , mempublikasikan, mendistribusikan, mensublisensikan, dan/atau menjual salinan Perangkat Lunak, dan mengizinkan orang yang menerima Perangkat Lunak untuk melakukan hal tersebut, dengan tunduk pada ketentuan berikut:

Pemberitahuan hak cipta di atas dan pemberitahuan izin ini akan disertakan dalam semua salinan atau sebagian besar Perangkat Lunak.

PERANGKAT LUNAK INI DISEDIAKAN "APA ADANYA", TANPA JAMINAN APA PUN, TERSURAT MAUPUN TERSIRAT, TERMASUK NAMUN TIDAK TERBATAS PADA JAMINAN KELAYAKAN UNTUK DIPERDAGANGKAN, KESESUAIAN UNTUK TUJUAN TERTENTU, DAN TIDAK ADA PELANGGARAN. DALAM KEADAAN APA PUN PENULIS ATAU PEMEGANG HAK CIPTA TIDAK BERTANGGUNG JAWAB ATAS KLAIM, KERUSAKAN, ATAU TANGGUNG JAWAB LAINNYA, BAIK DALAM TINDAKAN KONTRAK, HUKUM ATAU LAINNYA, YANG TIMBUL DARI, ATAU SEHUBUNGAN DENGAN PERANGKAT LUNAK ATAU PENGGUNAAN ATAU HAL-HAL LAIN DALAM PERANGKAT LUNAK.