Page Object Methods?

Question

I'm having trouble setting up my page object to work. It's probably a simple syntax problem, but I haven't been able to find a solution. I am trying to do something like this:

Test:

test('Verify that a user can update their billing profile', async (t) => {
  await t
    .billingPage.enterBillingInformation('4111111111111111')
    .click(billingPage.saveButton)
    .expect(billingPage.successMessage.exists).ok();
});

Page:

import { Selector, t } from 'testcafe';

export default class billingPage {
  constructor() {
    this.cardNameInput = Selector('#cc_name');
    this.cardNumberInput = Selector('#credit-card-number');
    this.saveButton = Selector('button').withText('Save Card');
    this.successMessage = Selector('div').withText('Your billing information has been successfully updated.');
  }

  async enterBillingInformation(cardNum) {
    await t
      .typeText(this.cardNameInput, 'Foo Bar')
      .typeText(this.cardNumberInput, cardNum)
  }
}

This was working when I had the function contents all within the test, but I want to write a second test with invalid credentials and, obvs, I want to reuse code (the actual function is way longer with many more fields). But I can't figure out what I'm doing wrong.

I get this error:

TypeError: Cannot read property 'enterBillingInformation' of undefined

An example in the docs of how to use methods in the page object would be really helpful! This page seems to show how to set up the function, but there is no corresponding code snippet to show how to actually use it in the test.

http://devexpress.github.io/testcafe/documentation/test-api/test-code-structure.html#test-controller

Answer 1

The "t" object is not known inside the billingPage class. You need to pass it to the enterBillingInformation function from the parent test. Here is complete code:

index.js

import { Selector, ClientFunction } from 'testcafe';
import BillingPage from './billingPage';

const billingPage = new BillingPage();

fixture `Getting Started`
    .page `Your page`;

test('Verify that a user can update their billing profile', async t => {
    await billingPage.enterBillingInformation("4111111111111111", t);  

    await t
        .click(billingPage.saveButton)
        .expect(billingPage.successMessage.exists).ok();  
});

billingPage.js

import { Selector } from 'testcafe';

export default class BillingPage {
    constructor () {
        this.cardNameInput = Selector('#cc_name');
        this.cardNumberInput = Selector('#credit-card-number');
        this.saveButton = Selector('button').withText('Save Card');
        this.successMessage = Selector('div').withText('Your billing information has been successfully updated.');  
    }

    async enterBillingInformation(cardNum, t) {
        await t
          .typeText(this.cardNameInput, 'Foo Bar')
          .typeText(this.cardNumberInput, cardNum)
    }
}

You can learn more about the TestCafe Page model here.