cypress example kitchensink - cypress example kitchensink

cypress example kitchensink

Kode sumber lainnya

v3.1.2

Unduh

Wastafel dapur

Ini adalah contoh aplikasi yang digunakan untuk menampilkan pengujian cypress.io end-to-end (E2E). Aplikasi menunjukkan penggunaan sebagian besar perintah API Cypress. Selain itu aplikasi contoh ini dikonfigurasi untuk menjalankan tes E2E di berbagai platform CI. Beberapa alur kerja menunjukkan penggunaan CI dari gambar Docker Cypress yang menyediakan lingkungan yang kompatibel dengan Cypress yang nyaman dan dikonfigurasi sebelumnya. Tes juga banyak dikomentari.

Untuk melihat aplikasi wastafel dapur, dan untuk melihat perintah API Cypress yang ditunjukkan oleh aplikasi, kunjungi example.cypress.io.

Untuk referensi lengkap dari dokumentasi kami, buka docs.cypress.io.

Untuk contoh aplikasi pembayaran yang menunjukkan penggunaan dunia nyata dari pengujian Cypress.io End-to-End (E2E), buka repositori App Cypress-OO/Cypress-Realworld-App.

Status CI

Tabel berikut mencantumkan alur kerja langsung dari berbagai penyedia CI. Ini masing -masing secara independen menguji isi dari contoh repositori ini. Mereka menjalankan dan merekam menggunakan Cypress Cloud dengan hasilnya yang ditampilkan secara terpusat di bawah Cypress Cloud ProjectID 4b7344 . Setiap penyedia CI menunjukkan status pembangunannya di situsnya sendiri:

Penyedia CI	Alur kerja	Contoh Docker
Appveyor	appveyor.yml
Circleci	.circleci/config.yml	✅
cypress-io/github-action	menggunakan-action.yml
Tindakan GitHub	single.yml
Tindakan GitHub	paralel.yml

Anda dapat menemukan semua hasil CI yang direkam di Cypress Cloud

Contoh alur kerja CI

Tabel ini menunjukkan contoh tambahan dari alur kerja CI. Dengan pengecualian alur kerja tindakan gitub, ini bukan contoh langsung seperti pada tabel di atas dan mereka mungkin memerlukan modifikasi sebelum digunakan. Alur kerja aksi GitHub hidup dan mereka berjalan tanpa merekam ke Cypress Cloud.

Penyedia CI	Konfigurasi Dasar	Konfigurasi paralel penuh	Contoh Docker
AWS Amplify	amplify.yml
AWS CodeBuild	Dasar/buildspec.yml	buildspec.yml
Pipa Azure	BASIC/AZURE-CI.YML	Azure-ci.yml
Buddy.Works	Buddy.yml		✅
Buildkite	.buildkite/pipeline.yml
Circleci	Dasar/.circleci/config.yml		✅
Cloudbees CodeShip Pro	BASIC/CODESHIP-PRO	codeship-services.yml	✅
Tindakan GitHub	chrome.yml
Tindakan GitHub	chrome-docker.yml		✅
Gitlab	BASIC/.GITLAB-CI.YML	.gitlab-ci.yml	✅
Jenkins	Dasar/Jenkinsfile	Jenkinsfile	✅
Semaphore 2.0	dasar/.semaphore.yml	.semaphore/semaphore.yml
Travis CI	Dasar/.travis.yml	.travis.yml

Contoh Penyedia Halaman Dokumentasi Cypress CI memberikan beberapa contoh lebih banyak dengan panduan luas untuk menggunakan Cypress dengan beberapa penyedia CI paling populer.

Jalankan tes

Pengujian lokal

Untuk menjalankan tes dari repo ini di mesin lokal Anda, pertama pastikan mesin Anda memenuhi persyaratan sistem Cypress, termasuk pemasangan node.js sesuai dengan versi yang ditentukan dalam file .node-versi.

Melaksanakan instruksi berikut akan mengkloning repositori, menginstal dependensi dan menjalankan Cypress:

git clone https://github.com/cypress-io/cypress-example-kitchensink.git
cd cypress-example-kitchensink
npm ci # install dependencies
npm run local:run # run Cypress headlessly

local:run adalah skrip paket.json yang memulai server web lokal dan kemudian menggunakan Cypress Run untuk menjalankan Cypress tanpa kepala. Jika Anda ingin menjalankan tes Cypress secara interaktif, maka jalankan perintah berikut yang menggunakan Cypress Open untuk menjalankan Cypress dalam mode headed. Anda dapat memilih tes individual untuk dijalankan.

npm run local:open

Sebagai alternatif untuk menggunakan skrip local:open and local:run , Anda juga dapat memulai server dalam satu langkah dan kemudian menjalankan Cypress dalam langkah kedua.

npm start # start server on port 8080

Anda dapat memeriksa bahwa server sedang berjalan jika Anda membuka browser web dan menavigasi ke http://localhost:8080 .

Kemudian di jendela terminal terpisah mengeksekusi

npx cypress run # for headless mode

atau

npx cypress open # for headed interactive mode

Skrip dan struktur server

Skrip local:run dan local:open Gunakan alias start-test dari modul NPM start-server-and-test untuk menjalankan ./scripts/start.js, yang memulai server web, menunggu untuk menjadi siap, dan kemudian meluncurkan Cypress.

Script start memunculkan server web menggunakan modul NPM melayani dan menampilkan aplikasi wastafel dapur di port 8080 .

Pengujian Docker

Jika Anda memiliki Docker yang diinstal secara lokal, misalnya menggunakan Docker Desktop, Anda dapat menjalankan tes dari repo ini secara interaktif dalam wadah Docker. Gunakan gambar Docker Cypress, yang dibangun dengan semua prasyarat untuk menjalankan Cypress. Mereka tersedia sebagai basis, browser dan opsi yang disertakan dari Docker Hub dan Galeri Publik Amazon ECR (Elastic Container Registry).

Seperti di atas, mulailah dengan mengkloning repo dan memasang dependensi:

git clone https://github.com/cypress-io/cypress-example-kitchensink
cd cypress-example-kitchensink
npm ci

Catatan

Untuk kesederhanaan, contoh Docker di bawah ini menggunakan referensi repositori seperti cypress/base dengan tag versi latest . Untuk memilih versi sebelumnya, ganti latest dengan tag eksplisit, misalnya cypress/base:20.15.1 . Tag versi eksplisit direkomendasikan untuk produksi. Penggunaan lebih lanjut dijelaskan dalam pemilihan tag.

Cypress/Base

Contoh berikut menggunakan cypress/basis gambar yang dengan sendirinya tidak mengandung browser. Anda akan menggunakan browser elektron yang dibundel dengan cypress. Untuk menjalankan wadah Docker, jalankan yang berikut:

docker run -it --rm -v .:/e2e -w /e2e cypress/base:latest

Saat prompt wadah muncul, masukkan:

npx cypress install     # install Cypress binary
npm run test:ci         # start server and run tests in Electron browser
exit

Cypress/Browser

Dengan gambar Cypress/Browser Anda memiliki pilihan tambahan browser Chrome, Edge dan Firefox. Jalankan yang berikut:

docker run -it --rm -v .:/e2e -w /e2e cypress/browsers:latest

Saat prompt wadah muncul, masukkan:

npx cypress install     # install Cypress binary
npm run test:ci         # start server and run tests in Electron browser
npm run test:ci:chrome  # start server and run tests in Chrome browser
npm run test:ci:edge    # start server and run tests in Edge browser
npm run test:ci:firefox # start server and run tests in Firefox browser
exit

Cypress/Termasuk

Gambar Cypress/Termasuk menambahkan instalasi Cypress penuh dibandingkan dengan Cypress/Browser. Jalankan yang berikut untuk menjalankan wadah dengan perintah satu baris, pengujian dengan browser chrome:

docker run -it --rm -v .:/e2e -w /e2e --entrypoint bash cypress/included:latest -c ' npm run test:ci:chrome ' # use for matching Cypress versions

Ganti tag latest dalam perintah di atas menggunakan versi Cypress dari repo's package.json, jika repositori ini belum diperbarui ke versi Cypress terbaru yang dirilis. Perhatikan bahwa versi yang tidak cocok akan menyebabkan kesalahan.

Catatan

Browser tambahan Chrome, Edge dan Firefox hanya dipasang di gambar arsitektur linux/amd64 cypress/browsers dan cypress/included . Browser tidak tersedia pra-pemasangan untuk gambar arsitektur linux/arm64 . Browser elektron, yang built-in ke Cypress, tersedia di semua gambar dan arsitektur.

Pengujian CI

Jika Anda ingin mencoba menjalankan tes dalam penyedia integrasi berkelanjutan (CI) maka Anda harus terlebih dahulu membayar repositori sehingga Anda memiliki salinan Anda sendiri. Rujuk ke dokumentasi GitHub untuk mengatur alias untuk remote upstream (ke repo ini) dan remote origin (ke garpu Anda) dengan benar. Anda juga perlu memiliki akun dengan penyedia CI yang ingin Anda uji.

Dokumentasi

Gunakan dokumentasi Cypress untuk instruksi tentang cara menggunakan cypress
Baca Panduan Baris Perintah untuk Opsi Jalankan
Lihat dokumen API untuk memahami panggilan API Cypress yang diuji dalam repo ini
Baca Menginstal Cypress untuk informasi langkah demi langkah tentang menginstal Cypress di proyek Anda sendiri