页面对象方法？

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

当我在测试中拥有所有函数内容时，这是有效的，但我想用无效的凭据编写第二个测试，而且，obvs，我想重用代码（实际函数更长，有更多字段）。但我无法弄清楚我做错了什么。

我收到此错误：

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 函数。这是完整的代码：

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

计费页面.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 Page 模型的更多信息。