Методы объекта страницы?

Question

У меня проблемы с настройкой объекта моей страницы для работы. Вероятно, это простая проблема с синтаксисом, но я не смог найти решение. Я пытаюсь сделать что-то вроде этого:

Тест:

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();
});

Страница:

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)
  }
}

Это работало, когда у меня было все содержимое функции в тесте, но я хочу написать второй тест с недействительными учетными данными и, я хочу повторно использовать код (фактическая функция намного длиннее с большим количеством полей). Но я не могу понять, что я делаю неправильно.

Я получаю эту ошибку:

TypeError: Cannot read property 'enterBillingInformation' of undefined

Пример из документации о том, как использовать методы в объекте страницы, был бы очень полезен! Эта страница, кажется, показывает, как настроить функцию, но нет соответствующего фрагмента кода, который бы показал, как на самом деле использовать его в тесте.

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

Answer 1

Объект "t" не известен внутри класса billingPage. Вам нужно передать его в функцию enterBillingInformation из родительского теста. Вот полный код:

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)
    }
}

Подробнее о модели страницы TestCafe можно узнать здесь .