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

问题描述

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

My question is simple but i don't understand if it's possible and in this case how it's possible ? I would like to use the puppeteer library in a angular application. https://www.npmjs.com/package/puppeteer it's the npm installation. 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();
})();

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

In a 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)安装木偶

How to use Angular e2e testing with Puppeteer

1) Install Puppeteer

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

2)配置量角器以使用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并执行以下操作:

3) Write and execute your tests

For example, edit your e2e/src/app.e2e-spec.ts and do the following:

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.

请访问官方木偶网站，以获取有关如何编写测试的更多信息.

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

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