通过匿名自执行函数调用 Testcafe 't'处理程序

Question

我有一个情况，我想使用调用t测试处理程序与test()函数之外可用的t.ctx上下文。这可能吗?从我运行这个脚本时看到的情况来看，我确实看到控制台向我输出了所有可用的处理程序选项，但是试图创建一个空的用户表单t.ctx.userForm = {}会抛出错误:

Cannot implicitly resolve the test run in the context of which the test controller action should be executed. Use test function's 't' argument instead.

import { t } from 'Testcafe';
const setFormContext = (t) => {
console.log(t);
t.ctx.userForm = {};
};
export const intializeEmptyForm = (async(t) => {
await setFormContext(t)
})(t);

我基本上希望能够有这样的代码，但没有过度膨胀的POM AccountPage对象与自定义函数无关的页面上的东西，或者依靠像firstName这样的东西被调用，以便使t.ctx.userForm可用。

export const AccountPage = {
enterFirstName: async (firstName) => {
let firstNameField = Selector('#firstName');
await t.typeText(firstNameField, firstName);
// t.ctx.userForm = {}; <- ideally not here as it's tied to enterFirstName
t.ctx.userForm.firstName = firstName;
},
enterLastName: async (lastName) => {
let lastNameField = Selector('#lastName');
await t.typeText(lastNameField, lastName);
t.ctx.userForm.lastName = lastName;
}
// ... some logic that maps t.ctx.userForm values to an assertion that checks all form values after clicking 'Save' are actually present.
}

import { AccountPage } from 'AccountPage';
...
test('User form successfully saves and updates correctly', async () => {
await AccountPage.enterFirstName('First');
await AccountPage.enterLastName('Last');
await AccountPage.clickSave()
})

Answer 1

import {t} from 'testcafe'语句在调用堆栈中查找test(),beforeEach(),afterEach()或其他测试函数，并从其参数中获取t实例。当导入的t在没有从测试或钩子调用的函数中使用时，会发生此错误。这就是在您的例子中发生的情况，因为在initializeEmptyForm中导出承诺的箭头函数是自调用的。

作为一种解决方案，您可以在initializeEmptyForm中导出一个函数(不是承诺)，并从测试上下文中调用它。

helper.js

import { t } from 'testcafe';
export const initializeEmptyForm = async () => {
await setFormContext(t);
};

. js

import { initializeEmptyForm } from './helper.js';
fixture 'fixture 1'
.beforeEach(async t => {
await initializeEmptyForm();
});
test('test 1', async t => {
// ...
});

或者，您可以导出一个以t作为参数的函数:

helper.js

export const initializeEmptyForm = async t => {
await setFormContext(t);
};

. js

import { initializeEmptyForm } from './helper.js';
fixture 'fixture 1'
.beforeEach(async t => {
await initializeEmptyForm(t);
});
test('test 1', async t => {
// ...
});

Answer 2

我的想法是，当访问带有单击操作的表单时，将其作为单击操作的一部分可能会更干净。

import { Selector, t } from 'testcafe';
export const AccountPage = {
clickEditForm: async () => {
let editButton = Selector('button').withText('Edit');
await t.click(editButton);

// guarantees on a click form we have setup the userForm object;
t.ctx.userForm = {};
}, 
enterFirstName: async (firstName) => {
let firstNameField = Selector('#firstName');
await t.typeText(firstNameField, firstName);
t.ctx.userForm.firstName = firstName;
},
enterLastName: async (lastName) => {
let lastNameField = Selector('#lastName');
await t.typeText(lastNameField, lastName);
t.ctx.userForm.lastName = lastName;
}
// map t.ctx.userForm values to assertions that checks all form values after clicking 'Save'.
verifyAccountFormDetails: async(expectFormValue = []) => {
// Grab form values
// Then map them to parameters desired or something.
}
}

这允许我们用POM以更清晰的方式传递值。

import { AccountPage } from 'AccountPage';
...
test('User form successfully saves and updates correctly', async () => {
await AccountPage.enterFirstName('First');
await AccountPage.enterLastName('Last');
await AccountPage.clickSave();
...
// After doing something like account form save then verify values 
persist based on what you want to check
await AccountPage.verifyAccountFormDetails(['firstName', 'email'])
})