Как использовать 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();
})();

Ответы

Ответ 1

Как использовать Angular E2E тестирование с Puppeteer

1) Установить кукловод

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

2) Настройте транспортир для использования кукловода

Отредактируйте ваш 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 для получения дополнительной информации о том, как писать тесты.