web-dev-qa-db-ja.com

Puppeteerを使用してサイトにCSSを挿入する

Puppeteerで自動テストを実行しているサイトでは、アクションが成功した場合、または何かが失敗した場合に情報ポップアップが表示されます。残念ながら、これらのポップアップは、スクリプトがクリックしなければならないボタンを隠す場合があります。これらのポップアップを非表示にするために、サイトにCSSを挿入できると便利です。これを行う組み込みの方法はありますか？

javascriptnode.jsautomated-testsgoogle-chrome-devtoolspuppeteer
8
SebastianR

page.evaluate（）

スタイルシート：

page.evaluate() を使用して、次の方法で現在のページにスタイルシートを挿入できます。

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

生のCSSコンテンツ：

または、 page.evaluate() を使用して、未加工のCSSを現在のページに挿入することもできます。

_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