cypress example kitchensink
v3.1.2
นี่คือแอปตัวอย่างที่ใช้ในการแสดงการทดสอบ cypress.io end-to-end (E2E) แอปพลิเคชันแสดงให้เห็นถึงการใช้คำสั่ง Cypress API ส่วนใหญ่ นอกจากนี้แอปตัวอย่างนี้ได้รับการกำหนดค่าให้เรียกใช้การทดสอบ E2E ในแพลตฟอร์ม CI ต่างๆ เวิร์กโฟลว์หลายอย่างแสดงให้เห็นถึงการใช้ CI ของ Cypress Docker Images ซึ่งให้สภาพแวดล้อมที่สะดวกและกำหนดค่าล่วงหน้าสำหรับไซเปรส การทดสอบยังมีความคิดเห็นอย่างมาก
หากต้องการดูแอปพลิเคชัน Sink Kitchen และเพื่อดูคำสั่ง Cypress API ที่แสดงโดยแอปให้ไปที่ตัวอย่าง cypress.io
สำหรับการอ้างอิงเต็มรูปแบบของเอกสารของเราไปที่ docs.cypress.io
สำหรับตัวอย่างแอปพลิเคชันการชำระเงินที่แสดงให้เห็นถึงการใช้งานจริงของการทดสอบ cypress.io end-to-end (E2E) ไปที่ที่เก็บ Cypress-IO/Cypress-Realworld-App
ตารางต่อไปนี้แสดงรายการเวิร์กโฟลว์สดจากผู้ให้บริการ CI ต่างๆ แต่ละเหล่านี้ทดสอบเนื้อหาของที่เก็บตัวอย่างนี้อย่างอิสระ พวกเขาทำงานและบันทึกโดยใช้ Cypress Cloud โดยผลลัพธ์ของพวกเขาจะแสดงจากส่วนกลางภายใต้ Cypress Cloud ProjectID 4b7344 ผู้ให้บริการ CI แต่ละรายแสดงสถานะการสร้างบนเว็บไซต์ของตัวเอง:
| ผู้ให้บริการ CI | เวิร์กโฟลว์ | สร้างสถานะ | ตัวอย่างนักเทียบท่า |
|---|---|---|---|
| ผู้ที่มีความสามารถ | appveyor.yml | ||
| วงกลม | .circleci/config.yml | ||
| cypress-io/github-action | ใช้ action.yml | ||
| การกระทำของ GitHub | Single.yml | ||
| การกระทำของ GitHub | Parallel.yml |
คุณสามารถค้นหาผลลัพธ์ CI ทั้งหมดที่บันทึกไว้ใน Cypress Cloud
ตารางนี้แสดงตัวอย่างเพิ่มเติมของเวิร์กโฟลว์ CI ด้วยข้อยกเว้นของเวิร์กโฟลว์การกระทำของ GitHub สิ่งเหล่านี้ ไม่ใช่ ตัวอย่างที่มีชีวิตเหมือนในตารางด้านบนและอาจต้องมีการแก้ไขก่อนการใช้งาน เวิร์กโฟลว์การกระทำของ GitHub นั้นมีชีวิตอยู่และพวกเขาทำงานโดยไม่ต้องบันทึกลงใน Cypress Cloud
| ผู้ให้บริการ CI | การกำหนดค่าพื้นฐาน | การกำหนดค่าแบบขนานเต็มรูปแบบ | ตัวอย่างนักเทียบท่า |
|---|---|---|---|
| AWS ขยาย | Amplify.yml | ||
| AWS Codebuild | พื้นฐาน/buildspec.yml | buildspec.yml | |
| Azure Pipelines | พื้นฐาน/azure-ci.yml | Azure-ci.yml | |
| Buddy.works | buddy.yml | ||
| buildkite | .buildkite/pipeline.yml | ||
| วงกลม | พื้นฐาน/.circleci/config.yml | ||
| Cloudbees Codeship Pro | พื้นฐาน/codeship-pro | codeship-services.yml | |
| การกระทำของ GitHub | chrome.yml | ||
| การกระทำของ GitHub | Chrome-docker.yml | ||
| Gitlab | BASIC/.GITLAB-CI.YML | .gitlab-ci.yml | |
| เจนกินส์ | พื้นฐาน/เจนกินส์ | Jenkinsfile | |
| Semaphore 2.0 | พื้นฐาน/.Semaphore.yml | .Semaphore/semaphore.yml | |
| Travis CI | พื้นฐาน/.travis.yml | .travis.yml |
ตัวอย่างเอกสาร Cypress Documentation CI ให้ตัวอย่างเพิ่มเติมพร้อมคำแนะนำมากมายสำหรับการใช้ Cypress กับผู้ให้บริการ CI ที่ได้รับความนิยมมากที่สุด
ในการเรียกใช้การทดสอบจาก repo นี้บนเครื่องในเครื่องของคุณก่อนอื่นตรวจสอบให้แน่ใจว่าเครื่องของคุณตรงตามข้อกำหนดของระบบไซเปรสรวมถึงการติดตั้ง node.js ตามรุ่นที่ระบุไว้ในไฟล์. node-version
การดำเนินการคำแนะนำต่อไปนี้จะโคลนที่เก็บติดตั้งการพึ่งพาและเรียกใช้ 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 เป็น package.json สคริปต์ที่เริ่มต้นเว็บเซิร์ฟเวอร์ท้องถิ่นแล้วใช้ Cypress Run เพื่อเรียกใช้ Cypress อย่างไร้ความปราณี หากคุณต้องการเรียกใช้การทดสอบ Cypress แบบโต้ตอบให้เรียกใช้คำสั่งต่อไปนี้ซึ่งใช้ Cypress Open เพื่อเรียกใช้ Cypress ในโหมดหัว คุณสามารถเลือกการทดสอบแต่ละครั้งเพื่อเรียกใช้
npm run local:open เป็นทางเลือกในการใช้ local:open และ local:run Scripts คุณยังสามารถเริ่มต้นเซิร์ฟเวอร์ในขั้นตอนเดียวจากนั้นเรียกใช้ Cypress ในขั้นตอนที่สอง
npm start # start server on port 8080 คุณสามารถตรวจสอบว่าเซิร์ฟเวอร์กำลังทำงานอยู่หากคุณเปิดเว็บเบราว์เซอร์และนำทางไปยัง http://localhost:8080
จากนั้นในหน้าต่างเทอร์มินัลแยกต่างหากจะดำเนินการอย่างใดอย่างหนึ่ง
npx cypress run # for headless modeหรือ
npx cypress open # for headed interactive mode สคริปต์ local:run และ local:open ใช้นามแฝง start-test ของโมดูล npm เริ่มต้นเซิร์ฟเวอร์และทดสอบเพื่อเรียกใช้/scripts/start.js ซึ่งเริ่มต้นเว็บเซิร์ฟเวอร์รอให้มันพร้อมแล้ว เปิดตัว Cypress
สคริปต์ start ใช้งานเว็บเซิร์ฟเวอร์โดยใช้โมดูล NPM ให้บริการและแสดงแอพ Sink Kitchen บนพอร์ต 8080
หากคุณติดตั้ง Docker ในเครื่องเช่นการใช้ Docker Desktop คุณสามารถเรียกใช้การทดสอบจาก repo นี้โต้ตอบในคอนเทนเนอร์ Docker ใช้ภาพ Cypress Docker ซึ่งสร้างขึ้นด้วยข้อกำหนดเบื้องต้นทั้งหมดสำหรับการใช้งาน Cypress พวกเขามีให้บริการเป็นฐานเบราว์เซอร์และตัวเลือกรวมจาก Docker Hub และแกลเลอรี่สาธารณะ Amazon ECR (Elastic Container Registry)
ดังกล่าวข้างต้นเริ่มต้นด้วยการโคลน repo และการติดตั้งการอ้างอิง:
git clone https://github.com/cypress-io/cypress-example-kitchensink
cd cypress-example-kitchensink
npm ciบันทึก
เพื่อความเรียบง่ายตัวอย่าง Docker ด้านล่างใช้การอ้างอิงที่เก็บเช่น cypress/base พร้อมแท็กเวอร์ชัน latest ในการเลือกเวอร์ชันก่อนหน้าให้แทนที่ latest ด้วยแท็กที่ชัดเจนเช่น cypress/base:20.15.1 แนะนำให้ใช้แท็กเวอร์ชันที่ชัดเจนสำหรับการผลิต การใช้งานมีการอธิบายเพิ่มเติมในการเลือกแท็ก
ตัวอย่างต่อไปนี้ใช้ภาพไซเปรส/ฐานซึ่งไม่มีเบราว์เซอร์ คุณจะใช้เบราว์เซอร์อิเล็กตรอนที่รวมกับไซเปรสแทน ในการเรียกใช้คอนเทนเนอร์ Docker ให้ดำเนินการดังต่อไปนี้:
docker run -it --rm -v .:/e2e -w /e2e cypress/base:latestเมื่อพรอมต์คอนเทนเนอร์ปรากฏขึ้นให้ป้อน:
npx cypress install # install Cypress binary
npm run test:ci # start server and run tests in Electron browser
exit ด้วยภาพไซเปรส/เบราว์เซอร์คุณมีตัวเลือกเพิ่มเติมของเบราว์เซอร์ Chrome ขอบและ Firefox ดำเนินการต่อไปนี้:
docker run -it --rm -v .:/e2e -w /e2e cypress/browsers:latestเมื่อพรอมต์คอนเทนเนอร์ปรากฏขึ้นให้ป้อน:
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/รวมเพิ่มการติดตั้ง Cypress แบบเต็มเมื่อเทียบกับ Cypress/Browsers ดำเนินการต่อไปนี้เพื่อเรียกใช้คอนเทนเนอร์ด้วยคำสั่งหนึ่งบรรทัดทดสอบกับเบราว์เซอร์ 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 แทนที่แท็ก latest ในคำสั่งด้านบนโดยใช้เวอร์ชัน Cypress จาก package ของ repo json หากพื้นที่เก็บข้อมูลนี้ยังไม่ได้รับการอัปเดตเป็นรุ่นไซเปรสล่าสุดที่ปล่อยออกมา โปรดทราบว่าเวอร์ชันที่ไม่ตรงกันจะทำให้เกิดข้อผิดพลาด
บันทึก
เบราว์เซอร์เพิ่มเติม Chrome, Edge และ Firefox ถูกติดตั้งเฉพาะใน linux/amd64 สถาปัตยกรรมภาพ cypress/browsers และ cypress/included เบราว์เซอร์ไม่สามารถติดตั้งไว้ล่วงหน้าสำหรับภาพสถาปัตยกรรม linux/arm64 เบราว์เซอร์อิเล็กตรอนซึ่งอยู่ใน Cypress มีอยู่ในภาพและสถาปัตยกรรมทั้งหมด
หากคุณต้องการลองใช้การทดสอบในผู้ให้บริการการรวม (CI) อย่างต่อเนื่องคุณต้องแยกที่เก็บก่อนเพื่อให้คุณมีสำเนาของคุณเอง อ้างถึงเอกสาร GitHub เพื่อตั้งค่านามแฝงสำหรับ remote upstream (ไปยัง repo นี้) และ remote origin (ไปยังส้อมของคุณ) อย่างถูกต้อง คุณจะต้องมีบัญชีกับผู้ให้บริการ CI ที่คุณต้องการทดสอบด้วย
ตรวจสอบแนวทางที่มีส่วนร่วม
ดูรุ่น
