有没有一种方法可以使用Puppeteer测试Chrome扩展程序?例如,扩展程序是否可以检测到Chrome在“测试”模式下启动以提供不同的UI、检查内容脚本是否正常工作等。
有没有一种方法可以使用Puppeteer测试Chrome扩展程序?例如,扩展程序是否可以检测到Chrome在“测试”模式下启动以提供不同的UI、检查内容脚本是否正常工作等。
在 puppeteer.launch()
中传递 --user-agent
参数是用于覆盖浏览器UA的有用方式。然后,您的扩展程序可以在其后台页面中读取 navigator.userAgent
并识别 Chrome 是由 Puppeteer 启动的。此时,您可以为测试 CRX 和正常操作提供不同的代码路径。
puppeteer_script.js
const puppeteer = require('puppeteer');
const CRX_PATH = '/path/to/crx/folder/';
puppeteer.launch({
headless: false, // extensions only supported in full chrome.
args: [
`--disable-extensions-except=${CRX_PATH}`,
`--load-extension=${CRX_PATH}`,
'--user-agent=PuppeteerAgent'
]
}).then(async browser => {
// ... do some testing ...
await browser.close();
});
扩展程序 background.js
chrome.runtime.onInstalled.addListener(details => {
console.log(navigator.userAgent); // "PuppeteerAgent"
});
或者,如果您想保留浏览器的原始UA字符串,则会变得棘手。
background.js
let LAUNCHED_BY_PUPPETEER = false; // reuse in other parts of your crx as needed.
chrome.tabs.onUpdated.addListener((tabId, info, tab) => {
if (!LAUNCHED_BY_PUPPETEER && tab.title.includes('PuppeteerAgent')) {
chrome.tabs.remove(tabId);
LAUNCHED_BY_PUPPETEER = true;
}
});
puppeteer_script.js
const puppeteer = require('puppeteer');
const CRX_PATH = '/path/to/crx/folder/';
puppeteer.launch({
headless: false, // extensions only supported in full chrome.
args: [
`--disable-extensions-except=${CRX_PATH}`,
`--load-extension=${CRX_PATH}`,
]
}).then(async browser => {
const page = await browser.newPage();
await page.evaluate("document.title = 'PuppeteerAgent'");
// ... do some testing ...
await browser.close();
});
注意:这种方法的缺点是需要在manifest.json中获得“tabs”权限。
假设您想测试弹出式页面的用户界面,一种方法是直接导航到其chrome-extension://
URL,然后使用puppeteer进行UI测试:
// Can we navigate to a chrome-extension page? YES!
const page = await browser.newPage();
await page.goto('chrome-extension://ipfiboohojhbonenbbppflmpfkakjhed/popup.html');
// click buttons, test UI elements, etc.
要创建稳定的扩展 ID 进行测试,请查看:https://dev59.com/1mAg5IYBdhLWcg3wM4hb#23877974
--disable-extensions-except
和--load-extension
参数,可以参照这个答案来完成对chrome-extension://
URL的导航。 - Eric Majerusconst CRX_PATH = '/Users/alex/git/imdb-age';
。 - alex