Puppeteer Angular Schematic

将基于 Puppeteer 的 e2e 测试添加到你的 Angular 项目。

入门

在 Angular CLI 应用目录中运行以下命令，并按照提示操作。

请注意，这会将 schematic 作为依赖项添加到你的项目。

ng add @puppeteer/ng-schematics

或者，你可以使用相同的命令，后跟以下 选项。

目前，此 schematic 支持以下测试运行器

• Jasmine
• Jest
• Mocha
• Node 测试运行器

安装 schematic 后，你可以运行 E2E 测试

ng e2e

选项

将 schematic 添加到你的项目时，你可以提供以下选项

选项	说明	值	必需
--test-runner	要与 Puppeteer 一起安装的测试框架。	"jasmine"、"jest"、"mocha"、"node"	true

创建单个测试文件

Puppeteer Angular Schematic 公开了一种创建单个测试文件的方法。

ng generate @puppeteer/ng-schematics:e2e "<TestName>"

同时运行测试服务器和开发服务器

默认情况下，E2E 测试将在与 ng start 相同的端口上运行应用。为避免这种情况，可以在 angular.json 中指定端口，将 e2e 或 puppeteer（取决于初始设置）更新为

{
  "e2e": {
    "builder": "@puppeteer/ng-schematics:puppeteer",
    "options": {
      "commands": [...],
      "devServerTarget": "sandbox:serve",
      "testRunner": "<TestRunner>",
      "port": 8080
    },
    ...
}

现在将 E2E 测试文件 utils.ts 的 baseUrl 更新为

const baseUrl = 'https://127.0.0.1:8080';

贡献

查看我们的 贡献指南，以概览在 Puppeteer 存储库中开发所需内容。

沙盒冒烟测试

为简化集成，可以使用单个命令运行冒烟测试，该命令将创建 Angular 的全新安装（单个应用程序和一个多应用程序项目）。然后，它将在其中安装架构并运行初始 e2e 测试

node tools/smoke.mjs

单元测试

架构利用 @angular-devkit/schematics/testing 验证正确的文件创建和 package.json 更新。为执行测试套件

npm run test

从 Protractor 迁移

入口点

Puppeteer 有它自己的 browser，它公开浏览器进程。Puppeteer 的 page 将更接近 Protractor 的 browser。

// Testing framework specific imports

import {setupBrowserHooks, getBrowserState} from './utils';

describe('<Test Name>', function () {
  setupBrowserHooks();
  it('is running', async function () {
    const {page} = getBrowserState();
    // Query elements
    await page
      .locator('my-component')
      // Click on the element once found
      .click();
  });
});

获取元素属性

您可以轻松获取元素的任何属性。

// Testing framework specific imports

import {setupBrowserHooks, getBrowserState} from './utils';

describe('<Test Name>', function () {
  setupBrowserHooks();
  it('is running', async function () {
    const {page} = getBrowserState();
    // Query elements
    const elementText = await page
      .locator('.my-component')
      .map(button => button.innerText)
      // Wait for element to show up
      .wait();

    // Assert via assertion library
  });
});

查询选择器

Puppeteer 支持多种类型的选择器，即 CSS、ARIA、文本、XPath 和 pierce 选择器。下表显示了 Puppeteer 与 Protractor By 的等效关系。

为了提高可靠性并减少不稳定性，请尝试使用我们的实验性 定位器 API

By	Protractor 代码	Puppeteer querySelector
CSS（单一）	$(by.css('<CSS>'))	page.$('<CSS>')
CSS（多重）	$$(by.css('<CSS>'))	page.$$('<CSS>')
ID	$(by.id('<ID>'))	page.$('#<ID>')
CssContainingText	$(by.cssContainingText('<CSS>', '<TEXT>'))	page.$('<CSS> ::-p-text(<TEXT>)') `
DeepCss	$(by.deepCss('<CSS>'))	page.$(':scope >>> <CSS>')
XPath	$(by.xpath('<XPATH>'))	page.$('::-p-xpath(<XPATH>)')
JS	$(by.js('document.querySelector("<CSS>")'))	page.evaluateHandle(() => document.querySelector('<CSS>'))

对于高级用例，例如 Protractor 的 by.addLocator，你可以查看 Puppeteer 的 自定义选择器。

操作选择器

Puppeteer 允许你执行所有必要的操作来测试你的应用程序。

// Click on the element.
element(locator).click();
// Puppeteer equivalent
await page.locator(locator).click();

// Send keys to the element (usually an input).
element(locator).sendKeys('my text');
// Puppeteer equivalent
await page.locator(locator).fill('my text');

// Clear the text in an element (usually an input).
element(locator).clear();
// Puppeteer equivalent
await page.locator(locator).fill('');

// Get the value of an attribute, for example, get the value of an input.
element(locator).getAttribute('value');
// Puppeteer equivalent
const element = await page.locator(locator).waitHandle();
const value = await element.getProperty('value');

示例

Protractor 测试示例

describe('Protractor Demo', function () {
  it('should add one and two', function () {
    browser.get('http://juliemr.github.io/protractor-demo/');
    element(by.model('first')).sendKeys(1);
    element(by.model('second')).sendKeys(2);

    element(by.id('gobutton')).click();

    expect(element(by.binding('latest')).getText()).toEqual('3');
  });
});

Puppeteer 迁移示例

import {setupBrowserHooks, getBrowserState} from './utils';

describe('Puppeteer Demo', function () {
  setupBrowserHooks();
  it('should add one and two', function () {
    const {page} = getBrowserState();
    await page.goto('http://juliemr.github.io/protractor-demo/');

    await page.locator('.form-inline > input:nth-child(1)').fill('1');
    await page.locator('.form-inline > input:nth-child(2)').fill('2');
    await page.locator('#gobutton').fill('2');

    const result = await page
      .locator('.table tbody td:last-of-type')
      .map(header => header.innerText)
      .wait();

    expect(result).toEqual('3');
  });
});