Question

我正在使用 TestCafe ，但无法实现此行为：

使用Role机制登录我的网站
检查条件：
- 网址更改 OR
- 出现错误消息

我知道如何使用ClientFunction获取当前网址，并使用Selector检查元素的可见性，但是我不知道如何将两者混在一起。

有可能吗？

基于NoriSte的回答（谢谢！），这是一个根据我的用例改编的工作示例。我没有发现它既不优雅也不可扩展（如果要对更多条件进行OR操作，该怎么做）。

AuthPage.js

import { Selector, t, Role, ClientFunction } from "testcafe"

const url = 'http://localhost:8081'
const loginUrl = `${url}/login`;
const logoutUrl = `${url}/logout`;

const loginInput = Selector('[data-qa="login input"]');
const passwordInput = Selector('[data-qa="password input"]');
const submitButton = Selector('[data-qa="submit button"]')
const loginError = Selector('[data-qa="login error"]');

const getLocation = ClientFunction(() => document.location.href.toString());

const login = (username, password) => async tt =>
  await tt
    .typeText(loginInput, username)
    .pressKey('tab')
    .typeText(passwordInput, password)
    .click(submitButton);

export default class AuthPage {
  constructor () {
    this.roles = {
      // 'almighty god': Role(loginUrl, login('filou', 'filoucfou')),
      // 'bad mutafuka': Role(loginUrl, login('badbadbad', 'password'))
      // Can't use Role, don't know why ?!
      'almighty god': login('gooood', 'password'),
      'bad mutafuka': login('badbadbad', 'password')
    }
  }

  async loginWith (roleName) {
    const oldUrl = await getLocation();

    // await t
    //   .useRole(this.roles[roleName]);
    // Does weird thing, not what i would expect
    await this.roles[roleName](t)
    if (await loginError.with({ timeout: 5000, visibilityCheck: true }).exists) {
      console.log('login error:', oldUrl)
      return {url: oldUrl, login: false};
    }

    await t
      .wait(10000);

    const newUrl = await getLocation()
    return {url: newUrl, login: oldUrl !== newUrl};
  }
}

test.js

import LoginPage from 'AuthPage'

fixture `sinoc-fixture`
  .page `http://localhost:8081`;

const loginPage = new LoginPage()

test('Login with wrong credentials should fail', async (t) => {
  const result = await loginPage.loginWith('bad mutafuka')
  await t
    .expect(result.login === false).ok()
});

test('Login with good credentials should succeed', async (t) => {
  const result = await loginPage.loginWith('almighty god')
  await t
    .expect(result.login === true)
    .ok()
    .expect(result.url)
    .contains('/dashboard');
});

Answer 1

我最后得到了ClientFunction，并调查了2个条件：

const getLocationAndError = ClientFunction(({url}) => {
  return new Promise(resolve => {
    (function polling() {
      const errorModal = document.querySelector('[data-qa="login error"]');
      const newUrl = document.location.href.toString();
      const navigated = newUrl !== url;
      if (errorModal || navigated) {
        resolve({navigated, loginError: !!errorModal, url: newUrl});
      } else {
        setTimeout(polling, 200);
      }
    })();
  });
});

等待两个条件，直到成功

1 个答案: