如何使用google puppeteer测试'devtools chrome extension plugin'？

Question

我开发了一个插件,是谷歌开发人员工具的一部分.它在开发人员工具中有自己的面板.它还拦截请求并为用户提供一些UI.我想自动测试这个插件.有没有办法让google puppeteer打开正确的devtools面板并执行操作？

Answer 1

你可以尝试这样的事情

const browser = await puppeteer.launch({ devtools: true });
const targets = await browser.targets();

// find Devtools target URL
const devtoolsUrl = targets
    .map(({ _targetInfo }) => _targetInfo.url)
    .find((url) => url.indexOf('chrome-devtools://') !== -1);

// load the Devtools page in a new tab
const page = await browser.newPage();
await page.goto(devtoolsUrl);

// click on Network tab
const networkTab = await page.evaluateHandle(`document.querySelector('#-blink-dev-tools > div.widget.vbox.root-view > div > div.widget.vbox.insertion-point-sidebar > div > div').shadowRoot.querySelector('#tab-network');`);
await networkTab.click();

基于这个答案。我已经尝试过了，效果很好，检查这个输出