web-dev-qa-db-fra.com

Injection de CSS dans le site avec Puppeteer

Le site sur lequel j'effectue des tests automatisés avec Puppeteer affiche des popups d'informations si les actions ont réussi ou en cas d'échec. Malheureusement, ces popups couvrent parfois des boutons sur lesquels mon script doit cliquer. Ce serait génial si je pouvais injecter du CSS dans le site pour cacher ces popups. Existe-t-il une manière intégrée de procéder?

javascriptnode.jsautomated-testsgoogle-chrome-devtoolspuppeteer
8
SebastianR

page.evaluate ()

Feuille de style:

Vous pouvez utiliser page.evaluate() pour injecter une feuille de style dans la page actuelle en utilisant la méthode suivante:

await page.evaluate(async () => {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'https://example.com/style.css';
  const promise = new Promise((resolve, reject) => {
    link.onload = resolve;
    link.onerror = reject;
  });
  document.head.appendChild(link);
  await promise;
});

Contenu CSS brut:

Alternativement, vous pouvez également utiliser page.evaluate() pour injecter du CSS brut dans la page actuelle:

await page.evaluate(async () => {
  const style = document.createElement('style');
  style.type = 'text/css';
  const content = `
    #example {
      color: #000;
    }
  `;
  style.appendChild(document.createTextNode(content));
  const promise = new Promise((resolve, reject) => {
    style.onload = resolve;
    style.onerror = reject;
  });
  document.head.appendChild(style);
  await promise;
});
0
Grant Miller