Playwright可以在所有浏览器中实现快速、可靠和强大的自动化测试。

这是我介绍Playwright自动化测试工具的第三篇幅，为什么选择Playwright？根据官方文档介绍，这里将介绍Playwright的特点，以便于帮助你快速的了解Playwright。

特点

注:

单讲特点比较干巴巴，所以，大部分特点我都配了例子。
官方文档默认例子为 JavaScript，这里也使用JavaScript。JavaScript其他还挺简单的。
评论区不用问Playwright的使用细节哈~！去官方文档找答案。

支持所有浏览器

const { chromium, webkit, firefox } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  // const browser = await webkit.launch();
  // const browser = await firefox.launch();

  const page = await browser.newPage();
  await page.goto('http://www.baidu.com/');
  await page.screenshot({ path: `example.png` });
  await browser.close();
})();

扩展：
WebKit是Apple开源的浏览器引擎，Apple Safari就是基于WebKit开发。Chromium是开源浏览器项目，早期使用的也是WebKit内核，后来在WebKit的基础上fork了一个分支叫Blink，然后自己维护。

const { webkit, devices } = require('playwright');
const iPhone11 = devices['iPhone 11 Pro'];

(async () => {
  const browser = await webkit.launch();
  const context = await browser.newContext({
    ...iPhone11,
    locale: 'en-US',
    geolocation: { longitude: 12.492507, latitude: 41.889938 },
    permissions: ['geolocation']
  });
  const page = await context.newPage();
  await page.goto('https://m.baidu.com');
  await page.screenshot({ path: 'colosseum-iphone.png' });
  await browser.close();
})();

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

(async () => {
  const browser = await chromium.launch({headless: false});
  // ...
})();

headless 默认开启，设置为false，即为 headful模式，可以看到自动化的过程。

快速可靠的执行

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

(async () => {
  const browser = await chromium.launch({headless: false, slowMo: 50 });
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.goto('http://www.testpub.cn/login');
  await page.fill("#inputUsername", 'admin');
  await page.fill("#inputPassword", 'admin123456');
  await page.click('"Sign in"');
  await page.close();

  const page2 = await context.newPage();
  await page2.goto("http://www.testpub.cn/guest_manage/")
  await browser.close();
})();

我来解释一下，比如第一条用例执行了登录，第二条用例直接通过上下文创建一个新的页面去执行登录之后的功能，即保证了用例的相对独立性，又减少了用例的重复操作。

<button type="submit">Sign in</button>

例如上面的元素一看就不太好定位，用户到的是一个按钮，名字叫Sign in，那么可以用这个定位方式。

await page.click('"Sign in"');

强大的自动化能力

// Create two pages
const pageOne = await context.newPage();
const pageTwo = await context.newPage();

// Get pages of a brower context
const allPages = context.pages();

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

(async () => {
  const browser = await chromium.launch({headless: false, slowMo: 50 });
  const context = await browser.newContext({ acceptDownloads: true });
  const page = await context.newPage();
  await page.goto('https://pypi.org/project/selenium/#files');
  const [ download ] = await Promise.all([
    page.waitForEvent('download'), 
    page.click('#files > table > tbody > tr:nth-child(2) > th > a')
  ]);
  const path = await download.path();
  console.log("path", path);
  await browser.close();
})();

在 HTTP 认证，文件下载、网络请求响应方面都有很强的控制能力。

// Create context with dark mode
const context = await browser.newContext({
  colorScheme: 'dark' // or 'light'
});

与你的工作流程集成

链接: https://fly63.com/nav/3246