Простое руководство для добавления расширяемых UI тестов (Puppeteer и Mocha)

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

Первое, что необходимо сделать, это добавить зависимости в package.json:

"dependencies": {
    "puppeteer": "^1.11.0",
    "mocha": "^5.2.0",
    "chai": "^4.2.0"
}

и выполнить npm install

После успешной установки зависимостей, создадим папку test и в ней папку scenarios (в которой будем размещать все тесты), а в нем файл sample.spec.js (в котором напишем первый тест).

Первый тест будет выглядеть так:

const puppeteer = require('puppeteer');
const { expect } = require('chai');

const width = 1024;
const height = 680;

describe('Sample test', () => {
    it('can google', async () => {
        const browser = await puppeteer.launch({
            headless: false,
            args: [`--window-size=${width},${height}`]
        });
        const page = await global.browser.newPage();
        await page.goto('https://google.com');
		
        expect(await page.title()).to.eql('Google');
    });
});

Для запуска тестов нужно в package.json добавить:

"scripts": {
    "tests": "mocha --recursive test/scenarios"
}

и выполнить в консоли npm run tests

А теперь к улучшениям.

Во-первых — вынесем то, что можно переиспользовать в constants.json (url страницы, размеры окна):

{
    "url": "https://google.com",
    "windowSize": {
        "width": 1024,
        "height": 680
    }
}

Если мы захотим добавить еще тесты, мы создадим новый файл (или добавим сюда еще it-кейсы) и повторим тоже самое. И при выполнении каждого тест кейса браузер будет отрываться и закрываться. Не очень хорошо.

Теперь давайте сделаем так, чтобы браузер запускался только один раз. Для этого в папке test создадим папку common и в ней файл bootstrap.js, в котором напишем код, который будет запускать браузер перед всеми тестами один раз и закрывать его после тестов.

const puppeteer = require('puppeteer');
const { expect } = require('chai');
const constants = require('./constants.json');

const width = constants.windowSize.width;
const height = constants.windowSize.height;

before(async () => {
    // чтобы в каждом файле не импротировать chai.expect, можно его "глобализировать"
    global.expect = expect;
    // теперь объект браузера будет доступен всем тестам
    global.browser = await puppeteer.launch({
        // если нужно видеть, что происходит во время теста, нужно передать парамерт headless со значением false 
        headless: false,
        // размеры окна
        args: [`--window-size=${width},${height}`]
    });
});

after(() => {
    global.browser.close();
});

Для того, чтобы bootstrap.js теперь участвовал в запуске тестов, необходимо модифицировать строку запуска тестов в package.json:

"tests": "mocha --recursive test/scenarios"

в

"tests": "mocha test/common/bootstrap.js test/scenarios"

И конечно же теперь можно упростить наш sample.spec.js:

const pageHelper = require('../common/helpers/pageHelper');
const constants = require('../common/constants.json');

describe('Sample test', () => {
    it('can google', async () => {
        const page = await global.browser.newPage();
        await page.goto(constants.url);
		
        expect(await page.title()).to.eql('Google');
    });
});

Теперь браузер будет открываться один раз. Но если мы пишем тесты для SPA (Single Page Application), у нас url запрашиваемой страницы меняться не будет. Так зачем дублировать один и тот же код в каждом тесте?

Создадим папку helpers в common, а в ней pageHelper.js

const constants = require('../constants.json');

module.exports = {
    createPage: async () => {
        const page = await global.browser.newPage();
        await page.goto(constants.url);
		
        return page;
    }
};

и модифицируем sample.spec.js:

const pageHelper = require('../common/helpers/pageHelper');

describe('Sample test', () => {
    it('can google', async () => {
        const page = await pageHelper.createPage();
		
        expect(await page.title()).to.eql('Google');
    });
});

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