我可以使用Testcafe执行Rendr App功能吗？

Question

我正在调查TestCafe作为我的测试自动化框架，我在使用我的AUT上的Rendr App执行函数方面遇到了一些绊脚石。使用Cypress.io，Protractor和Puppeteer等我可以运行相同的命令......所以我不太确定我在哪里遇到TestCafe。

基本上我正在尝试执行的是：window.App.get('currentUser').set('login_state', 'someLoginState');

柏

  cy.window().then((win) => {
    win.App.get('currentUser').set('login_state', 'someState');
  });

量角器

  function changeUserState() {
    App.get('currentUser').set('login_state', 'someState');
  }

  browser.executeScript(changeUserState);

木偶

  function changeUserState() {
    window.App.get('currentUser').set('login_state', 'someState');
  }

  await page.evaluate(changeUserState);

对于TestCafe，我试图使用：

const changeUserState = ClientFunction((desiredState) => {
    return App.get('currentUser').set('login_state', desiredState);
});

fixture `User states`
    .page(url)
    .afterEach( async t => {
        await t
            logout();
    });

test('Change a users log in state', async t => {

    await loginForm.loginViaUrl(userEmail, userPassword);
    await changeUserState('SomeState');
    await checkUserState('SomeState');  // Just an example of what I would do next
}

运行此时，它会抛出ReferenceError: App is not defined错误。

（我也使用'window.App.get ...'尝试了上述选项：TypeError: Cannot read property 'get' of undefined - 在调用ClientFunction之前添加等待不会影响结果）

更新根据注释，不应使用t.eval(...)选项，因为我正在访问客户端功能。

Answer 1

我认为问题与App变量未定义的事实有关。所以你应该等到它可用。您可以使用具有固定等待时间的等待操作，或使用以下选择器等待页面上出现元素：

await Selector('element that tells us that App exists')

UPD：在检查了您在your Github issue中提供的测试示例后，我们为您找到了解决方案。有必要等到App变量出现。在changeUserState函数调用之前添加以下代码：

// first case
const getPageUrl = ClientFunction(() => location.toString());

await t.expect(getPageUrl()).eql('https://www.change.org/', { timeout: 5000 });
// second case
const isAppExists = ClientFunction(() => !!window.App);

await t.expect(isAppExists()).ok({ timeout: 5000 });

来自GitHub comment的UPD：

import { Selector, ClientFunction } from 'testcafe';

fixture`Change User State`.page('www.change.org');

const isAppExists = ClientFunction(() => !!window.App);

const changeUserState = ClientFunction((desiredState) => {
    const initialState = App.get('currentUser').get('login_state');
    App.get('currentUser').set('login_state', desiredState);
    const currentState = App.get('currentUser').get('login_state');
    return { initialState, currentState };
});

test
    ('Start from homepage', async t => {
        await t
            .maximizeWindow()
            .navigateTo('/login_or_join')
            .typeText(Selector('#content input[type="email"]'), '*****')
            .typeText(Selector('#content input[type="password"]'), '*****')
            .click(Selector('#content input[type="submit"]'))
            .expect(isAppExists()).ok(); // wait for App

        console.log(await changeUserState('guest'));
});

结果：

Running tests in:
- Chrome 74.0.3729 / Windows 10.0.0

Change User State
{ initialState: 'authenticated', currentState: 'guest' }
 √ Start from homepage


 1 passed (15s)