E2E-setup.md

Prepare Puppeteer project

https://medium.com/touch4it/end-to-end-testing-with-puppeteer-and-jest-ec8198145321

Install NodeJS

https://nodejs.org/en/

Prepare project

# create empty directory
mkdir project-name
# will create package.json
npm init

Install Puppeteer

# install package into node_modules folder
# --save will register package into package.json
npm install puppeteer --save

Run some script
```
> node neco.js
```
More detail about debug

https://code.visualstudio.com/docs/nodejs/nodejs-debugging

Prepare Jest

install Jest CLI tool

# to project
npm install jest-cli –-save-dev
# or to machine
npm install jest-cli –g

install project packages

npm install jest --save
npm install jest-puppeteer --save

update package.json

"scripts": {
    "test": "jest"
}

create jest.config.js

module.exports = {
    preset: "jest-puppeteer",
    globals: {
      URL: "https://localhost:44352/"
    },
    testMatch: [
      "**/test/**/*.test.js"
    ],
    verbose: true
}

create jest-puppeteer.config.js

module.exports = {
    launch: {
        headless: process.env.HEADLESS !== 'false',
        slowMo: process.env.SLOWMO ? process.env.SLOWMO : 0,
        devtools: false,
        defaultViewport: { width: 1600, height: 900 }
    }
}

create some test

test\registration.test.js

run tests

# normal run
npm test
# run when debugging, it will open the chrome UI and slow down operations
# (windows variation) [around && cannot be space! otherwise it does not work]
SET HEADLESS=false&&SET SLOWMO=100&&npm test
# (linux variation)
HEADLESS="false" SLOWMO=100 npm run test

# or execute specific test
jest registration.test.js
# or with chrome UI
SET HEADLESS="false"&&SET SLOWMO=100&&jest registration.test.js

Pozor: tady je nekonzistence v článku, sice nastavíme SLOWMO, ale v testu se pak jen kontroluje, jestli SLOWMO má nějakou hodnotu a v testu si jí přepíšeme. V takovém případě by jen stačilo kontrolovat, jestli je nastavený HEADLESS.

Pozor: pokud spustíme například

SET HEADLESS=false&&npm test

a potom pouze

npm test

tak HEADLESS bude stále nastavený na false. Musíme zavřít a znova otevřít konzoli, pro reset proměnných.

Test example

const timeout = process.env.HEADLESS ? 5 * 60 * 1000 /* 5min*/ : 1 * 60 * 1000 /* 1min*/;

// can be omitted if it's defined as global variable in jest.config.js
const baseURL = 'https://localhost:44352'

beforeAll(async () => {
    await page.goto(baseURL, {waitUntil: 'networkidle0'});
}, timeout);

describe('Registration', () => {
    test('Submit form with valid data', async () => {
        // Arrange
        await page.click('[href="/Identity/Account/Register"]');
        await page.waitForSelector('form');

        let username = (new Date()).getTime().toString();
        let email = `${username}@domena.test`;
        let password = 'Pa$$w0rd';
        let phone = '+420123456789'

        await page.type('#Input_Email', email);
        await page.type('#Input_Password', password);
        await page.type('#Input_ConfirmPassword', password);
        await page.type('#Input_PhoneNumber', phone);
        
        // Act
        await page.click('[type="submit"]');

        // Assert
        await page.waitForSelector('body > div.container.body-content > p');
        const html = await page.$eval('body > div.container.body-content > p', el => el.innerHTML);
        expect(html).toContain('Registration was successful');
    }, timeout);
});

Ninjanaut/E2E-setup.md

Prepare Puppeteer project

Prepare Jest