《PlayWright全解析——从入门到精通》-2

877 2023-07-17

test 执行案例测试 page

example源码解读

我们来看看刚才执行的那个example.spec.ts测试案例源码文件：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

import { test, expect } from '@playwright/test';  test('has title', async ({ page }) => {  await page.goto('https://playwright.dev/');   // Expect a title "to contain" a substring.  await expect(page).toHaveTitle(/Playwright/); });  test('get started link', async ({ page }) => {  await page.goto('https://playwright.dev/');   // Click the get started link.  await page.getByRole('link', { name: 'Get started' }).click();   // Expects the URL to contain intro.  await expect(page).toHaveURL(/.*intro/); });

这里我们看到了两个test方法，test有两个参数，第一个参数是测试案例的名称，我们看到了”has title”和”get started link”，这就是我们之前在报告中看到的两个测试案例的名称。第二个参数是一个函数，这里用一个lambda表达式来表示：

1 2 3

async (参数) => {  函数身体部分 }

async关键字表示这个函数是一个异步函数。函数的参数，在代码中写的是{ page }，这表示一个对象，这个对象中有一个元素是page，类型是@playwright/test包中的Page。这个函数的原型，是这样的：

function testFunction(args: PlaywrightTestArgs & PlaywrightTestOptions & PlaywrightWorkerArgs & PlaywrightWorkerOptions, testInfo: TestInfo) void | Promise<...>

看起来很复杂吗？其实看清楚就明白了，这个函数有两个参数，一个叫args类型是PlaywrightTestArgs & PlaywrightTestOptions & PlaywrightWorkerArgs & PlaywrightWorkerOptions，第二个参数叫testInfo，类型是TestInfo，返回类型是void或Promise。

而page是PlaywrightTestArgs类中的一个成员。

在函数体中，page.goto方法很明显是页面跳转到一个指定的网页地址，前面的await必须要加，因为page.goto方法是一个异步方法，如果不加await那么在页面还没发生跳转就会执行后面的语句了。

expect(page).toHaveTitle(/Playwright/)很明显是一句断言语句，可以解读为“期望xx对象有什么”，那么这里明显是期望当前的页面有”Playwright”这个title，注意这里/Playwright/这种正斜杠的写法，是JavaScript中正则表达式的语法，只要匹配有Playwright字符串就判定为true了。前面的await是和前一句同样的意思，等待异步完成。

第二个测试案例，和第一个基本类似，仅仅多了一句

1	await page.getByRole('link', { name: 'Get started' }).click();

这一句是操作页面的一个元素进行点击操作。page.getByRole方法是一个页面元素的定位方法，返回一个页面元素，然后执行点击。

再整体看一遍example.spec.ts文件，是不是感觉很简单而且可读性很高呢？这就是PlayWright的魅力了。

命令行说明

在node项目中，我们一般使用npx来执行可执行包。在我们这个项目中，有一个node_modules目录，里面存放了项目所有下载的依赖包。其中有一个.bin目录，里面就是一些可执行的二进制包。这里是playwright可执行文件。而npx其实就是去执行这个文件。

我们在前面用过一个命令来执行测试：

1	npx playwright test

其实也可以直接去执行.bin目录下的playwright可执行文件：

1	./node_modules/.bin/playwright test

现在看看有哪些常用的执行测试的方法：

执行所有测试
1
npx playwright test

执行指定的测试案例文件

1	npx playwright test landing-page.spec.ts

执行一组测试案例（tests/todo-page/和tests/landing-page/两个目录下的所有案例）
1
npx playwright test tests/todo-page/ tests/landing-page/
执行测试案例文件名包含landing或者login的案例文件
1
npx playwright test landing login
执行测试案例的名称为”add a todo item”的
1
npx playwright test -g "add a todo item"
-g参数其实是一个过滤参数
在“有头”模式下执行测试（就是会看到浏览器被打开，而默认的无头模式则不会看到有浏览器打开）
1
npx playwright test landing-page.spec.ts --headed