Внедрение CSS на сайт с помощью Puppeteer

Question

Сайт, на котором я запускаю автоматические тесты с помощью Puppeteer, отображает всплывающие окна с информацией, если действия были успешными или когда что-то не удалось. К сожалению, эти всплывающие окна иногда закрывают кнопки, на которые должен нажимать мой скрипт. Было бы замечательно, если бы я мог ввести некоторые CSS на сайт, чтобы скрыть эти всплывающие окна. Есть ли встроенный способ сделать это?

Answer 1

addStyleTag:

Вы можете использовать page.addStyleTag , чтобы добавить какой-либо стиль, который добавит тег link или style на основе ваших параметров, который может быть url, path или некоторый CSS content.

// url
page.addStyleTag({url: 'http://example.com/style.css'})

// path, can be relative or absolute path
page.addStyleTag({path: 'style.css'})

// content
page.addStyleTag({content: '.body{background: 'red'}'})

evaluateOnNewDocument:

Если вы хотите применить на каждой странице / навигации, вы можете использовать page.evaluateOnNewDocument с этим фрагментом .

await page.evaluateOnNewDocument(()=>{
  var style = document.createElement('style');
  style.type = 'text/css';
  style.innerHTML = `.body{background: 'red'}`; // the css content goes here
  document.getElementsByTagName('head')[0].appendChild(style);
});