Оценок пока нет Базовые вещи в TestCafe

В данном посте рассмотрим некоторые шаблоны приема данного E2E ориентированного тестового фреймворка Node.js. Отличительной особенностью данной платформы в том, что она ограничивается установкой самой платформы и браузера, к тому же, в консоли можно использовать браузер в heandless режиме.

Установка

Тут проще всего. Потребуется предустановленный Node.js и выполнение команды установки через npm:

npm install -g testcafe

Желательно устанавливать данный модуль глобально, чтобы путь к ней прописывался в PATH и чтобы в консоли была доступна команда testcafe.

Далее нам надо будет установить какой-либо браузер, в котором будут выполняться тестирование.

В процессе работы были использованы 2 браузера в консоли Linux в headless режиме — chromium-browser и firefox. Первый, почему -то не удалось запустить, возможно, что есть мои косяки и недопонимания, поэтому ниже приведена команда запуска через firefox в режиме headless.

Для установки firefox выполняем команду:

sudo apt-get update
sudo apt-get install firefox

Таким образом, система тестирования и браузер готовы, осталось написать тест и запустить. К примеру выполним тест, записав в файл test.js:

import { Selector } from 'testcafe';

fixture `Getting Started`
    .page `http://devexpress.github.io/testcafe/example`;

test('My first test', async t => {
    await t
        .typeText('#developer-name', 'John Smith')
        .click('#submit-button')

        // Use the assertion to check if the actual header text is equal to the expected one
        .expect(Selector('#article-header').innerText).eql('Thank you, John Smith!');
});

И выполним этот тест через команду:

testcafe "firefox:headless:marionettePort=9223" test.js

Дополнительно про начало работы с модулем тут, а информация по работе с headless режимом тут.

 

Частые шаблоны тестирования

Сохранение скриншота результата. Для этого можно использовать код похожим образом, как внизу:

import { Selector } from 'testcafe';
fixture `Load page...`
    .page `https://google.com`;

test('google.com', async t => {
    await t
    .resizeWindow(1200, 2000)
    .click('tr:nth-child(1) a.btn-primary')
    .wait(1000)
    .takeScreenshot('screen_1.png')
    .click('tr:nth-child(1) a.btn-primary')
    .wait(1000)
    .takeScreenshot('screen_1_1.png');
});

Есть примечание к этом, что запускать текст надо будет с ключом -s savepath, где savepath — папка хранения скриншотов. К примеру:

testcafe "firefox:headless:marionettePort=9223" test.js -s myscreenshots

 

Сохранение страницы в виде html — документа. Для этого необходимо будет прописать код, как внизу:

import fs from 'fs';
import { Selector } from 'testcafe';
import { ClientFunction } from 'testcafe';
fixture `Load page...`
    .page `https://google.com`;

test('google.com', async t => {
    await t
    .resizeWindow(1200, 2000)
    .click('tr:nth-child(1) a.btn-primary')
    .wait(1000)
    .click('tr:nth-child(5) a.btn-primary')
    .wait(1000)
    const getPageHTML = ClientFunction(() => document.documentElement.outerHTML);
    await fs.writeFile('./pages/page.html',await getPageHTML());
    
});

 

Получение текущего url. Бывает очень полезно знать, где мы сейчас находимся после нажатия на кнопку. Заполучить url можно так:

import fs from 'fs';
import { Selector } from 'testcafe';
import { ClientFunction } from 'testcafe';
fixture `Load page...`
    .page `https://google.com`;

test('google.com', async t => {
    await t
    .resizeWindow(1200, 2000)
    .click('button.search');

    //Получение текущего URL
    const docURI = await t.eval(() => document.documentURI);
    console.log(docURI);
});

 

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

import fs from 'fs';
import { Selector } from 'testcafe';
import { ClientFunction } from 'testcafe';
var debug = ClientFunction(() => { debugger; });

fixture `Load page...`
    .page `https://google.com`;

test('google.com', async t => {
    await t
    .resizeWindow(800, 1000)
    .click('tr:nth-child(1) a.btn-primary')//Выбираем номер события
    .wait(1000)
    .click('tr:nth-child(2) a.btn-primary')//Выбираем сектор зала
    .wait(3000);
    await debug();//Завершаем работы. Не забываем включить модуль дебагинга
});

 

Заполучение содержимого тега. Очень бывает полезно заполучить содержимого какого-нибудь узла на тестируемой странице:

import { Selector } from 'testcafe';
import { ClientFunction } from 'testcafe';
fixture `Load page...`
    .page `https://google.com`;

test('google.com', async t => {
    await t
    .resizeWindow(1200, 2000)
    .click('tr:nth-child(1) a.btn-primary')
    .wait(1000)
    //.takeScreenshot('screen_1.png')
    .click('tr:nth-child(5) a.btn-primary')
    .wait(1000);
    
    //Получение хоть какого-то контента HTML
    const elementWithId = Selector(id => document.getElementById(id));
    const visibleElementWithId = elementWithId.with({
        visibilityCheck: true
    });
    const visibleButton = await visibleElementWithId('sector_window');
    console.log(visibleButton.innerText);//innerText//textContent
});