Playwright中文网

Playwright中文网 - Web自动测试专家

Playwright是一个Web/H5自动测试工具。本站提供Playwright视频教程、云测试机(留言以获取)、中文咨询、部署、培训Playwright服务、敏捷研发培训。

13811831379

Playwright快速开始

安装playwright：（需已安装最新版nodejs）

在一个文件夹下执行命令行（推荐用VSCode）

npm init playwright

安装测试用浏览器

npx playwright install

安装完毕，执行测试用例

npx playwright test --headed

通过录制人工操作生成代码
```
npx playwright codegen myie9.com
```

产品展示

全部
playwright产品系列

产品展示

Playwright Test

<p>Playwright 可以用作 Playwright Test 测试运行器（本指南）的一部分，也可以用作<a href="https://playwright.dev/docs/library">Playwright 库</a>。</p><p>Playwright Test 是专门为满足端到端测试的需求而创建的。它可以满足您对常规测试运行器的期望，等等。编剧测试允许：</p><ul><li>在所有浏览器上运行测试。</li><li>并行执行测试。</li><li>开箱即用地享受上下文隔离。</li><li>在失败时捕获视频、屏幕截图和其他工件。</li><li>将您的 POM 集成为可扩展的装置。</li></ul>

Playwright Test

教程

全部
文章

教程

nodejs安装playwright

<h3>前提</h3><p style="margin-left: 20px;"><strong>已安装最新版</strong><a href="http://nodejs.cn/download/" rel="nofollow noopener noreferrer" target="_blank"><strong><u>nodejs</u></strong></a>。</p><h3>安装playwright：</h3><p>在一个文件夹下执行</p><pre tabindex="0"><code>npm init playwright
</code></pre><p>这将创建一个配置文件，可选择添加示例、GitHub Action 工作流程和第一个测试<code>example.spec.ts</code>。您现在可以直接跳到<a href="https://playwright.dev/docs/intro#writing-assertions">编写断言</a>部分。</p><p><br></p><p>添加依赖</p><pre tabindex="0"><code>npm i -D @playwright/test
</code></pre><p><br></p><p>安装测试用浏览器</p><pre tabindex="0"><code>npx playwright install
</code></pre><p><br></p><p>安装完毕，执行测试样例</p><pre tabindex="0"><code>npx playwright test --headed
</code></pre><article><h2>第一次<a href="https://playwright.dev/docs/intro#first-test" title="直接链接到标题">测试</a></h2><p>创建<code>tests/example.spec.js</code>（或<code>tests/example.spec.ts</code>用于 TypeScript）来定义您的测试。</p><ul><li tabindex="-1">打字稿</li><li tabindex="0">JavaScript</li></ul><pre tabindex="0"><code>const { test, expect } = require('@playwright/test');

test('basic test', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  const title = page.locator('.navbar__inner .navbar__title');
  await expect(title).toHaveText('Playwright');
});
</code></pre><button type="button">复制</button><p>现在运行您的测试，假设测试文件在<code>tests</code>目录中。</p><pre tabindex="0"><code>npx playwright test
</code></pre><button type="button">复制</button><p>Playwright Test 刚刚使用 Chromium 浏览器以无头方式进行了测试。让我们告诉它使用带头浏览器：</p><pre tabindex="0"><code>npx playwright test --headed
</code></pre><button type="button">复制</button><h2>配置<a href="https://playwright.dev/docs/intro#configuration-file" title="直接链接到标题">文件</a></h2><p>要享受 Playwright Test 提供的所有功能，您需要创建一个配置文件<code>playwright.config.ts</code>（或<code>playwright.config.js</code>）。它允许您在您想要的多个浏览器中运行测试。</p><p>这是一个示例配置，它通过为每个浏览器配置创建一个“项目”来运行 Chromium、Firefox 和 WebKit 中的每个测试。它还指定<a href="https://playwright.dev/docs/test-retries">了两个重试</a>和<a href="https://playwright.dev/docs/trace-viewer">跟踪</a>选项。</p><ul><li tabindex="-1">打字稿</li><li tabindex="0">JavaScript</li></ul><pre tabindex="0"><code>// playwright.config.js
// @ts-check
const { devices } = require('@playwright/test');

/** @type {import('@playwright/test').PlaywrightTestConfig} */
const config = {
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  use: {
    trace: 'on-first-retry',
  },
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
  ],
};

module.exports = config;
</code></pre><button type="button">复制</button><p><a href="https://playwright.dev/docs/test-configuration">在配置部分</a>寻找更多选项。</p><p>现在您可以默认在多个浏览器中运行测试。</p><pre tabindex="0"><code>npx playwright test

Running 5 tests using 5 workers

✓ [chromium] › example.spec.ts:3:1 › basic test (2s)
  ✓ [firefox] › example.spec.ts:3:1 › basic test (2s)
  ✓ [webkit] › example.spec.ts:3:1 › basic test (2s)
</code></pre><button type="button">复制</button><p>使用<code>--project</code>命令行选项运行单个项目。</p><pre tabindex="0"><code>npx playwright test --project=firefox

Running 1 test using 1 worker

✓ [firefox] › example.spec.ts:3:1 › basic test (2s)
</code></pre><button type="button">复制</button><h2>写<a href="https://playwright.dev/docs/intro#writing-assertions" title="直接链接到标题">断言</a></h2><p>Playwright Test 使用<a href="https://jestjs.io/docs/expect" rel="noopener noreferrer" target="_blank">expect</a>库进行测试断言。它使用特定于 Playwright 的匹配器对其进行了扩展，以实现更好的测试人体工程学。</p><p>在此处了解有关<a href="https://playwright.dev/docs/test-assertions">测试断言的</a>更多信息。</p><p>下面是一个使用它们的简单示例：</p><ul><li tabindex="-1">打字稿</li><li tabindex="0">JavaScript</li></ul><pre tabindex="0"><code>// example.spec.js
const { test, expect } = require('@playwright/test');

test('my test', async ({ page }) => {
  await page.goto('https://playwright.dev/');

// Expect a title "to contain" a substring.
  await expect(page).toHaveTitle(/Playwright/);

// Expect an attribute "to be strictly equal" to the value.
  await expect(page.locator('text=Get Started').first()).toHaveAttribute('href', '/docs/intro');

// Expect an element "to be visible".
  await expect(page.locator('text=Learn more').first()).toBeVisible();

await page.click('text=Get Started');
  // Expect some text to be visible on the page.
  await expect(page.locator('text=Introduction').first()).toBeVisible();
});
</code></pre><button type="button">复制</button><h2>使用测试<a href="https://playwright.dev/docs/intro#using-test-fixtures" title="直接链接到标题">夹具</a></h2><p>您注意到<code>{ page }</code>上面的测试可以访问的参数：</p><ul><li tabindex="-1">打字稿</li><li tabindex="0">JavaScript</li></ul><pre tabindex="0"><code>test('basic test', async ({ page }) => {
  ...
</code></pre><button type="button">复制</button><p>我们称这些论点<code>fixtures</code>。夹具是为每次测试运行创建的对象。Playwright Test 带有这些装置，您也可以添加自己的装置。运行测试时，Playwright Test 会查看每个测试声明，分析测试所需的固定装置集，并专门为测试准备这些固定装置。</p><p>以下是您可能大部分时间使用的预定义固定装置的列表：</p><table><thead><tr><th align="left">夹具</th><th align="left">类型</th><th align="left">描述</th></tr></thead><tbody><tr><td align="left">页</td><td align="left"><a href="https://playwright.dev/docs/api/class-page" title="页">页</a></td><td align="left">此测试运行的独立页面。</td></tr><tr><td align="left">语境</td><td align="left"><a href="https://playwright.dev/docs/api/class-browsercontext" title="浏览器上下文">浏览器上下文</a></td><td align="left">此测试运行的隔离上下文。<code>page</code>夹具也属于这种情况。了解如何<a href="https://playwright.dev/docs/test-configuration">配置上下文</a>。</td></tr><tr><td align="left">浏览器</td><td align="left"><a href="https://playwright.dev/docs/api/class-browser" title="浏览器">浏览器</a></td><td align="left">浏览器在测试之间共享以优化资源。了解如何<a href="https://playwright.dev/docs/test-configuration">配置浏览器</a>。</td></tr><tr><td align="left">浏览器名称</td><td align="left"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type" rel="noopener noreferrer" target="_blank" title="细绳">细绳</a></td><td align="left">当前运行测试的浏览器的名称。要么<code>chromium</code>，<code>firefox</code>要么<code>webkit</code>。</td></tr></tbody></table><h2>使用测试<a href="https://playwright.dev/docs/intro#using-test-hooks" title="直接链接到标题">钩子</a></h2><p>您可以使用<code>test.beforeAll</code>和<code>test.afterAll</code>挂钩来设置和拆除测试之间共享的资源。您可以使用<code>test.beforeEach</code>和<code>test.afterEach</code>hooks 为每个测试单独设置和拆除资源。</p><ul><li tabindex="-1">打字稿</li><li tabindex="0">JavaScript</li></ul><pre tabindex="0"><code>// example.spec.js
const { test, expect } = require('@playwright/test');

test.describe('feature foo', () => {
  test.beforeEach(async ({ page }) => {
    // Go to the starting url before each test.
    await page.goto('https://playwright.dev/');
  });

test('my test', async ({ page }) => {
    // Assertions use the expect API.
    await expect(page).toHaveURL('https://playwright.dev/');
  });
});
</code></pre><h2>命令<a href="https://playwright.dev/docs/intro#command-line" title="直接链接到标题">行</a></h2><p>以下是常用的命令行模式。了解有关<a href="https://playwright.dev/docs/test-cli">命令行</a>的更多信息。</p><ul><li><p>录制以生成代码</p><pre tabindex="0">npx playwright codegen myie9.com<code>
</code></pre></li></ul><p><br></p><ul><li><p>运行所有测试</p><pre tabindex="0"><code>npx playwright test
</code></pre></li><li><p>运行单个测试文件</p><pre tabindex="0"><code>npx playwright test tests/todo-page.spec.ts
</code></pre></li><li><p>运行一组测试文件</p><pre tabindex="0"><code>npx playwright test tests/todo-page/ tests/landing-page/
</code></pre></li><li><p>运行具有<code>my-spec</code>或<code>my-spec-2</code>在文件名中的文件</p><pre tabindex="0"><code>npx playwright test my-spec my-spec-2
</code></pre></li><li><p>使用标题运行测试</p><pre tabindex="0"><code>npx playwright test -g "add a todo item"
</code></pre></li><li><p>在有界面的浏览器中运行测试</p><pre tabindex="0"><code>npx playwright test --headed
</code></pre></li><li><p>在特定配置（项目）中运行测试</p><pre tabindex="0"><code>npx playwright test --project=firefox
</code></pre></li><li><p>禁用<a href="https://playwright.dev/docs/test-parallel">并行化</a></p><pre tabindex="0"><code>npx playwright test --workers=1
</code></pre></li><li><p>选择报表<a href="https://playwright.dev/docs/test-reporters"></a></p><pre tabindex="0"><code>npx playwright test --reporter=dot
</code></pre></li><li><p><a href="https://playwright.dev/docs/inspector">使用Playwright Inspector</a>在调试模式下运行<a href="https://playwright.dev/docs/inspector"></a></p><pre tabindex="0"><code>npx playwright test --debug
</code></pre></li><li><p>请求帮忙</p><pre tabindex="0"><code>npx playwright test --help
</code></pre></li></ul><h2>配置 NPM<a href="https://playwright.dev/docs/intro#configure-npm-scripts" title="直接链接到标题">脚本</a></h2><p>Playwright Test 将自动拾取<code>playwright.config.js</code>或<code>playwright.config.ts</code>。</p><pre tabindex="0"><code>{
  "scripts": {
    "test": "playwright test"
  }
}
</code></pre><p>如果您将配置文件放在不同的位置，请使用<code>--config</code>选项传递它。</p><pre tabindex="0"><code>{
  "scripts": {
    "test": "playwright test --config=tests/example.config.js"
  }
}
</code></pre><h5><br></h5><h5>说明</h5><p>要通过 npm 脚本传递选项，请使用双破折号：<code>npm run test -- --headed</code>.</p></article><nav><br></nav><p><a href="https://playwright.dev/docs/intro" rel="nofollow noopener noreferrer" target="_blank">更多</a></p>

[文章] nodejs安装playwright

/ 2022-01-28

教程

用Java安装使用Playwright

<p>向您的项目添加一个依赖项，<code>pom.xml</code>如下所述。如果您不熟悉 Maven，请参阅其<a href="https://maven.apache.org/guides/getting-started/maven-in-five-minutes.html" rel="noopener noreferrer" target="_blank">文档</a>。</p><h2><a href="https://playwright.dev/java/docs/intro#usage" title="直接链接到标题">用途</a><a href="https://playwright.dev/java/docs/intro#usage" title="直接链接到标题"></a></h2><ul><li tabindex="0">Example.java</li></ul><pre tabindex="0"><code>package org.example;

import com.microsoft.playwright.*;

public class Example {
  public static void main(String[] args) {
    try (Playwright playwright = Playwright.create()) {
      Browser browser = playwright.chromium().launch();
      Page page = browser.newPage();
      page.navigate("http://playwright.dev");
      System.out.println(page.title());
    }
  }
}
</code></pre><ul><li tabindex="-1">pom.xml</li><li><pre tabindex="0"><code><?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

<groupId>org.example</groupId>
  <artifactId>examples</artifactId>
  <version>0.1-SNAPSHOT</version>
  <name>Playwright Client Examples</name>
  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
  </properties>
  <dependencies>
    <dependency>
      <groupId>com.microsoft.playwright</groupId>
      <artifactId>playwright</artifactId>
      <version>1.17.1</version>
    </dependency>
  </dependencies>
  <build>
    <plugins>
      <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-compiler-plugin</artifactId>
        <version>3.1</version>
        <configuration>
          <source>1.8</source>
          <target>1.8</target>
        </configuration>
      </plugin>
    </plugins>
  </build>
</project>
</code></pre></li></ul><p>使用上面的 Example.java 和 pom.xml，编译并执行您的新程序，如下所示：</p><pre tabindex="0"><code>mvn compile exec:java -Dexec.mainClass="org.example.Example"
</code></pre><p><br></p><p>运行它会下载 Playwright 包并安装适用于 Chromium、Firefox 和 WebKit 的浏览器二进制文件。</p><p><br></p><p>默认情况下，Playwright 以无头模式运行浏览器。要查看浏览器 UI，请在启动浏览器时传递<code>headless=false</code>标志。您还可以使用<code>slowMo</code>来减慢执行速度。在调试工具<a href="https://playwright.dev/java/docs/debug">部分</a>了解更多信息。</p><pre tabindex="0"><code>playwright.firefox().launch(new BrowserType.LaunchOptions().setHeadless(false).setSlowMo(50));
</code></pre><p><br></p><h2>录制<a href="https://playwright.dev/java/docs/intro#record-scripts" title="直接链接到标题">脚本</a></h2><p><a href="https://playwright.dev/java/docs/cli">命令行工具</a>可用于记录用户交互并生成 Java 代码。</p><pre tabindex="0"><code>mvn exec:java -e -Dexec.mainClass=com.microsoft.playwright.CLI -Dexec.args="codegen wikipedia.org"
</code></pre><p><br></p><h2>系统<a href="https://playwright.dev/java/docs/intro#system-requirements" title="直接链接到标题">要求</a></h2><p>Playwright 需要<strong>Java 8</strong>或更高版本。Chromium、Firefox 和 WebKit 的浏览器二进制文件可在 3 个平台（Windows、macOS、Linux）上运行：</p><h3><a href="https://playwright.dev/java/docs/intro#macos" title="直接链接到标题">macOS</a><a href="https://playwright.dev/java/docs/intro#macos" title="直接链接到标题"></a></h3><p>需要 10.14 (Mojave) 或更高版本。</p><h3><a href="https://playwright.dev/java/docs/intro#linux" title="直接链接到标题">Linux</a><a href="https://playwright.dev/java/docs/intro#linux" title="直接链接到标题"></a></h3><p>官方仅支持 Ubuntu 18.04 和 Ubuntu 20.04。</p><p><br></p><p><a href="https://playwright.dev/java/docs/intro" rel="nofollow noopener noreferrer" target="_blank">更多</a></p>

[文章] 用Java安装使用Playwright

/ 2022-01-28

教程

用.net安装使用Playwright

<p>创建一个控制台项目并添加 Playwright 依赖项。</p><pre tabindex="0"><code># Create project
dotnet new console -n PlaywrightDemo
cd PlaywrightDemo

# Add project dependency
dotnet add package Microsoft.Playwright
# Build the project
dotnet build
# Install required browsers
pwsh bin\Debug\netX\playwright.ps1 install
</code></pre><p><br></p><p>创建一个<code>Program.cs</code>将导航到<code>https://playwright.dev/dotnet</code>Chromium 并截取屏幕截图的文件。</p><pre tabindex="0"><code>using Microsoft.Playwright;
using System.Threading.Tasks;

class Program
{
    public static async Task Main()
    {
        using var playwright = await Playwright.CreateAsync();
        await using var browser = await playwright.Chromium.LaunchAsync();
        var page = await browser.NewPageAsync();
        await page.GotoAsync("https://playwright.dev/dotnet");
        await page.ScreenshotAsync(new PageScreenshotOptions { Path = "screenshot.png" });
    }
}
</code></pre><p><br></p><p>现在运行它。</p><pre tabindex="0"><code>dotnet run
</code></pre><p><br></p><p>默认情况下，Playwright 以无头模式运行浏览器。要查看浏览器 UI，请在启动浏览器时传递<code>Headless = false</code>标志。您还可以使用<code>slowMo</code>来减慢执行速度。在调试工具<a href="https://playwright.dev/dotnet/docs/debug">部分</a>了解更多信息。</p><pre tabindex="0"><code>await playwright.Firefox.LaunchAsync(new BrowserTypeLaunchOptions 
{ 
    Headless = false, 
    SlowMo = 50, 
});
</code></pre><p><br></p><h2>第一次<a href="https://playwright.dev/dotnet/docs/intro#first-test" title="直接链接到标题">测试</a></h2><p>您可以选择使用与 Playwright 捆绑在一起的 NUnit 测试装置。这些装置支持在多个浏览器引擎上并行运行测试，开箱即用。使用 NUnit了解有关<a href="https://playwright.dev/dotnet/docs/test-runners">Playwright 的</a>更多信息。</p><pre tabindex="0"><code># Create new project.
dotnet new nunit -n PlaywrightTests
cd PlaywrightTests
</code></pre><p><br></p><p>安装依赖项，构建项目并下载必要的浏览器。每个项目只执行一次。</p><pre tabindex="0"><code># Add project dependency
dotnet add package Microsoft.Playwright.NUnit
# Build the project
dotnet build
# Install required browsers
pwsh bin\Debug\netX\playwright.ps1 install
</code></pre><p><br></p><p>编辑 UnitTest1.cs 文件。</p><pre tabindex="0"><code>using System.Threading.Tasks;
using Microsoft.Playwright.NUnit;
using NUnit.Framework;

namespace PlaywrightTests
{
    [Parallelizable(ParallelScope.Self)]
    public class Tests : PageTest
    {
        [Test]
        public async Task ShouldAdd()
        {
            int result = await Page.EvaluateAsync<int>("() => 7 + 3");
            Assert.AreEqual(10, result);
        }

[Test]
        public async Task ShouldMultiply()
        {
            int result = await Page.EvaluateAsync<int>("() => 7 * 3");
            Assert.AreEqual(21, result);
        }
    }
}
</code></pre><p><br></p><pre tabindex="0"><code>dotnet test -- NUnit.NumberOfTestWorkers=5
</code></pre><p><br></p><h2>录制<a href="https://playwright.dev/dotnet/docs/intro#record-scripts" title="直接链接到标题">脚本</a></h2><p><a href="https://playwright.dev/dotnet/docs/cli">命令行工具</a>可用于记录用户交互并生成 C# 代码。</p><pre tabindex="0"><code>pwsh bin\Debug\netX\playwright.ps1 codegen
</code></pre><p><br></p><p><a href="https://playwright.dev/dotnet/docs/intro" rel="nofollow noopener noreferrer" target="_blank">更多</a></p>

[文章] 用.net安装使用Playwright

/ 2022-01-28

联系我们 (提供咨询、部署、培训Playwright服务、敏捷研发)

北京蚂蚁玖玖浏览器技术开发中心

郭峰

CTO

手机：13811831379

邮箱：kefu@myie9.com

微信：guofeng9

地址：北京市昌平区回龙观东大街腾讯众创空间A210

微信扫一扫立即沟通

查看大图

在线留言 (可体验Playwright云测试机)

姓名

邮箱

留言

招聘信息

友情链接

Playwright英文

Playwright API

Playwright源码gitee

Playwright源码github

web自动测试

playwright