如何在 Angular 应用程序中使用 Puppeteer [英] How to use Puppeteer in an Angular application

问题描述

我的问题很简单，但我不明白这是否可能，在这种情况下，怎么可能.

My question is simple but I don't understand if it's possible and, in this case, how it's possible.

我想使用 puppeteerAngular 应用程序中使用 npm 包 的库，但我不明白如何使用它.

I would like to use the puppeteer library in an Angular application using the npm package, but I don't understand how I can use it.

例如我只想制作这个脚本:

For example I just want to make this script :

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 组件中，有人可以帮助我吗(它能让我理解很多东西).

In an Angular component, can somebody help me (it will be able me to understanding a lot of thing).

提前致谢，抱歉我的英语不好，我是法国人.

Thanks in advance, sorry for my bad English, I'm French.

推荐答案

如何在 Puppeteer 中使用 Angular e2e 测试

1) 安装 Puppeteer

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

2) 配置 Protractor 以使用 Puppeteer

编辑您的 protractor.conf.js 并在 capabilities 中添加以下内容:

2) Configure Protractor to use Puppeteer

Edit your protractor.conf.js and add the following inside 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.

Run your e2e tests using ng e2e. The above example will produce a screenshot of your app home page and save it as example.png.

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

Check the official Puppeteer website for more information about how to write tests.

这篇关于如何在 Angular 应用程序中使用 Puppeteer的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！