页面对象方法?

时间:2018-09-06 22:25:58

标签: javascript automated-tests e2e-testing testcafe

我无法设置页面对象正常工作。这可能是一个简单的语法问题,但我一直无法找到解决方案。我正在尝试做这样的事情:

测试:

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

文档中有关如何在page对象中使用方法的示例将非常有帮助!该页面似乎显示了如何设置该功能,但是没有相应的代码段显示如何在测试中实际使用它。

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

1 个答案:

答案 0 :(得分:2)

在billingPage类内部不知道“ t”对象。您需要将其传递给父测试的enterBillingInformation函数。这是完整的代码:

index.js

app.directive("myDirective", function() {
    return {
        scope: {
            //oneWay: "<?"
        },
        link: postLink
    };
    function postLink (scope, elem, attrs) {
        if (!attrs.oneWay) {
            scope.oneWay = defaultValue;
        } else {
            scope.$watch(attrs.oneWay, function(value) {
                scope.oneWay = value;
            });
        };
    }       
})

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

您可以了解有关TestCafe页面模型here的更多信息。