web-dev-qa-db-fra.com

Comment utiliser Puppeteer dans une application angulaire

Ma question est simple mais je ne comprends pas si c'est possible et dans ce cas comment.? J'aimerais utiliser la bibliothèque de marionnettistes dans une application angulaire . https: //www.npmjs. com/package/puppeteer c’est l’installation de npm . Mais je ne comprends pas comment je peux l’utiliser . Par exemple, je veux juste faire ce 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();
})();

Dans une composante angulaire, quelqu'un peut-il m'aider (cela me permettra de comprendre beaucoup de choses)

Merci d'avance, désolé pour mon mauvais anglais, je suis français

angulartypescriptprotractorpuppeteere2e-testing
6
Ronaldonizuka

Comment utiliser les tests angulaires e2e avec Puppeteer

1) Installer Puppeteer

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

2) Configurer le rapporteur pour utiliser Puppeteer

Éditez votre protractor.conf.js et ajoutez le texte suivant dans capabilities:

// ...
const puppeteer = require('puppeteer');

exports.config = {
  // ...
  capabilities: {
    browserName: 'chrome',
    chromeOptions: {
      args: ['--headless'],
      binary: puppeteer.executablePath(),
    },
  },
  // ...
};

3) Écrire et exécuter vos tests

Par exemple, éditez votre e2e/src/app.e2e-spec.ts et procédez comme suit:

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

Exécutez vos tests e2e avec ng e2e. L'exemple ci-dessus produira une capture d'écran de la page d'accueil de votre application et l'enregistrera sous le nom example.png.

Consultez le site officiel officiel de Puppeteer pour plus d’informations sur la rédaction des tests.

4
Francesco Borzi

La configuration dont vous avez parlé est hors de propos ... Cela n'a aucun sens pour moi d'essayer le rapporteur avec le marionnettiste ... c'est deux applications complètement différentes ... vous devez y aller avec l'un ou l'autre autre!

Documentation GitHub du marionnettiste Q & A

https://github.com/GoogleChrome/puppeteer#q-is-puppeteer-replacing-seleniumwebdriver

0
J.Walnut