How to test 'devtools chrome extension plugin' using google puppeteer?

Question

I have developed a plugin that is part of google developer tool. It has its own panel in developer tool. It also intercepts request and has some UI for users. I want to automate testing of this plugin. Is there a way to make google puppeteer to open the correct panel of devtools and perform actions?

Answer 1

You can try something like this

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

Based on this answer . I have tried this it was working good, check this output