如何在Angular应用程序中使用Puppeter

Question

我的问题很简单，但我不明白这是否可能，在这种情况下，它是如何可能的。

我想在使用npm包的Angular应用程序中使用puppeteer库，但我不知道如何使用它

例如，我只想制作这个脚本：

const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
await page.screenshot({path: 'example.png'});
await browser.close();
})();

在Angular组件中，有人能帮助我吗(这将使我理解很多事情(。

提前谢谢，很抱歉我英语不好，我是法国人。

Answer 1

如何使用Puppeter进行Angular e2e测试

1( 安装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();
});
});

使用ng e2e运行e2e测试。上面的示例将生成应用程序主页的屏幕截图，并将其保存为example.png。

---

查看Puppeteer官方网站，了解有关如何编写测试的更多信息。

Answer 2

您可以使用Puppeter作为Angular Universal的现代智能替代品，用于服务器端渲染和预渲染。与Angular Universal不同，当使用Puppeter时，您不需要修改项目源代码。使用Puppeteer似乎比Universal容易得多。

参考文献：

无头Chrome：服务器端渲染JS站点的答案

使用@Angular/cli和puppeteer 预渲染Angular应用程序