pizza-test.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)`;

test(`Get a pizza`, async t => {
    await t
        .click(Selector('#menu-primary-menu').find('li').nth(2))

        .switchToIframe('iframe');

    const deferredOrderingButton = await Selector('#submit_ordering');

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

    let pizzaForm    = Selector('form').withAttribute('data-item-name', 'White Primavera');
    const sizeSelect = pizzaForm.find('select[name="size"]');

    await t
        .click(pizzaForm)
        .click(sizeSelect)
        .click(sizeSelect.find('option').withText('Large'))
        .click(pizzaForm.find('button').withText('Add to Order'))
        .click('#upsell-no');

    const order             = Selector('#order');
    const orderItem         = order.find('.order_item');
    const orderItemTitle    = order.find('.order_item > h3');
    const orderItemDetail   = order.find('.order_item > .item-detail');
    const totalPriceElement = Selector('#order').withText('Subtotal').find('strong');

    await t
        .expect(orderItem.count).eql(1)
        .expect(orderItemTitle.textContent).contains('White Primavera')
        .expect(orderItemDetail.textContent).contains('Large')
        .expect(totalPriceElement.textContent).eql('17.80');

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

    let itemCount = await getItemCount();

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

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

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

    pizzaForm = Selector('form').withAttribute('data-item-name', 'Vegetable Special');

    await t
        .click(pizzaForm)
        .typeText(pizzaForm.find('input[name="quantity"]'), '2', { replace: true })
        .click(pizzaForm.find('button').withText('Add to Order'));

    await t
        .expect(orderItem.count).eql(2)

        .expect(orderItemTitle.textContent).contains('White Primavera')
        .expect(orderItemDetail.textContent).contains('Large')
        .expect(orderItemTitle.nth(1).textContent).contains('Vegetable Special')
        .expect(orderItemDetail.nth(1).textContent).contains('Medium')

        .expect(totalPriceElement.textContent).eql('43.20');

    const laterButton = await Selector('#ordering_for_later')();

    if (laterButton.exists) {
        await t
            .click(laterButton)
            .click(Selector('#ordering_for_later'));
    }

    await t
        .click('#order > .order-details > .submit-link')
        .click(Selector('#order > .order-details').find('button.type-delivery'))

        .typeText('#full_name', 'Your Name')
        .typeText('#phone', '6094567879')
        .typeText('#email', 'your.email@corp')
        .typeText('#address', '6017 Summer Street Philadelphia')
        .typeText('#zip', '19139')
        .click(Selector('label').withText('Cash'));

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