使用Playwright基于多浏览器进行javascript自动化测试的简单教程- Applitools


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);
})

测试本身不需要更改，它们将自动在所有指定的配置中运行。