Простые шаги для тестирования расширения хрома в кукловом

Кукольник это библиотека узлов, которую можно использовать для автоматического тестирования расширений хрома. Он обеспечивает контроль API высокого уровня над хромом или хромом через протокол DevTools. Одним из больших преимуществ этой библиотеки является то, что ее можно использовать для большинства вещей, которые вы делаете вручную в браузере.

При тестировании расширений хрома существует два основных тестовых сценария, которые тестируют совместимость функциональности расширения и тестирования расширения. Вы можете проверить совместимость расширения браузера на основе хрома путем загрузки этого расширения в каждый вариант браузера. Когда дело доходит до тестирования функциональности, библиотека кукловодов предоставляет различные методы для имитации взаимодействия с пользователем. Это позволяет разработчикам создавать автоматизированные тестовые примеры для проверки и анализа поведения расширения.

Расширения Chrome по своей природе совместимы с междоры. Большинство расширений хрома также можно использовать в других браузерах на основе хрома, таких как MS Edge (Chromium), Vivaldi, Brave и т. Д. Puppeteer предоставляет пользователям возможность указать браузер в классе кукловода. В следующем разделе вы увидите, как загрузить расширение браузера в разных браузерах.

При использовании обычной библиотеки кукловодов она установит новейшую сборку хрома, и поэтому она не требуется для обеспечения расположения браузера и будет вызвать напрямую.

const puppeteer = require('puppeteer');

// Calling the default chromium installation
const browser = await puppeteer.launch();

Однако, если вы используете легкий кукольный ядер или определяете другой браузер, вам необходимо предоставить опцию executivePath в методе Puppeteer.launch. Приведенный ниже код демонстрирует, как проверить установку расширения на краю MS (Chromium)

Browser_test.js

const puppeteer = require('puppeteer');

(async () => {
    // Path to extension folder
    const paths = 'F:\\puppeteer\\ext\\cplklnmnlbnpmjogncfgfijoopmnlemp\\';
    try {
        console.log('==>Open Browser');
        const browser = await puppeteer.launch({
            // Define the browser location
            executablePath: 'C:\\Program Files (x86)\\Microsoft\\Edge Beta\\Application\\msedge.exe',
            // Disable headless mode
            headless: false,
            // Pass the options to install the extension
            args: [
                `--disable-extensions-except=${paths}`,
                `--load-extension=${paths}`,
                `--window-size=800,600`
                ]
        });

        console.log('==>Navigate to Extension');
        const page = await browser.newPage();
        // Navigate to extension page
        await page.goto('chrome-extension://fgbekoibaojaiamoheiklljjiihibdcb/panel.html');
        // Take a screenshot of the extension page
        console.log('==>Take Screenshot');
        await page.screenshot({path: 'msedge-extension.png'});

        console.log('==>Close Browser');
        await browser.close();
    }
    catch (err) {
        console.error(err);
    }
})();

Следующий блок кода откроет новый браузер MS Edge (Chromium) и установит расширение Chrome, используя предоставленные дополнительные аргументы.

--disable-extensions-except=
--load-extension=

Параметр «Нагрузка-разоблачение» загрузит плагин, в то время как опция-disable-extensions-recpt-except отключит другие расширения, которые могут мешать тестированию.

Затем будет создана новая страница браузера (TAB), и вы перейдете к URL -адресу расширения и сделаете снимок экрана. URL -адрес удлинения может быть определен в приведенном ниже формате.

:///

\ Кроме того, код инкапсулируется в асинхронной функции для обеспечения соблюдения асинхронной операции на каждом этапе процесса кукловода.

Вы можете убедиться, что тест успешен, проверив вывод терминала и захваченный скриншот.

Терминал

Заниманный скриншот (msedge-extension.png)

Вы можете определить местоположение для любого другого браузера на основе хрома так же, как и для определения местоположения для MS Edge (Chromium).

Теперь вы знаете, как загрузить расширение в браузер, а затем приходит тестирование функциональности расширения. Но до этого вы должны преодолеть серьезное препятствие при определении URL -адреса расширения. Всякий раз, когда загружается новый экземпляр браузера, он создаст новый идентификатор расширения, что затрудняет определение статического пути для расширения.

Тем не менее, кукольник предоставляет способ запросить идентификатор расширения, используя фоновый сценарий. Там идентификатор расширения может быть извлечен с использованием метода Targets в классе браузера, как показано ниже.

find-extensionId.js

const puppeteer = require('puppeteer');

(async () => {
  // Define the extension path
    const paths = 'F:\\puppeteer\\ext\\cplklnmnlbnpmjogncfgfijoopmnlemp\\';
    try {
        console.log('==>Open Browser');
        // Configure the browser (Default Chromium Installation)
        const browser = await puppeteer.launch({
            headless: false,
            // Chrome options
            args: [
            `--disable-extensions-except=${paths}`,
            `--load-extension=${paths}`,
            `--window-size=800,600`
            ]
        });

        // Name of the extension
        const extensionName = 'iMacros for Chrome';

        // Find the extension
        const targets = await browser.targets();
        const extensionTarget = targets.find(({ _targetInfo }) => {
            return _targetInfo.title === extensionName && _targetInfo.type === 'background_page';
        });

        // Extract the URL
        const extensionURL = extensionTarget._targetInfo.url;
        console.log("\nExtracted URL ==>" + extensionURL);
        const urlSplit = extensionURL.split('/');
        console.log("Split URL ==>");
        console.log(urlSplit);
        const extensionID = urlSplit[2];
        console.log("Extension ID ==>" + extensionID +"\n");

        // Define the extension page
        const extensionEndURL = 'panel.html';

        //Navigate to the page
        console.log('==>Navigate to Extension');
        const page = await browser.newPage();
        await page.goto(`chrome-extension://${extensionID}/${extensionEndURL}`);

        console.log('==>Take Screenshot');
        await page.screenshot({path: 'chromium-extension.png'});

        console.log('==>Close Browser');
        await browser.close();
    }
    catch (err) {
        console.error(err);
    }
})();

В приведенном выше блоке кода вы запрашиваете расширение Chrome, используя метод Targets. Метод целей может использоваться для доступа к цели любой страницы, управляемой браузером. В этом случае цель определяется с использованием имени расширения (это относится к заголовку расширения, определенным в файле Manifest.json расширения).

После того, как расширение будет расположено, вы можете извлечь полный URL -адрес, а затем разделить его, чтобы получить идентификатор расширения. Вы можете наблюдать этот процесс, используя выходы console.log (), как показано на следующем скриншоте.

Последний шаг — создать переменную для передачи необходимой страницы с расширением. Вы создали новую переменную, называемую ExtensionEndurl, чтобы указать страницу и, наконец, передать как идентификатор расширения, так и необходимую страницу на метод page.goto () для направления браузера в место расширения.

Теперь вы запустили браузер и получили расширение программно. Единственная оставшаяся задача — взаимодействовать с расширением. Кукольник предоставляет несколько способов найти элементы на веб -странице и взаимодействовать с ними. Давайте просмотрим следующий образец кода, чтобы увидеть их в действии.

Google-search.js

const puppeteer = require('puppeteer');

(async () => {
    try {
        // Calling the default chromium installation
        const browser = await puppeteer.launch({headless:false, defaultViewport: null});
        const page = await browser.newPage();
        await page.goto('https://www.google.com');

        // Setup Viewport
        await page.setViewport({width: 1280, height: 800})

        // Interact with webpage
        // Search Google
        await page.type('#tsf > div:nth-child(2) > div.A8SBwf > div.RNNXgb > div > div.a4bIc > input', 'Puppeteer');

        await page.$eval('input[name=btnK]', el => el.click());

        // Wait for results
        await page.waitForNavigation();

        // Take screenshot
        await page.screenshot({path: 'google-search.png'});

        await browser.close();
    }
    catch (err) {
        console.error(err);
    }
})();

Выше вы определили простой сценарий для перемещения в Google и выполнить поиск. Вы предоставляете ввод в поле поиска, используя метод page.type () и селектор CSS, чтобы указать элемент и ввести термин поиска. Затем, используя метод страницы. $ Eval (), вы запрашиваете кнопку поиска и нажимаете эту кнопку. Этот метод будет использовать функцию Document.QuerySelector для поиска конкретного элемента. Затем вам нужно подождать, пока страница загрузится и сделает скриншот.

Все эти взаимодействия основаны на запросах объекта DOM. Документальная модель объекта запрашивается с использованием API API $ (Queryselector) и $$ (queryselectorall), предоставленных кукольным.

Когда дело доходит до тестирования расширения Chrome, вы можете использовать те же методы для взаимодействия с расширением. Следующий блок кода показывает, как взаимодействовать с расширением «imacros for Chrome», используя методы, упомянутые выше. Когда расширение загружается, вы нажмете на вкладку «Запись» и перейдите в раздел записи макроса.

//Navigate to the page
        console.log('==>Navigate to Extension');
        const page = await browser.newPage();
        await page.goto(`chrome-extension://${extensionID}/${extensionEndURL}`);

        console.log('==>Click on RECORD tab')
        await page.$eval('#record-tab-label', el => el.click());

        console.log('==>Take Screenshot');
        await page.screenshot({path: 'chromium-extension.png'});

РЕЗУЛЬТАТ

Следующий сценарий включает в себя вещи, которые вы узнали до сих пор, и создает сценарий, который будет выполняться в нескольких браузерах, таких как Chromium, MS Edge (Chromium), Vivaldi и Google Chrome. Он также проверит нагрузку и функциональность расширения, а затем завершит программу, сделав снимки экрана. Этот сценарий будет работать во всех браузерах одновременно при выполнении каждого действия в браузерах асинхронным образом.

ext_test.js

const puppeteer = require('puppeteer');
const path = require('path');

// Required global variables
const ext_install_path = path.join(__dirname, '\\ext\\cplklnmnlbnpmjogncfgfijoopmnlemp\\');
const image_path = path.join(__dirname, '\\img\\');
const extensionEndURL = 'panel.html'

// Function to obtain extension ID
async function getID(browserObj) {
    // Name of the extension
    const extensionName = 'iMacros for Chrome';

    // Find the extension
    const targets = await browserObj.targets();
    const extensionTarget = targets.find(({ _targetInfo }) => {
        return _targetInfo.title === extensionName && _targetInfo.type === 'background_page';
    });

    // Extract the URL
    const extensionURL = extensionTarget._targetInfo.url;
    const urlSplit = extensionURL.split('/');
    const extID = urlSplit[2];

    return extID;
}

// Testing Built-in Chromium
(async () => {
    console.log("===> Testing Chromium")
    const browser = await puppeteer.launch({
        headless: false,
            // Chrome options
            args: [
            `--disable-extensions-except=${ext_install_path}`,
            `--load-extension=${ext_install_path}`,
            ]
    });

    const extensionID = await getID(browser);
    const page = await browser.newPage();

    await page.goto(`chrome-extension://${extensionID}/${extensionEndURL}`);
    await page.$eval('#record-tab-label', el => el.click());

    await page.screenshot({path: path.join(image_path, 'default-chromium.png')});

    await browser.close();
  })();

// Testing MS Edge (Chromium)
(async () => {
    console.log("===> Testing MS Edge (Chromium)")
    const browser_location = 'C:\\Program Files (x86)\\Microsoft\\Edge Beta\\Application\\msedge.exe'

    const browser = await puppeteer.launch({
        executablePath: browser_location,
        headless: false,
        args: [
            `--disable-extensions-except=${ext_install_path}`,
            `--load-extension=${ext_install_path}`,
            `--window-size=800,600`
            ]
    });

    const extensionID = await getID(browser);
    const page = await browser.newPage();

    await page.goto(`chrome-extension://${extensionID}/${extensionEndURL}`);
    await page.$eval('#record-tab-label', el => el.click());

    await page.screenshot({path: path.join(image_path, 'msedge-extension.png')});

    await browser.close();
})();

// Testing Vivaldi
(async () => {
    console.log("===> Testing Vivaldi")
    const browser_location = 'C:\\Program Files\\Vivaldi\\Application\\vivaldi.exe';

    const browser = await puppeteer.launch({
        executablePath: browser_location,
        headless : false,
        args: [
            `--disable-extensions-except=${ext_install_path}`,
            `--load-extension=${ext_install_path}`,
            ]
    });

    const extensionID = await getID(browser);
    const page = await browser.newPage();

    await page.goto(`chrome-extension://${extensionID}/${extensionEndURL}`);
    await page.$eval('#record-tab-label', el => el.click());

    await page.screenshot({path: path.join(image_path, 'vivaldi.png')});

    await browser.close();
})();

// Testing Google Chrome
(async () => {
    console.log("===> Testing Google Chrome")
    const browser_location = 'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe'; 

    const browser = await puppeteer.launch({
        executablePath: browser_location,
        headless : false,
        args: [
            `--disable-extensions-except=${ext_install_path}`,
            `--load-extension=${ext_install_path}`,
            ]
    });

    const extensionID = await getID(browser);
    const page = await browser.newPage();
    await page.setViewport({width: 1280, height: 800})
    await page.goto(`chrome-extension://${extensionID}/${extensionEndURL}`);
    await page.$eval('#record-tab-label', el => el.click());

    await page.screenshot({path: path.join(image_path, 'google-chrome.png')});

    await browser.close();
})();

В этой статье мы узнали о кукловом и о том, как его можно использовать для тестирования расширений хрома. Кукольник — это мощная библиотека, которую можно настроить в соответствии с потребностями пользователя. Кукольник также может быть интегрирован с другими фреймводами для тестирования JavaScript, такими как Jest, Mocha или Jasmine, чтобы создать полный набор для тестирования.

Написание теста на расширение Chrome? Есть более простой способ.

Хотя вышеперечисленное является хорошей отправной точкой для создания тестов на расширение хрома, это все еще довольно сложный процесс. Если вы ищете более простой способ проверить расширение Chrome, проверьте МАРЛЕРС .AI !

Тесты могут быть написаны на простом английском языке — не требуется сложная настройка
Расширения Chrome можно проверить в реальном браузере, а не только в новом окне/вкладке
Ноль технического обслуживания — Walrus.ai обрабатывает техническое обслуживание испытаний для вас, так что вы никогда не испытываете хлопьев

Могу я получить пример?

Представьте, что вы хотели протестировать Google Calendar Chrome расширения Zoom. Написание теста для этого так же просто, как и написание 4 строк кода.

$ walrus -u https://zoom.us -i \
  'Click on the Zoom Chrome Extension' \
  'In the extension popup, click "Schedule a meeting"' \
  'In the browser, click Save' \
  'In the browser, verify a calendar event loads'

Хотите узнать больше? Дайте нам знать Анкет

Оригинал: «https://dev.to/scahhht/simple-steps-for-testing-a-chrome-extension-in-puppeteer-2pm3»

Написание теста на расширение Chrome? Есть более простой способ.

Читайте ещё по теме: