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

這樣就可以使用

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

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