微软开源的这个自动化测试神器，我知道的太晚了

IT服务圈儿 2022-09-10

来源丨开源前线（ID：OpenSourceTop）整编

项目地址：https://github.com/microsoft/playwright

2020 年初，微软发布了一个自动化测试工具——Playwright，不少人称它是小白神器。可惜猿妹最近才知道原来它这么强大。

Playwright是针对Python语言的纯自动化工具，它可以通过单个API自动执行Chromium，Firefox 和 WebKit 浏览器，连代码都不用写，就能实现自动化功能。
Playwright具有以下功能特性：

任何浏览器 • 任何平台 • 一个 API

跨浏览器。Playwright 支持所有现代渲染引擎，包括 Chromium、WebKit 和 Firefox。
跨平台。支持在 Windows、Linux 和 macOS 上进行本地测试或在 CI 上进行测试
跨语言。支持在TypeScript、JavaScript、Python、.NET、Java 中使用 Playwright API

Playwright安装
要使用Playwright，需要Python 3.7版本及以上，可以直接使用pip3，命令如下：

pip3 install playwright

然后你还需要进行一些初始化操作：

playwright install

接着，Playwrigth会安装Chromium, Firefox and WebKit浏览器并配置一些驱动，然后你就可以启动浏览器进行自动化操作了。

代码示例
页面截图：此代码片段在 Chromium、Firefox 和 WebKit 中导航到 whatsmyuseragent.org，并保存了 3 个屏幕截图。

const playwright = require('playwright');

(async () => {
  for (const browserType of [playwright.chromium, playwright.firefox, playwright.webkit]) {
    const browser = await browserType.launch();
    const context = await browser.newContext();
    const page = await context.newPage();
    await page.goto('http://whatsmyuseragent.org/');
    await page.screenshot({ path: `example-${browserType.name()}.png` });
    await browser.close();
  }
})();

地理位置定位：此代码段在给定地理位置的设备上模拟 Mobile Safari，导航到 maps.google.com，执行操作并截取屏幕截图。

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://maps.google.com');
  await page.click('text="Your location"');
  await page.waitForRequest(/.*preview\/pwa/);
  await page.screenshot({ path: 'colosseum-iphone.png' });
  await browser.close();
})();

在浏览器页面执行脚本：此代码片段在 Firefox 中导航到 example.com，并在页面上下文中执行脚本。

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

(async () => {
  const browser = await firefox.launch();
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.goto('https://www.example.com/');
  const dimensions = await page.evaluate(() => {
    return {
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight,
      deviceScaleFactor: window.devicePixelRatio
    }
  });
  console.log(dimensions);

  await browser.close();
})();

拦截网络请求：这段代码片段为WebKit页面设置请求路由，以记录所有的网络请求。

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

(async () => {
  const browser = await webkit.launch();
  const context = await browser.newContext();
  const page = await context.newPage();

  // Log and continue all network requests
  await page.route('**', route => {
    console.log(route.request().url());
    route.continue();
  });

  await page.goto('http://todomvc.com');
  await browser.close();
})();