web-dev-qa-db-fra.com

Détecter et tester Chrome Extension utilisant Puppeteer

Existe-t-il un moyen de tester une extension Chrome à l'aide de Puppeteer? Par exemple, une extension peut-elle détecter que Chrome a été lancée en mode "test" pour fournir une interface utilisateur différente, vérifier que les scripts de contenu fonctionnent, etc.?

google-chrome-extensionautomated-testspuppeteer
16
ebidel

Passer --user-agent Dans puppeteer.launch() est un moyen utile de remplacer l'AU du navigateur avec une valeur personnalisée. Ensuite, votre extension peut relire navigator.userAgent Dans sa page d'arrière-plan et identifier que Chrome a été lancé avec Puppeteer. À ce stade, vous pouvez fournir différents chemins de code pour tester le crx vs . fonctionnement normal.

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

Extension background.js 

chrome.runtime.onInstalled.addListener(details => {
  console.log(navigator.userAgent); // "PuppeteerAgent"
});

Alternativement, si vous souhaitez conserver la chaîne UA d'origine du navigateur, cela devient difficile.

  1. Lancez Chrome et créez une page vierge dans Puppeteer.
  2. Définissez son titre sur un nom personnalisé.
  3. Détectez la mise à jour du titre de l'onglet dans votre script d'arrière-plan.
  4. Définissez un indicateur global à réutiliser ultérieurement.

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

Remarque : L'inconvénient est que cette approche nécessite l'autorisation "tabs" dans manifest.json.

Test d'une page d'extension

Supposons que vous vouliez tester l'interface utilisateur de votre page contextuelle? Une façon de le faire serait de naviguer directement vers son URL chrome-extension://, Puis d'utiliser le marionnettiste pour effectuer le test de l'interface utilisateur:

// 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.

Pour créer un ID d'extension stable pour les tests, consultez: https://stackoverflow.com/a/23877974/27467

16
ebidel