Напишите свой первый тест пользовательского интерфейса, используя Puppeteer и Mocha

Запустить браузер Chrome

//Launch a non-headless browser
browser = await puppeteer.launch({headless: false});
page = await browser.newPage();

Над фрагментом кода запустите браузер, инициализируйте переменную browser и инициализируйте новый объект page. puppeteer.launch() по умолчанию используется для запуска безголового браузера, передайте {headless: false}, если вы хотите запустить визуальный браузер (я предпочитал запускать визуальный браузер до тех пор, пока не будет выполнено тестовое написание)

Перейдите по URL-адресу и проверьте заголовок страницы

await page.goto("https://www.google.com");
await page.waitFor(1000);
let title = await page.title();
//verify actual and expected title are identical.
title.should.equal("Google");

page.goto(): используется для навигации по URL-адресу в браузере.

page.waitFor(миллисекунды): используется для приостановки выполнения.

page.title():используется для получения заголовка страницы

Поиск текста

await page.click("input[title='search']");
await page.keyboard.type("Naren Chejara");
//selector copied from chrome dev tool
await page.click("#tsf > div:nth-child(2) > div > div.FPdoLc.VlcLAe > center > input.gNO89b");
//Validate Title of the page after trigger search
let title = await page.title();
title.should.equal("Naren Chejara - Google Search");
await page.waitFor(5000); // Wait for 5 secs

page.click: используется для поиска селектора и нажимает на первый, если несколько элементов удовлетворяют селектору.

«input[title=’Search’]» — это означает найти поле ввода с атрибутом title=”Search”.

page.keyboard.type: используется для ввода значения в текстовое поле.

Советы. Используйте "Копировать селектор"из инструмента разработчика Chrome, если вы не знаете строку селектора. Посмотрите на изображение ниже, чтобы узнать, как скопировать селектор из Chrome DevTool.

Проверить результаты

let content = await page.evaluate(() => document.querySelector('a[href="http://chinesenri.com/members/pchejara/"]').firstElementChild.textContent);
//               OR
//let content = await page.evaluate(() => document.querySelector('a[href="http://chinesenri.com/members/pchejara/"] > h3')).textContent);
content.should.equal("Naren Chejara – NRI in China");

page.evaluate(): используйте для оценки функции в контексте страницы, например, в приведенном выше фрагменте кода я передал функцию, которая использует селектор запросов, чтобы найти ссылку с определенным значением и получить содержимое первого элемента.

Вот окончательный тестовый файл, Вы также можете получить его из репозитория GitHub

const puppeteer = require("puppeteer"),
      should = require("should");
let browser = null,
    page = null;
describe("Google Home", function (){
    this.timeout(60 * 1000);
    before(async () => {
       browser = await puppeteer.launch({headless: false}) // with visual
       page = await browser.newPage();
});
after(async () => {
   await browser.close();
});
it("Should show home Page", async function() {
   await page.goto("https://www.google.com");
   await page.waitFor(1000);
   let title = await page.title();
   title.should.equal("Google");
});
it("Should display search result", async () => {
   // await page.click("#tsf > div:nth-child(2) > div > div.RNNXgb > div > div.a4bIc > input");
   await page.waitForSelector('input[title="Search"]', {visible: true});
   await page.click('input[title="Search"]');
   await page.keyboard.type("Naren Chejara");
   await page.click("#tsf > div:nth-child(2) > div > div.FPdoLc.VlcLAe > center > input.gNO89b");
   //Validate Title of the page after trigger search
   let title = await page.title();
   title.should.equal("Naren Chejara - Google Search");
   await page.waitFor(5000);
});
it("content should exist in the search result", async () => {
   let content = await page.evaluate(() =>
document.querySelector('a[href="http://chinesenri.com/members/pchejara/"]').firstElementChild.textContent);
   // let content = await page.evaluate(() => document.querySelector('a[href="http://chinesenri.com/members/pchejara/"] > h3')).textContent);
   content.should.equal("Naren Chejara – NRI in China");
})
});

Создать отчет

Mocha поддерживает множество отчетов, таких как SPEC, DOT MATRIX, NAYN и т. д., вы можете использовать любой из них или использовать любые пользовательские отчеты для создания лучшего отчета. Я использовал Mochawesome.

Mochawesome — это настраиваемый генератор отчетов для использования с платформой тестирования Javascript mocha. Он работает на Node.js (›=4) и работает в сочетании с mochawesome-report-generator для создания отдельного отчета HTML/CSS, помогающего визуализировать ваши тестовые запуски.

Настройте генератор отчетов.Откройте файл package.json и скопируйте/вставьте приведенный ниже код в файл package.json.

"scripts": {
    "test": "mocha  tests\\homePage.js --reporter mochawesome"
}

Примечание. Вы можете использовать команду mocha напрямую, если mochaмодуль устанавливается глобально, в противном случае замените 'mocha'на 'node_module/.bin/mocha. '

Проведите тест

$npm test

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