你不知道的Cypress系列（7） -- 當(dāng)iFrame遇見彈出框

轉(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

原因如下：

1. Cypress當(dāng)前沒(méi)有提供原生的命令來(lái)訪問(wèn)iFrame。
   

2. 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， 帶你入圈