javascript - 页面对象方法？

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 函数。完整代码如下:

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 页面模型的更多信息 here .