Chrome DevTools 作為自動化協定

2019年9月16日 ·閱讀時間 6 分鐘

在過去的幾年中，出現了許多新的測試框架，它們提供了不同的功能，但也存在某些限制。雖然像Selenium這樣的工具經常被認為速度慢且不穩定，而像Cypress.io或Puppeteer這樣的工具則被炒作為測試領域的未來。實際上，所有工具都有其各自的用例，具有不同的支援級別，並且基於完全不同的架構。比較它們是相當無用的，因為最終會變成比較蘋果和橘子。在較大的測試套件中，使用所有這些工具都可能發生不穩定性和競爭條件，因此我們可以安全地說，到目前為止，它們（包括 WebdriverIO）都尚未找到世界 /(domin|autom)ation/ 的終極解決方案。

功能棄用

本部落格文章中宣佈的功能已從 WebdriverIO v9 開始棄用。

歸根究底，自動化瀏覽器的方法大致有兩種。一種是使用名為WebDriver的官方 W3C 網路標準，另一種是某些瀏覽器目前公開的原生瀏覽器介面。WebDriver 協定是事實上的標準自動化技術，它不僅允許您自動化所有桌面瀏覽器，還允許在包括行動裝置、桌面應用程式甚至智慧電視在內的任意使用者代理上執行自動化。如果您不使用 WebDriver，您的自動化框架很可能使用原生瀏覽器介面來執行自動化。雖然過去每個瀏覽器都有自己的（通常沒有文件記錄）協定，但現在許多瀏覽器（包括 Chrome、Edge 以及不久之後的 Firefox）都帶有一個或多或少統一的介面，該介面接近所謂的Chrome DevTools 協定。雖然 WebDriver 提供了真正的跨瀏覽器支援，並允許您使用Sauce Labs等供應商在雲端大規模執行測試，但原生瀏覽器介面通常允許更多的自動化功能，例如監聽和與網路或 DOM 事件互動，同時通常僅限於單一瀏覽器。

隨著 WebdriverIO v5.13 的發佈，我們現在引入了一個新選項，允許您指定測試的自動化協定並利用這兩個世界的優勢。這樣，您現在可以決定是使用 WebDriver 還是 Chrome DevTools（透過 Puppeteer）來執行測試。您的測試實際上沒有任何變化，只是自動化使用不同的技術進行。我們建立了一個新的 NPM 套件，我們稱之為devtools，它實現了所有 WebDriver 命令，但使用 Puppeteer 執行它們。這是一種新型的插件，甚至允許您建構自己的基於 WebDriver 的自動化套件，以使用 WebdriverIO 自動化任意裝置。這個新選項名為 automationProtocol，它期望一個字串，預設設定為 "webdriver"，以使用 WebdriverIO 自己的 webdriver 繫結來執行自動化。但是，如果您透過以下方式安裝新的 devtools 套件

$ npm install --save-dev devtools webdriverio

並在您的選項中設定 automationProtocol: 'devtools'，所有自動化都將透過 Chrome DevTools（更具體地說是透過 Puppeteer）發生，同時使用相同的 WebdriverIO 命令介面

const { remote } = require('webdriverio')

let client;

(async function () {
    client = await remote({
        automationProtocol: 'devtools', // CHANGE PROTOCOL HERE
        capabilities: { browserName: 'chrome' } // or `browserName: 'firefox'`
    })

    await client.url('https://webdriverio.dev.org.tw')
    console.log(await client.getTitle())
    await client.deleteSession()
})().catch(async (e) => {
    console.error(e.stack)
    await client.deleteSession()
})

這對於本機測試尤其有用，因為您不再需要下載瀏覽器驅動程式，這通常會導致下載位置和執行方式的混淆。除此之外，由於 WebdriverIO 直接連線到瀏覽器，因此測試的執行速度會快得多。

如前所述，您現在可以使用 WebDriver 利用大規模執行真正的跨瀏覽器測試的優勢，並在單一工具中利用 DevTools 的所有其他自動化功能。也就是說，鑑於在會話期間無法切換協定，您可能需要一組需要 Puppeteer 參與的測試，同時還有一組在雲端跨瀏覽器執行的測試。

為了在您的測試中存取 Puppeteer，我們引入了一個名為 getPuppeteer() 的命令，它會傳回 Puppeteer 框架的 browser 類別。從那裡，您可以存取 Puppeteer 介面及其所有其他類別。請注意，這些介面提供的命令僅基於 Promise，而 WebdriverIO 不會像您可能知道的使用 WDIO 測試執行器那樣包裝它們。在這種情況下，我們建議在 call 命令中手動包裝所有 Puppeteer 命令呼叫，以確保在繼續執行其他命令之前解析所有 Promise。例如，以下指令碼顯示如何在 WDIO 測試執行器世界中使用 Puppeteer 透過 devtools 自動化協定使用 WebdriverIO

describe('my e2e tests', () => {
    // ...

    it('replaces the WebdriverIO logo with the Puppeteer logo', () => {
        browser.url('https://webdriverio.dev.org.tw')

        /**
         * run Puppeteer code with promises to intercept network requests
         * and replace the WebdriverIO logo in the docs with the Puppeteer logo
         */
        browser.call(async () => {
            const puppeteerBrowser = browser.getPuppeteer()
            const page = (await puppeteerBrowser.pages())[0]
            await page.setRequestInterception(true)
            page.on('request', interceptedRequest => {
                if (interceptedRequest.url().endsWith('webdriverio.png')) {
                    return interceptedRequest.continue({
                        url: 'https://user-images.githubusercontent.com/10379601/29446482-04f7036a-841f-11e7-9872-91d1fc2ea683.png'
                    })
                }

                interceptedRequest.continue()
            })
        })

        // continue with sync WebdriverIO commands
        browser.refresh()
        browser.pause(2000)
    })

    // ...
})

我們也確保您可以將 devtools 自動化協定與 WDIO 測試執行器服務（例如 @wdio/devtools-service）一起使用，以盡可能實現無縫體驗。您可以在 WebdriverIO 範例目錄中找到以獨立模式執行的完整指令碼範例。

我們建議僅在您的功能測試需要 WebDriver 未提供的某種自動化功能時才在 devtools 協定上執行測試。每當在本機執行測試時，切換到 devtools 也是有意義的，因為測試執行速度會快得多。如果您遵循我們的最佳做法，則應按環境分割 wdio 設定檔（例如，本機測試與針對 Sauce Labs 或在您的網格中執行測試）。您現在可以使用設定來定義一組需要某些 Puppeteer 互動的測試

// wdio.devtools.conf.js
const { config } = require('./wdio.conf.js')
exports.config = Object.assign(config, {
    /**
     * set automation protocol to devtools
     */
    automationProtocol: 'devtools',
    /**
     * define a set of tests that require Puppeteer involvement
     */
    specs: [
        'tests/e2e/devtools/**'
    ],
    /**
     * run tests only on Firefox and Chrome in headless mode
     */
    capabilities: [{
        browserName: 'chrome',
        'goog:chromeOptions': {
            headless: true
        }
    }, {
        browserName: 'firefox',
        'moz:firefoxOptions': {
            headless: true
        }
    }]
    // other specific options ...
})

有了新的 automationProtocol 選項，我們已經將專案開放給 WebDriver 之外的自動化技術。使用這兩種方法都有優缺點，透過此功能，我們允許您在單一工具中使用這兩種方法。devtools 套件仍在開發中，我們將在未來幾週內完成其所有功能。如果您對此有任何回饋、錯誤或意見，請透過Twitter或在我們的社群 Discord 伺服器上聯絡我們。

謝謝！