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

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

如何使用 Puppeteer 进行 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

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

参考资料：

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

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

Answer 3

最新版本的 Angular CLI 和 Puppeteer 已集成。现在，您可以通过运行

ng e2e

并从下拉列表中选择 Puppeteer 来添加 Puppeteer。或者，您可以通过运行

@puppeteer/ng-schematics

直接安装

ng add @puppeteer/ng-schematics

。请参阅 https://pptr.dev/integrations/ng-schematics 了解更多详细信息。