多表格合并一起
1077
2022-05-30
通過(guò)一個(gè)簡(jiǎn)單的例子，了解 Cypress 的運(yùn)行原理
Cypress 是 SAP Spartacus 前端 e2e 測(cè)試使用的框架。
Cypress 并不是廣義上的 web 自動(dòng)化工具，并不適合編寫(xiě)腳本來(lái)測(cè)試已經(jīng)處于生產(chǎn)狀態(tài)下的不受測(cè)試者控制的網(wǎng)站。
Cypress is not a general purpose web automation tool. It is poorly suited for scripting live, production websites not under your control.
https://docs.cypress.io/guides/getting-started/writing-your-first-test#Step-1-Visit-a-page
After a test function is finished running, Cypress goes to work executing the commands that were enqueued using the cy.* command chains.
等到 Cypress 所有的測(cè)試函數(shù)都結(jié)束運(yùn)行后，Cypress 才開(kāi)始執(zhí)行之前通過(guò) cy.* 命令放到任務(wù)隊(duì)列中的指令。
這個(gè)簡(jiǎn)單的 Cypress 測(cè)試程序，源代碼如下：
///
測(cè)試結(jié)果如下：
逐行語(yǔ)句分析
1. describe 語(yǔ)句
describe 是一個(gè) Mocha.SuiteFunction 函數(shù)，接受字符串 title 和箭頭函數(shù)作為輸入?yún)?shù)。返回 Mocha.Suite 實(shí)例。該 describe 函數(shù)僅當(dāng)被 mocha CLI 調(diào)用時(shí)才可用。
2. it
定義一個(gè) test specification(也稱(chēng) test case)，回調(diào)函數(shù)為測(cè)試主程序的執(zhí)行代碼。
3. cy.visit
訪問(wèn)指定的 url.
命令的幫助文檔：
https://docs.cypress.io/api/commands/visit
當(dāng) visit 參數(shù)指定的 url 對(duì)應(yīng)的頁(yè)面結(jié)束加載后，會(huì) yield 一個(gè) windows 對(duì)象：
cy.visit('/') // yields the window object .its('navigator.language') // yields window.navigator.language .should('equal', 'en-US') // asserts the expected value
its 方法：取得調(diào)用對(duì)象指定參數(shù)的值。
例子：
cy.wrap({ width: '50' }).its('width') // Get the 'width' property cy.window().its('sessionStorage') // Get the 'sessionStorage' property
參考其幫助文檔：
https://docs.cypress.io/api/commands/its
cy.visit() 的執(zhí)行細(xì)節(jié)：
Cypress automatically detects things like a page transition event and will automatically halt running commands until the next page has finished loading.
Cypress 自動(dòng)檢測(cè)諸如 page transition 類(lèi)型的事件，如果 cy.visit 待訪問(wèn)的頁(yè)面沒(méi)有加載完畢，則不會(huì)繼續(xù)執(zhí)行指令。
Had the next page not finished its loading phase, Cypress would have ended the test and presented an error.
如果 cy.visit 的頁(yè)面最終無(wú)法完成加載， Cypress 會(huì)停止測(cè)試，拋出錯(cuò)誤消息。
Under the hood - this means you don’t have to worry about commands accidentally running against a stale page, nor do you have to worry about running commands against a partially loaded page.
這使得我們完全不用擔(dān)心，我們書(shū)寫(xiě)的 Cypress 程序里的指令，會(huì)運(yùn)行在一個(gè)正在加載中的頁(yè)面。
We mentioned previously that Cypress waited 4 seconds before timing out finding a DOM element - but in this case, when Cypress detects a page transition event it automatically increases the timeout to 60 seconds for the single PAGE LOAD event.
Cypress 指令查找 DOM 元素的超時(shí)時(shí)間是 4 秒，而 Cypress 等待 cy.visit 加載頁(yè)面完成時(shí)，超時(shí)時(shí)間自動(dòng)修改成了 60 秒。
4. cy.contains(‘type’)
Get the DOM element containing the text.
查找 DOM 樹(shù)中包含 type 文本的元素。
如下圖所示：
打開(kāi) Chrome 開(kāi)發(fā)者工具，可以查看到該指令執(zhí)行后返回的結(jié)果：
下面這個(gè)例子，待測(cè)試的 HTML 如下圖所示：
- apples
- oranges
- bananas
下面這行語(yǔ)句：
cy.contains(‘a(chǎn)pples’)
生成的 DOM 對(duì)象為：
contains 方法可以在一個(gè)節(jié)點(diǎn)的后代節(jié)點(diǎn)里進(jìn)行查詢(xún)：
查找 input 元素的代碼：
cy.get('form').contains('submit the form!').click()
5. click
This command simulates a user interacting with your application. Under the hood, Cypress fires the events a browser would fire thus causing your application’s event bindings to fire.
click 命令模擬應(yīng)用里的用戶(hù)點(diǎn)擊行為。在底層，Cypress 采取和用戶(hù)在瀏覽器上真實(shí)點(diǎn)擊時(shí)拋出 event 的同樣方式，來(lái)觸發(fā)應(yīng)用程序的事件處理函數(shù)。
Prior to issuing any of the commands, we check the current state of the DOM and take some actions to ensure the DOM element is “ready” to receive the action.
在 Cypress 執(zhí)行 click 命令之前，框架會(huì)進(jìn)行 DOM 狀態(tài)的檢查，確保該 DOM 元素真正能夠接收點(diǎn)擊事件。
在執(zhí)行 click 命令之前，總共有這些檢查和前置事件需要執(zhí)行：
Scroll the element into view.
Ensure the element is not hidden.
Ensure the element is not disabled.
Ensure the element is not detached.
Ensure the element is not readonly.
Ensure the element is not animating.
Ensure the element is not covered.
Scroll the page if still covered by an element with fixed position.
Fire the event at the desired coordinates.
打開(kāi) Chrome 開(kāi)發(fā)者工具，可以觀察到 click 指令執(zhí)行時(shí)的屏幕坐標(biāo)，以及發(fā)生的鼠標(biāo)事件：
6. cy.url
得到當(dāng)前處于激活狀態(tài)的頁(yè)面的 url.
7. cy.url().should(‘include’, ‘/commands/actions’);
7. cy.get(’.action-email’)
使用 get 輸入?yún)?shù)里包含的 select，獲取指定的 DOM 元素。
結(jié)果：得到了包含 .action-email 的 input DOM 元素。
8. type(‘jerry@email.com’)
在第 7 步查詢(xún)到的 input 字段里，輸入指定的字符。
指令幫助文檔：
https://docs.cypress.io/api/commands/type#Tabindex
發(fā)生的鍵盤(pán)事件如下：
最后的 assert 成功執(zhí)行：
JavaScript TypeScript web前端 開(kāi)發(fā)者
版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶(hù)投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。
相關(guān)文章
