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

Question

我正在研究将 TestCafe 用作我的测试自动化框架，但在我的 AUT 上使用 Rendr 应用程序执行功能时，我遇到了一些障碍。使用 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 的更新：

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)

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

Can I use Testcafe to execute a Rendr App function?

automated-tests

e2e-testing

web-testing

testcafe

rendr