如何在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）安装木偶

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

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

请访问Puppeteer官方网站以获取有关如何编写测试的更多信息。