pizza-test-with-page-object.js

import { Selector, ClientFunction } from 'testcafe';

fixture `Let\'s take a look at the new TestCafe`
    .page `url of delivery service here (hidden not to be an ad)`;

class PizzaForm {
    constructor (pizzaTitle, size) {
        this.form             = Selector('form').withAttribute('data-item-name', pizzaTitle);
        this.sizeSelect       = this.form.find('select[name="size"]');
        this.sizeOption       = this.sizeSelect.find('option').withText(size);
        this.quantityInput    = this.form.find('input[name="quantity"]');
        this.orderButton      = this.form.find('button').withText('Add to Order');
        this.additionNoButton = Selector('#upsell-no');
    }
}

class OrderInfo {
    constructor () {
        this.order      = Selector('#order');
        this.items      = this.order.find('.order_item');
        this.itemTitle  = this.order.find('.order_item > h3');
        this.itemDetail = this.order.find('.order_item > .item-detail');
        this.totalPrice = this.order.withText('Subtotal').find('strong');

        this.laterButton    = Selector('#ordering_for_later');
        this.okButton       = Selector('#ordering_for_later');
        this.checkoutButton = this.order.find('.order-details > .submit-link');
        this.deliveryButton = this.order.find('.order-details').find('button.type-delivery');
    }
}

class DeliveryDetailsPage {
    constructor () {
        this.nameInput    = Selector('#full_name');
        this.phoneInput   = Selector('#phone');
        this.emailInput   = Selector('#email');
        this.addressInput = Selector('#address');
        this.zipInput     = Selector('#zip');
        this.cashLabel    = Selector('label').withText('Cash');
        this.orderButton  = Selector('button').withText('Submit Order');
    }
}

class PageModel {
    constructor () {
        this.orderOnline      = Selector('#menu-primary-menu').find('li').nth(2);
        this.iframe           = Selector('iframe');
        this.deferredOrdering = Selector('#submit_ordering');

        this.primaveraPizza = new PizzaForm('White Primavera', 'Large');
        this.vegetablePizza = new PizzaForm('Vegetable Special', 'Medium');
        this.orderInfo      = new OrderInfo();
        this.deliveryPage   = new DeliveryDetailsPage();
    }
}

let pageModel = new PageModel();

test(`Get a pizza`, async t => {
    await t
        .click(pageModel.orderOnline)

        .switchToIframe(pageModel.iframe);

    const deferredOrderingButton = await pageModel.deferredOrdering;

    if (deferredOrderingButton.exists)
        await t.click(deferredOrderingButton);

    await t
        .click(pageModel.primaveraPizza.form)
        .click(pageModel.primaveraPizza.sizeSelect)
        .click(pageModel.primaveraPizza.sizeOption)
        .click(pageModel.primaveraPizza.orderButton)
        .click(pageModel.primaveraPizza.additionNoButton)

        .expect(pageModel.orderInfo.items.count).eql(1)
        .expect(pageModel.orderInfo.itemTitle.textContent).contains('White Primavera')
        .expect(pageModel.orderInfo.itemDetail.textContent).contains('Large')
        .expect(pageModel.orderInfo.totalPrice.textContent).eql('17.80');

    // ClientFunction
    const getItemCount = ClientFunction(() => document.querySelector('#order').querySelectorAll('.order_item').length);

    let itemCount = await getItemCount();

    await t.expect(itemCount).eql(1);

    // eval
    itemCount = await t.eval(() => document.querySelector('#order').querySelectorAll('.order_item').length);

    await t.expect(itemCount).eql(1);

    await t
        .click(pageModel.vegetablePizza.form)
        .typeText(pageModel.vegetablePizza.quantityInput, '2', { replace: true })
        .click(pageModel.vegetablePizza.orderButton)

        .expect(pageModel.orderInfo.items.count).eql(2)
        .expect(pageModel.orderInfo.itemTitle.textContent).contains('White Primavera')
        .expect(pageModel.orderInfo.itemDetail.textContent).contains('Large')
        .expect(pageModel.orderInfo.itemTitle.nth(1).textContent).contains('Vegetable Special')
        .expect(pageModel.orderInfo.itemDetail.nth(1).textContent).contains('Medium')
        .expect(pageModel.orderInfo.totalPrice.textContent).eql('43.20');

    const laterButton = await pageModel.orderInfo.laterButton();

    if (laterButton.exists) {
        await t
            .click(laterButton)
            .click(pageModel.orderInfo.okButton);
    }

    await t
        .click(pageModel.orderInfo.checkoutButton)
        .click(pageModel.orderInfo.deliveryButton)

        .typeText(pageModel.deliveryPage.nameInput, 'Your Name')
        .typeText(pageModel.deliveryPage.phoneInput, '6094567879')
        .typeText(pageModel.deliveryPage.emailInput, 'your.email@corp')
        .typeText(pageModel.deliveryPage.addressInput, '6017 Summer Street Philadelphia')
        .typeText(pageModel.deliveryPage.zipInput, '19139')
        .click(pageModel.deliveryPage.cashLabel);

    //Push the button "Submit Order"
});