你不知道的Cypress系列（7） -- 當(dāng)iFrame遇見彈出框
iTesting，愛測(cè)試，愛分享
轉(zhuǎn)眼之間，你不知道的Cypress系列已經(jīng)到第7篇了。在Cypress中國(guó)群內(nèi)、在公眾號(hào)iTesting里，我每天都能看到大量關(guān)于Cypress的使用討論和私下問(wèn)詢。這讓我感到無(wú)比榮幸（買了書的同學(xué)們，公眾號(hào)回復(fù)你的微信號(hào)，拉你到Cypress中國(guó)群）。
今天是你不知道的Cypress系列（7） -- 當(dāng)iFrame遇見彈出框
自從Cypress出現(xiàn)后，Cypress就在吊打一切Web端測(cè)試框架。雖然Cypress這么優(yōu)秀，但它也有一些妥協(xié)和倔強(qiáng)，除了第6節(jié)的多Tab外，還包括這么一條：
iframes not supported
這是多么的簡(jiǎn)單直接！于是，出現(xiàn)了這么一幕，很多同學(xué)悄咪咪的問(wèn)我：“蔡老師，Cypress不支持iframe啊，iframe都不支持，你怎么還敢推廣它？”
一般這種情況我會(huì)說(shuō)，不支持不代表不可以測(cè)試啊！只是使用Cypress測(cè)試iFrame不那么方便罷了。
什么是iFrame
iFrame是Inline Frame的縮寫。百度百科說(shuō)它的作用是文檔中的文檔，或者浮動(dòng)的框架(FRAME)，iFrame元素會(huì)創(chuàng)建包含另外一個(gè)文檔的內(nèi)聯(lián)框架（即行內(nèi)框架）。
我相信你看了這個(gè)定義會(huì)跟我跟我一樣丈二和尚摸不著頭腦，我們用人話重新說(shuō)一遍：
iFrame是HTML元素的組件，iFrame元素允許你在你的網(wǎng)站中包含來(lái)自其他網(wǎng)站的內(nèi)容。例如，你在各種網(wǎng)站上看到的內(nèi)嵌的視頻，就是iFrame在起作用。
<iframe src="https://www.youu.com/embed/dXBohfjc4WA" width="680" height="480" allowfullscreen></iframe>
iFrame較多，不建議用Cypress
原因如下：
Cypress當(dāng)前沒有提供原生的命令來(lái)訪問(wèn)iFrame。
iFrame的快照不會(huì)顯示在TestRunner里，導(dǎo)致使用Cypress調(diào)試包含iFrame的代碼非常不方便。
彈出框
彈出框也是自動(dòng)化測(cè)試，特別是We吧端自動(dòng)化測(cè)試的一個(gè)難道， 彈出框一般包括如下幾種：
alert
confirm
prompt
我出道題，特別簡(jiǎn)單
好了，現(xiàn)在我有個(gè)需求，需要你測(cè)試下這個(gè)頁(yè)面：
你點(diǎn)擊下“運(yùn)行代碼”，然后再點(diǎn)擊試一試，這個(gè)時(shí)候會(huì)出現(xiàn)一個(gè)警告框，你把警告框關(guān)掉。
先不要看解決方案，你先自己寫下代碼看， 網(wǎng)址如下（在Cypress中國(guó)群某個(gè)群里說(shuō)過(guò)這個(gè)問(wèn)題，結(jié)果很酸爽）：
https://www.w3school.com.cn/tiy/t.asp?f=js_alert
Cypress操作iFrame和彈出框
有的同學(xué)說(shuō)了，我用了Cypress后，再也不想用Selenium/Webdriver了。但是我的應(yīng)用程序包含Cypress，我該怎么辦？
不廢話了，看Cypress如何處理這種情況：
it('測(cè)試alert', () => {
cy.visit('https://www.w3school.com.cn/tiy/t.asp?f=js_alert')
cy.get('iframe').then(($iframe) => {
const $body = $iframe.contents().find('body')
cy.log('iTesting is good!',$body[1])
const $win = $iframe[1].contentWindow
cy.stub($win, 'alert').as('windowAlert')
cy.wrap($body[1])
.contains('試一').click().should(function () {
expect(this.windowAlert).to.be.calledWith('我是一個(gè)警告框！')
})
})
})
注意如下代碼：
cy.get('iframe')
cy.stub($win, 'alert').as('windowAlert')
這兩個(gè)代碼是關(guān)鍵，建議好好查查，實(shí)在不行，群里問(wèn)問(wèn)。
課后作業(yè)
我知道你一定會(huì)問(wèn)，所以我偷偷的給你準(zhǔn)備了一個(gè)簡(jiǎn)單的題目，超級(jí)簡(jiǎn)單哦：
請(qǐng)?jiān)L問(wèn)如下頁(yè)面，然后試著測(cè)試下這里的超鏈接。我相信，你一定會(huì)回來(lái)找我的：）
https://www.w3school.com.cn/tiy/t.asp?f=js_confirm
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_prompt
Cypress有很多奇淫巧技， 我已經(jīng)總結(jié)超過(guò)百篇
別走開，下一篇更精彩！
往期回看：
你不知道的Cypress系列（1） --雞肋的BDD
你不知道的Cypress系列（2） -- ”該死"的PO模型！
你不知道的Cypress系列（3） -- 是時(shí)候重構(gòu)自己的思維了！
你不知道的Cypress系列（4） -- “PO”已死，App Action當(dāng)立？
你不知道的Cypress系列（5） -- "眼瞎"的TestRunner
你不知道的Cypress系列（6） -- 多Tab的小秘密
為了更好的支持我創(chuàng)作，麻煩同學(xué)們動(dòng)動(dòng)小手，點(diǎn)贊 + 在看 + 轉(zhuǎn)發(fā)一鍵三聯(lián)：）
技術(shù)討論
公眾號(hào)里直接回復(fù) 666， 帶你入圈
- - 時(shí)人莫小池中水, 淺處不妨有臥龍 - -
作者：
Kevin Cai, 江湖人稱蔡老師。
兩性情感專家，非著名測(cè)試開發(fā)。
技術(shù)路線的堅(jiān)定支持者，始終相信Nobody can be somebody。
· 猜你喜歡的文章 ·