[PT-BR] Page Model com TestCafé

O que é Page Model?
Basicamente é organizar e separar o código em pages. Os métodos definidos no modelo de página ficará disponível em qualquer lugar.

Por que usar Page Model?
Fornecer uma separação clara das camadas de UI e lógica, reaproveitamento de código, organização do projeto de automação e flexibilidade para as equipes.

Vamos no código entender melhor o Page Model.
Dentro do projeto criamos uma página de teste, onde nela colocamos todo código de interface. Ou seja, os elementos html mapeados + o método de ação com esses elementos.

import {t, Selector } from 'testcafe';

class Page {
    constructor () {
        this.nameInput      = Selector('#username');
        this.passwordInput  = Selector('#password');
        this.submitButton   = Selector('button').withText('Login');
    }

    async typeName(name) {
        await t.typeText(this.nameInput, name);
    }
    async typePassword(password){
        await t.typeText(this.passwordInput, password);
    }

    async clickSubmit() {
        await t.click(this.submitButton);
    }

}

export default new Page();

Então criamos nosso arquivo de teste onde os métodos criados na page são utilizados na lógica dos cenários de teste.

import page from '../page/pageLogin'

fixture `Use a Page Model`
    .page`http://the-internet.herokuapp.com/login`;


test('Sucess Login', async () => {

    await page.typeName('tomsmith');
    await page.typePassword('uperSecretPassword!')
    await page.clickSubmit();

});

Sendo assim, podemos descrever diversos cenários, uma vez que ocorra mudança em algum elemento html ou até mesmo na massa de dados, o local de alteração passa a ser único e a mudança reflete em todas os cenários que utilizam daquela informação.