????????????????????????????????????

轉眼之間，你不知道的Cypress系列已經到第13篇了。在Cypress中國群內、在公眾號iTesting里，我每天都能看到大量關于Cypress的使用討論和私下問詢。這讓我感到無比榮幸（買了書的同學們，公眾號回復你的微信號，拉你到Cypress中國群）。

今天是你不知道的Cypress系列（13） --?你真的需要多瀏覽器測試嗎？

在自動化測試過程中，特別是Web端UI自動化測試過程中，發(fā)現(xiàn)很多同學對多瀏覽器測試/跨瀏覽器測試有很多誤區(qū)，?今天來嘗試解答下。

多瀏覽器測試 VS 跨瀏覽器測試

自動化測試過程中，很少同學會去區(qū)分這兩個概念，常將它們混為一談。實際上，它們還是有些區(qū)別：

1. 多瀏覽器測試是指在自動化測試的一次執(zhí)行過程中，使用多個瀏覽器進行測試。這里有兩個重點：

1. 一次運行過程中

2. 多個瀏覽器在同時/順時執(zhí)行測試用例

2. 跨瀏覽器測試是指自動化測試支持在不同的瀏覽器上執(zhí)行測試。這里也有兩個重點：

1. 支持自動化測試運行在不同瀏覽器上

2. 在一次運行過程中，沒有要求必須同時在不同瀏覽器上運行測試

從業(yè)界大部分UI自動化測試框架來看，跨瀏覽器測試，基本上是任何一個自動化測試框架都支持的，不同點僅在支持程度即支持的瀏覽器種類的數(shù)量上。

跨瀏覽器測試的場景

跨瀏覽器測試的場景很常見，比如：

1. 業(yè)務需求。

   剛需。例如，產品描述寫明支持在不同瀏覽器上執(zhí)行。

2. 不同瀏覽器使用同一內核。

   例如Chrome家族的Chromium內核。Chrome，包括一眾國產瀏覽器，其實都是同一個內核。理論上同一產品在使用同一內核的瀏覽器上的表現(xiàn)應該相同。

在實際測試中，測試人員常常需要根據(jù)產品需求進行測試，這就意味著，同一個測試用例在不同測試瀏覽器上執(zhí)行是必須的。

多瀏覽器測試的場景

多瀏覽器測試的場景不太常見，這里說一個典型場景：

• 我的產品是Web端聊天室。為了達成測試目標（模擬用戶聊天），我不得不在同一次測試中，驅動兩個瀏覽器示例代表兩個不同的用戶進行操作。

跨瀏覽器測試、多瀏覽器測試解決方案

如果是分布式運行，則無論是跨瀏覽器測試，還是多瀏覽器測試，解決方案都很簡單， 核心原理都一樣：

將測試分發(fā)到不同的虛擬機/Docker下執(zhí)行。
同一個虛擬機/Docker上僅有一個瀏覽器類型。

在實現(xiàn)上，最常見的有Selenium/WebDriver里的Selenium Grid，以及Cypress中的DashBoard。?大多數(shù)技術實力還OK的公司，基本都會自己實現(xiàn)一套并發(fā)運行方案，在此不再贅述。

但如果在本地運行，則看起來Selenium/WebDriver的這一套方案更加流行，況且Cypress自己聲明不支持多瀏覽器測試。這讓很多初次擁抱Cypress技術的同學很受傷，認為Cypress還是不成熟。

果真如此么？

多瀏覽器測試真的是必須的么？

往前10年，Web端自動化基本上是Selenium/WebDriver的天下。這也造成了很多同學有了思維定勢， 其中最經典的一條就是：

UI自動化測試一定要完全模擬用戶行為

從這個道理講，如果我要測試一個Web端聊天室，可不就是需要至少2個瀏覽器同時運行么？

同時，UI自動化測試一定要完全模擬用戶行為這條偽軍規(guī)也變成個別公司摒棄UI自動化測試的最大理由，因為投入產出比實在是不高啊！況且，如果要完全模擬用戶行為，從自動化測試角度來說，意味著對頁面元素的各種操作。但是由于UI頻繁變化是常規(guī)操作，這就導致自動化測試每天發(fā)現(xiàn)很多錯誤，調查下來發(fā)現(xiàn)都是UI自動化測試腳本引起的錯誤，真正的Bug反而追蹤不到（Flaky Test迷霧）。

可是，可是啊，誰告訴你UI自動化測試一定要全部走UI的?。。。?/p>

剖析多瀏覽器測試

在沒有Cypress之前，市面上絕大多數(shù)測試框架都是基于Selenium/WebDriver的（底層都是JSON Payloads Protocol），這意味著，所有針對瀏覽器的操作全部是在瀏覽器之外執(zhí)行的。所以當涉及到模擬用戶操作時，只能是從UI層面一步步點擊。

大家都知道，Cypress的運行原理跟Selenium/WebDriver是不同的（哪里不同，請參考鄙人《前端自動化測試框架 -- Cypress從入門到精通》一書。

這種不同，也讓Cypress對多瀏覽器測試這一偽需求，毫不猶豫的進行了鄙視：

Cypress?will?also?never?support?driving?more?than?1?browser?at?a?time.?
It?is?possible?....?Yet?completely?unnecessaryill also never support driving more than 1 browser at a time.

我就不翻譯了，大家有興趣可以找找官網(wǎng)看。

那么，如果說多瀏覽器測試是偽需求，正確的姿勢應該是如何呢？

stub?or?programatically?control?the?other?user?without?needing?an?entire?browser stub or programatically control the other user without needing an entire browser

簡而言之啊，就是，使用stub。

降維解決多瀏覽器測試

Stub是什么？Cypress說Stub有如下功效：

Replace?a?function,?record?its?usage?and?control?its?behavior.

加上Cypress是完全運行在瀏覽器之內的，跟你的應用程序共享同一個生命周期，這就以為著。瀏覽器里發(fā)生的一切，它都可以捕捉并且改變，于是，我們可以用Stub來達成這個操作。具體怎么執(zhí)行呢？?公眾號回復你的微信號，拉你到Cypress中國群。

實際上，只有掌握了Stub命令，配合上cy.spy()以及Cypress.on()， 你才能真正理解Cypress官網(wǎng)的第一句話到底能在前端測試界掀起多大風和浪：

?The?web?has?evolved.
?Finally,?testing?has?too.

跨覽器測試舉例

我們回到跨瀏覽器測試中來，?假設你使用《前端自動化測試框架 -- Cypress從入門到精通》一書的框架，那么，當你需要你的測試運行在不同的瀏覽器時候，你僅僅需要在mergeReport.js下，更改下瀏覽器名稱即可，

??const?{?totalFailed?}?=?await?cypress.run({
????spec:?`${specFileList}`,
????//改這里
????browser:?'chrome',
????headless:?true,
????reporter:?'mochawesome',
????reporterOptions:?{
??????reportDir:?`${sourceReport.reportDir}`,
??????overwrite:?false,
??????html:?true,
??????json:?true,
????},
??})

當然，你也可以將之參數(shù)化，然后從命令行傳入進來。

那么，對于沒有使用筆者給定框架的同學，如何在命令行執(zhí)行中指定瀏覽器呢？在啟動Cypress命令行時，直接指定瀏覽器即可。

//執(zhí)行運行在chrome瀏覽器上
yarn?cypress?run?--browser?chrome
})

?

如果你想要你的某些測試用例，僅僅在某個瀏覽器下才運行，又該如何做呢？

it('關注iTesting，跟萬人測試團一起成長',?{?browser:?'chrome'?},?()?=>?{
??cy.visit("https://www.helloqa.com")
??//你的其它代碼
})

Cypress有很多奇淫巧技， 我已經總結超過百篇

別走開，下一篇更精彩！

往期回看：

?????????????????? ?你不知道的Cypress系列（1） --雞肋的BDD

? ? ? ? ? ? ? ? ? ? 你不知道的Cypress系列（2） -- ”該死"的PO模型！

????????????????????你不知道的Cypress系列（3） -- 是時候重構自己的思維了！

????????????????????你不知道的Cypress系列（4） -- “PO”已死，App Action當立？

????????????????????你不知道的Cypress系列（5） -- "眼瞎"的TestRunner

????????????????????你不知道的Cypress系列（6） -- 多Tab的小秘密

? ? ? ? ? ? ? ?? ??你不知道的Cypress系列（7） -- 當iFrame遇見彈出框??? ?? ? ?

? ? ? ? ? ? ? ? ? ??你不知道的Cypress系列（8） -- “可視化”測試你知多少

????????????????????你不知道的Cypress系列（9） -- 代碼“自動生成”術

? ? ? ? ? ? ? ? ? ??你不知道的Cypress系列（10） -- CypressHelper

? ? ? ? ? ? ? ? ???你不知道的Cypress系列（11） -- 使用cy.session()加速鑒權。??

? ? ? ? ? ? ? ? ? ?你不知道的Cypress系列（12） -- 測試報告Allure?? ? ? ? ? ?

為了更好的支持我創(chuàng)作，麻煩同學們動動小手，點贊 +?在看 + 轉發(fā)一鍵三聯(lián)。再過一個月，給你們的小驚喜可能就來了 ：）

技術討論

公眾號里直接回復 666， 帶你入圈