有没有办法使用 Puppeteer 测试 Chrome 扩展程序?例如,扩展程序能否检测到 Chrome 以“测试”模式启动以提供不同的 UI、检查内容脚本是否正常工作等?
最佳答案
路过--user-agent
在 puppeteer.launch()
是一种使用自定义值覆盖浏览器 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();
});
分机 背景.js chrome.runtime.onInstalled.addListener(details => {
console.log(navigator.userAgent); // "PuppeteerAgent"
});
或者,如果您想保留浏览器的原始 UA 字符串,它会变得很棘手。
背景.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”权限。测试扩展页面
假设您想测试您的弹出页面 UI?一种方法是导航到它的
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://stackoverflow.com/a/23877974/274673
关于javascript - 使用 Puppeteer 检测和测试 Chrome 扩展程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48089670/