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

2023-12-26

我的问题很简单,但我不明白这是否可能,以及在这种情况下,如何可能。

我想使用puppeteer https://developers.google.com/web/tools/puppeteer/使用 Angular 应用程序中的库npm 包 https://www.npmjs.com/package/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 组件中,有人可以帮助我吗(这将使我能够理解很多事情)。

预先感谢,抱歉我的英语不好,我是法国人。


如何通过 Puppeteer 使用 Angular e2e 测试

1)安装傀儡师 https://github.com/GoogleChrome/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();
  });
});

使用以下命令运行您的 e2e 测试ng e2e。上面的示例将生成您的应用程序主页的屏幕截图并将其另存为example.png.


检查傀儡师官方网站 https://pptr.dev/有关如何编写测试的更多信息。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 Angular 应用程序中使用 Puppeteer 的相关文章

随机推荐