本文技術(shù)難度★★★，如果前編內(nèi)容順利執(zhí)行蜈彼，請(qǐng)繼續(xù)筑辨。
如果Selenium尚無法靈活運(yùn)用的讀者，本文可能難度較大幸逆。
“理論聯(lián)系實(shí)惠棍辕，密切聯(lián)系領(lǐng)導(dǎo)，表揚(yáng)和自我表揚(yáng)”——我就是老司機(jī)还绘，曾經(jīng)寫文章教各位怎么打拼職場(chǎng)的老司機(jī)楚昭。
不記得沒關(guān)系，只需要知道：有這么一位IT老司機(jī)拍顷，
穿上西裝抚太，帶大家打拼職場(chǎng)！
操起鍵盤菇怀，帶大家打磨技術(shù)凭舶！
上一篇IT老司機(jī)帶著各位已經(jīng)成功安裝了Cypress，并且讓Cypress成功運(yùn)行起來了爱沟。上篇任意門?Cypress自動(dòng)化測(cè)試系列之二
????本篇帅霜，IT老司機(jī)教你寫第一個(gè)Cypress測(cè)試用例。
上次說到呼伸，老司機(jī)成功帶著大家完成了第一個(gè)真正意義上的測(cè)試用例身冀，點(diǎn)擊網(wǎng)頁上的鏈接，跳轉(zhuǎn)到新網(wǎng)頁括享，設(shè)置斷言驗(yàn)證結(jié)果搂根。
當(dāng)然，僅僅是這樣铃辖，顯然是不夠的剩愧。
老司機(jī)這次帶著各位繼續(xù)擴(kuò)展第一個(gè)測(cè)試用例，操作網(wǎng)頁上其他元素娇斩。
上次的測(cè)試用例仁卷，看起來這樣的：
describe('A real test case', function() {
? ?it('Visits the webpage', function() {
? ? ? ?cy.visit('https://example.cypress.io');
? ? ? ?cy.contains('type').click();
? ? ? ?cy.url().should('include', '/commands/actions')
? ?})
})
????默認(rèn)大家已經(jīng)打開了編輯js文件的IDE，并且已經(jīng)啟動(dòng)了cypress（npx cypress open）
跟著老司機(jī)一步一步擴(kuò)展犬第。
今天講的內(nèi)容锦积，將用一個(gè)例子教會(huì)大家：
? 怎么CSS定位到元素；
? 怎么輸入內(nèi)容歉嗓；
? 怎么編寫斷言驗(yàn)證結(jié)果丰介。
????按照上面TestCase內(nèi)容，Cypress自動(dòng)打開了網(wǎng)頁：
https://example.cypress.io/commands/actions
網(wǎng)頁右側(cè)有兩個(gè)文本框：
????打開瀏覽器的“開發(fā)者工具”鉴分，可以看到該DOM元素類型為“input”哮幢，class屬性為：“form-control action-email”。
????本次試驗(yàn)冠场，我們將往input類型DOM中輸入一些內(nèi)容家浇。
????在Cypress框架中，用cy.get()方法選擇一個(gè)DOM元素碴裙，選擇方法必須是CSSSelector钢悲，跟Selenium一樣的思路。
????用?.type() 方法寫入內(nèi)容進(jìn)選中的DOM舔株。
最后用?.should()方法完成斷言驗(yàn)證莺琳，完成TestCase過程稽坤。
????加上以上三步后看杭，測(cè)試用例看起來這樣的：
describe('My First Test', function() {
? ?it('clicking "type" navigates to a new url', function() {
? ? ? ?cy.visit('https://example.cypress.io')
? ? ? ?cy.contains('type').click()
? ? ? ?// Should be on a new URL which includes '/commands/actions'
? ? ? ?cy.url().should('include', '/commands/actions')
? ? ? ?cy.get('.action-email')
? ? ? ? ? ?.type('fake@email.com')
? ? ? ? ? ?.should('have.value', ' fake@email.com')
? ?})
})
????基本可以望文生義了，對(duì)吧汤锨？
????測(cè)試結(jié)果：
????如果想輸入完畢办铡，讓瀏覽器反應(yīng)一會(huì)兒辞做，怎么辦琳要？
????修改 .type() 方法成：.type('fake@email.com',{ delay: 100 })
????記得delay 的單位是毫秒，以上寫的100秤茅，實(shí)際上讓瀏覽器等待了 0.1 秒稚补。
????到此為止，第一個(gè)TestCase才真正完成框喳。
總結(jié)一下：
1. cy.get()?通過 CSSSelector 方式選擇DOM元素课幕；
2. 再通過 .type()輸入內(nèi)容；
3. 聰明的讀者五垮，是不是可以舉一反三地嘗試著點(diǎn)出“click()”乍惊、“dbclick()”、“check()”放仗、“uncheck()”润绎、“select()”、“clear()”等等匙监？
4. 如果是提交凡橱，則需要注意：cy.get('.action-form').submit() 之后，需要 .next() 再可以 .should('contain', 'Sth. You want to exam.') 斷言判斷亭姥。
各位讀者稼钩，您們的閱讀量是我的動(dòng)力！
如果您覺得本文還可以一讀达罗，請(qǐng)不吝轉(zhuǎn)發(fā)坝撑！IT老司機(jī)繼續(xù)帶各位一起探究Cypress！
謝謝Ａ溉唷巡李！
作 者：Testfan Arthur
出 處：微信公眾號(hào)：自動(dòng)化軟件測(cè)試平臺(tái)
版權(quán)說明：歡迎轉(zhuǎn)載，但必須注明出處扶认，并在文章頁面明顯位置給出文章鏈接
