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

20-09-22 banq

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

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

                   

猜你喜欢