使用Playwright基於多瀏覽器進行javascript自動化測試的簡單教程- Applitools

banq發表於2020-09-22
瀏覽器JavaScriptAPP

Playwright由Microsoft建立，是一個開放原始碼瀏覽器自動化框架，使JavaScript工程師可以在Chromium，W​​ebkit和Firefox瀏覽器上測試其Web應用程式。
 

啟動瀏覽器並導航到應用程式的URL
第一步是要宣告您希望針對哪個瀏覽器引擎執行測試。同樣，Playwright允許您針對Chromium，Firefox和Webkit執行測試。

如何針對chromium瀏覽器：

const { chromium } = require('playwright')


預設情況下，Playwright以無頭模式執行。如果您想在執行測試時實際看到瀏覽器，請在啟動呼叫中將headless設定為false：

browser = await playwright.chromium.launch({headless: false})


接下來，為瀏覽器和頁面物件宣告變數。

const { chromium } = require('playwright')
let browser,  page


關於Playwright的重要注意事項是它們的所有API都是非同步的，因此需要async / await來呼叫它們。因此，我利用這種模式來啟動瀏覽器並初始化頁面物件。

const { chromium } = require('playwright')
let browser, page

(async () => {
    browser = await chromium.launch()
    page = await browser.newPage()
})()


現在有了頁面物件，我可以使用page.goto（）轉到我的應用程式:

(async () => {
    browser = await chromium.launch()
    page = await browser.newPage()
    await page.goto('https://automationbookstore.dev/')
})()


 

增加斷言庫
與其他許多自動測試工具一樣，關於Playwright的重要注意事項是，它旨在自動執行瀏覽器互動，但是您必須使用斷言工具  進行驗證。 在本示例中，我將使用Mocha。

const { chromium } = require('playwright')
const assert = require('assert')


我還將新增一個套件（使用'describe'），並將其中的Playwright呼叫移至before/after函式內。

const { chromium } = require('playwright')
const assert = require('assert')

describe('Automation Bookstore', function () {
    let browser,  page

    before(async () => {
        browser = await chromium.launch()
    })
    after(async () => {
        await browser.close()
    })

    beforeEach(async () => {
        page = await browser.newPage()
        await page.goto('https://automationbookstore.dev/')
    })
    afterEach(async () => {
        await page.close()
    })
})


  

訪問元素
在嘗試新工具時，我想從一個非常簡單的示例開始。基本上，Web測試自動化的“ Hello World”正在驗證頁面上的標題。因此，讓我們從那裡開始進行第一個測試！
Playwright提供了許多訪問元素的方法，  包括典型的CSS和Xpath選擇器。
檢查此應用程式的DOM時，顯示標題的元素的ID為'page-title'，而我要驗證的文字是此元素的內部文字。

<h1 id="page-title" class="ui-title" role="heading" aria-level="1">Automation Bookstore</h1>

使用page.innerText獲取CSS選擇器ID為"page-title"的值，斷言它的結果。

it('should have title', async () => {
    assert.equal(await page.innerText('page-title'), 'Automation Bookstore')
})

就這樣，我進行了第一次測試！

const { chromium } = require('playwright')
const assert = require('assert')

describe('Automation Bookstore', function () {
    let browser,  page

    before(async () => {
        browser = await chromium.launch()
    })
    after(async () => {
        await browser.close()
    })

    beforeEach(async () => {
        page = await browser.newPage()
        await page.goto('https://automationbookstore.dev/')
    })
    afterEach(async () => {
        await page.close()
    })

    it('should have title', async () => {
        assert.equal(await page.innerText('page-title'), 'Automation Bookstore')
    })
})


如果希望輸入搜尋文字：

it('should return one book when exact title is given', async () => {
    await page.fill('searchBar', 'Agile Testing')
})

  

視覺測試
Playwright提供了影像和影片捕獲，但它更像是一種可視記錄機制，不能在斷言本身中使用。因此，我將使用適當的視覺化測試斷言庫Applitools。

安裝Applitools後，我指定第3行所需的Applitools類。

const { chromium } = require('playwright')
const assert = require('assert')
const { Eyes, ClassicRunner, Target, RectangleSize} = require('@applitools/eyes-playwright')


我宣告並初始化了“eyes”物件（第3行），該物件是進行視覺測試的API。

describe('Automation Bookstore', function () {
  let browser,  page
  const eyes = new Eyes(new ClassicRunner())
  
  //...
})


然後使用視覺測試做一個測試。

it('should be visually perfect', async () => {
    await page.fill('searchBar', 'test')
    await page.waitForSelector('li.ui-screen-hidden', { state: 'attached' })

    //Visual Testing
    await eyes.open(page, 'Automation Bookstore - Playwright', 'Partial Search', new RectangleSize(800, 600))
    await eyes.check(Target.window().fully())
    await eyes.close()
})

 

跨平臺測試
雖然Playwright提供了對Chromium，W​​ebkit和Firefox的支援，但沒有對Safari或IE的內建支援。

將Playwright與Applitools的Ultrafast Grid整合後，我現在可以對我的測試進行進一步的介紹了！

與上面使用Applitools Classic Runner相對，我將對其進行修改以使用Visual Grid Runner。在第5行上，請注意，我使用數字10。這表示我希望並行執行的測試數量，從而使執行速度更快！

const {VisualGridRunner, Eyes, Target, Configuration, RectangleSize, BatchInfo, BrowserType, DeviceName, ScreenOrientation} = require('@applitools/eyes-playwright')

describe('Automation Bookstore', function () {
    let browser,  page
    const eyes = new Eyes(new VisualGridRunner(10))

    //...
})


現在好了！我可以指定要使用的所有瀏覽器，裝置和視口-為我的測試提供最終的跨平臺覆蓋。不僅要在功能上進行驗證，而且還要在視覺上進行驗證。

beforeEach(async () => {
    page = await browser.newPage()
    await page.goto('https://automationbookstore.dev/')

    const configuration = new Configuration()
    configuration.setBatch(new BatchInfo('Cross Platform Tests'))
    configuration.addBrowser(800, 600, BrowserType.CHROME);
    configuration.addBrowser(700, 500, BrowserType.FIREFOX);
    configuration.addBrowser(1024, 768, BrowserType.EDGE_CHROMIUM);
    configuration.addBrowser(800, 600, BrowserType.SAFARI);
    configuration.addBrowser(1600, 1200, BrowserType.IE_11);
    configuration.addDeviceEmulation(DeviceName.iPhone_X, ScreenOrientation.PORTRAIT);
    eyes.setConfiguration(configuration);
})


測試本身不需要更改，它們將自動在所有指定的配置中執行。

相關文章