Cypress UI/API測試的使用參考
官網的深入示例
https://docs.cypress.io/examples/examples/recipes.html
|
類別 |
地址和備注 |
|
workshop |
https://docs.cypress.io/examples/examples/workshop.html#End-to-end-Testing-with-Cypress-io
https://github.com/cypress-io/testing-workshop-cypress 這里有初中高級別的學習說明。包含一步步如何把工程等做出來的 |
|
Recipes |
https://docs.cypress.io/examples/examples/recipes.html#Fundamentals 各種技術點的菜單式講解 |
|
視頻 |
https://docs.cypress.io/examples/examples/tutorials.html 需要FQ |
|
Applications |
https://docs.cypress.io/examples/examples/applications.html 完整的應用工程測試的例子 Kitchen Sink Vanilla Showcases every single Cypress command 展示每個命令的用法 TodoMVC React Compares the official TodoMVC Selenium tests to Cypress TodoMVC和selenium的對比 Realworld React Full end-to-end tests for the gothinkster/realworld “Conduit” app 完整的應用工程測試 |
|
|
|
相關資料內網confluence搜索關鍵詞 cypress
Docker方式運行環境
除了普通的安裝方式外，這里對基于docker的運行方式進行一個總結。
docker方式比較簡單，依賴少，多人工作時比較方便
運行模式
https://www.cypress.io/blog/2019/05/02/run-cypress-with-a-single-docker-command/
Running headless tests-后臺運行模式
If you have Cypress end-to-end tests, you can run them using the complete image. For example, if your project structure looks like this:
cypress/
integration/
spec.js
cypress.json
Then you can execute your Cypress tests using the following shell command:
$ docker run -it -v $PWD:/e2e -w /e2e cypress/included:3.2.0
Interactive mode-交互模式
DISPLAY=$IP:0
docker run -it \
-v $PWD:/e2e \
-v /tmp/.X11-unix:/tmp/.X11-unix \
-w /e2e \
-e DISPLAY \
--entrypoint cypress \
cypress/included:3.2.0 open --project .
鏡像類別
https://docs.cypress.io/examples/examples/docker.html
|
cypress/base:<Node version> has the operating system dependencies required to run Cypress. |
Cypress依賴的運行環境 |
|
cypress/browsers:<tag> extends the base images with pre-installed browsers. |
包含了瀏覽器的鏡像Docker image with all operating system dependencies and some pre-installed browsers, but NOT Cypress itself. See cypress/included images if you need Cypress pre-installed in the image.
下載地址 |
|
cypress/included:<Cypress version> extends the base images with pre-installed Cypress versions. |
安裝好的可用的cypress鏡像【有內置瀏覽器的版本】Docker images with all operating system dependencies, Cypress, and some pre-installed browsers.
下載地址 |
鏡像的完整類別地址
https://github.com/cypress-io/cypress-docker-images
|
cypress/browsers:node12.18.3-chrome87-ff82 914M |
完整的使用說明
https://github.com/cypress-io/cypress-docker-images/tree/master/included
docker run -it -v $PWD:/e2e -w /e2e cypress/included:6.1.0
示范例子
基礎：由有于需要在容器中運行GUI程序vscode和cypress runner，因此宿主機器需要有X11 Server服務，不同的系統的情況
l Linux: 只要安裝了Linux桌面默認就可用
l Windows:參考“Linux服務器的x11方式遠程管理參考”
由于需要寫腳本等，不建議使用windows，統一使用linux桌面版【centos7安裝時選擇桌面即可】
示范目錄說明
- 1 dev
n 基于官方的發布鏡像做一個完整的包含開發工具vscode的再發布鏡像
n ide.sh 執行這個即可生成，詳細參考其中的說明
- 2.1 starter
n 最簡單的一個測試工程
n run.sh 執行這個可以直接啟動vscode 和cypress runner
- 2.2 conduit-app cypress-realworld-app-develop
n 這是官方發布的2個完整的WEB系統測試
n run.sh 執行這個可以直接啟動vscode 和cypress runner
【例子和文檔在 https://gitee.com/wushifeng/cypressKit 這里可以查看】
整體的運行效果類似如下圖
