cypress 環境

用npm 建立

用VSCODE開啟到專案內

使用終端機去裝Cypress

​​​​npm install cypress 

​​​​npm install --save-dev cypress-log-to-output

安裝完成之後

打開整個專案資料夾

# 運行指令 
npx cypress open

開啟過後可以選左邊開啟快速測試

之後選取瀏覽器後會到這裡 點右邊的 NEW SPEC
點擊之後
選取右邊的新增 建立測試檔案

建立完成後即可開始測試

點擊建立後的檔案即可測試

之後可以藉由VSCODE 修改測試內容

先前往YOUTUBE首頁

​​​​describe('template spec', () => {
​​​​  it('passes', () => {
​​​​    cy.visit('https://www.youtube.com/')
​​​​  })
​​​​})

之後可以點擊

下一個例子
我前往維基百科點擊科學

該如何寫

​​​​cy.visit('https://zh.wikipedia.org/wiki/%E6%B0%B4')
​​​​cy.contains('科學').click()

再接者我可以登入輸入帳號密碼

​​​​cy.contains('登入').click()
​​​​cy.get('#wpName1').type("admin")
​​​​cy.get("#wpPassword1").type('password')

之後點擊登入

​​​​cy.contains('登入').click()

簡單的測試方式如上

產生 執行報表

先下載模組

​​​​npm i --save-dev cypress-mochawesome-reporter

在cypress.config.js 把reporter和required加上去

​​​​const { defineConfig } =require("cypress");
​​​​module.exports = defineConfig({
​​​​ reporter: 'cypress-mochawesome-reporter',
​​​​  reporterOptions: {
​​​​    reportDir: 'cypress/results',
​​​​    overwrite: true,
​​​​    html: true,
​​​​    json: false,
​​​​  },

​​​​  e2e: {

​​​​setupNodeEvents(on, config) {

​​​​  require('cypress-mochawesome-reporter/plugin')(on);

​​​​}, },});

然後
在cypress/support/e2e.js中 額外import

​​​​import 'cypress-mochawesome-reporter/register';

檔案名稱(包含路徑) =cypress/e2e/spec.cy.js

​​​​ npx cypress run --spec 'cypress/e2e/spec.cy.js' 

基本上就會有每一筆個別執行的成功率等等資訊

有時候會有一些尋找文字時會找不到

可以使用force去做加強尋找
效果是不等待 可操作時間

應為有可能會導致超過預設等待時間而報錯

​​​​ cy.contains("Who").click({ force: true });

常用語法 範例

actions.cy

aliasing.cy

files.cy

querying.cy

traversal.cy

window.cy

waiting.cy

location.cy

不過想要更詳細的解釋 在官網會有個別功能的詳細解釋

https://docs.cypress.io/guides/core-concepts/introduction-to-cypress

如果要模擬一些特別案件
可以使用如下這些語法

​​​​ .type('{leftarrow}{rightarrow}{uparrow}{downarrow}')
​​​​  .type('{del}{selectall}{backspace}')
​​​​  .type('{alt}{option}') //these are equivalent
​​​​  .type('{ctrl}{control}') //these are equivalent
​​​​  .type('{meta}{command}{cmd}') //these are equivalent
​​​​  .type('{shift}')

如果需要 CSS方面的選擇的話
可以向如下這樣的方法去過濾

​​​​.should('have.attr', 'style', 'color: red;')

儲存

儲存的檔案(包含路徑) cypress/test.txt

​​​​    cy.writeFile('cypress/test.txt',"LogOut successful")

寫入之後就會像這樣

如果還是沒有找到想要的語法的話

建立時會有預設頁面的建立

裡面會有一些 比較多的用法

利用 open去看個別的效果

之後便可以去試著使用

---

輔助工具

CYPRESS 使用者腳本套件

到下面的網站去裝 cypress chrome recorder

https://chromewebstore.google.com/detail/cypress-chrome-recorder/fellcphjglholofndfmmjmheedhomgin

裝完後可以建立匯出CYPRESS的腳本

用法先去到你要使用的網站
開啟開發者工具在工具欄中尋找錄製工具

可以錄製當前使用者的動作,

錄製完成後上方會有匯出功能

向下箭頭的那個有一個是寫 cypress test

他會匯出JS檔

然後你可以把那個JS檔案放進E2E資料夾

並改副檔名成.cy.js

這樣就可以使用

但請注意 他匯出的功能並沒有很完善

所以可能會有些動作會判讀有問題需要手動修改