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

Question

我的问题很简单，但我不知道是否可能，在这种情况下怎么可能？ 我想在有角度的应用程序中使用puppeteer库。 https://www.npmjs.com/package/puppeteer是npm安装。 但是我不明白如何使用它。 例如，我只想制作此脚本：

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

在一个角度组件中，有人可以帮助我（它将使我能够理解很多事情）

在此先感谢您，我英语不好，我是法语

Answer 1

如何在Puppeteer中使用Angular e2e测试

1）安装Puppeteer

npm install --save-dev puppeteer @types/puppeteer

2）配置量角器以使用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。

---

检查official Puppeteer website，以获取有关如何编写测试的更多信息。

Answer 2

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

参考：

Headless Chrome: an answer to server-side rendering JS sites

Prerender an Angular application with @angular/cli and puppeteer