如何通过 Puppeteer 使用 Angular e2e 测试
1)安装傀儡师 https://github.com/GoogleChrome/puppeteer
npm install --save-dev puppeteer @types/puppeteer
2)配置Protractor以使用Puppeteer
编辑你的protractor.conf.js
并在里面添加以下内容capabilities
:
// ...
const puppeteer = require('puppeteer');
exports.config = {
// ...
capabilities: {
browserName: 'chrome',
chromeOptions: {
args: ['--headless'],
binary: puppeteer.executablePath(),
},
},
// ...
};
3)编写并执行测试
例如,编辑您的e2e/src/app.e2e-spec.ts
并执行以下操作:
import * as puppeteer from 'puppeteer';
describe('workspace-project App', () => {
it('Test Puppeteer screenshot', async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('http://localhost:4200');
await page.screenshot({ path: 'example.png' });
await browser.close();
});
});
使用以下命令运行您的 e2e 测试ng e2e
。上面的示例将生成您的应用程序主页的屏幕截图并将其另存为example.png
.
检查傀儡师官方网站 https://pptr.dev/有关如何编写测试的更多信息。