小编Ale*_*kin的帖子

我正在尝试在gitlab的CI管道中运行端到端测试（使用testcafe）。但是我遇到以下错误：

ERROR The Firefox 52.0.0 / Linux 0.0.0 browser disconnected. This problem may appear when a browser hangs or is closed, or due to network issues.

我的.gitlab-ci.yml如下：

stages:
  - test

before_script:
    - apt-get update -yqqq
    - apt-get install -y xvfb
    - apt-get install iceweasel -yqq
    - Xvfb :99 -ac &
    - export DISPLAY=:99

test-frontend:  
  image: node:7.7.4
  stage: test
  script: 
    - npm install
    - npm install -g testcafe@0.19.2
    - testcafe --list-browsers
    - testcafe firefox e2etests/tests/login.test.js
  tags:
    - vue

因此，基本上，我将节点docker映像用于测试“阶段”并安装xvfb以“显示”浏览器。

输出ci gitlab： …

我正在尝试运行我的第一个 testcafe 测试，但它被证明是艰巨的。

testcafe -e chrome client/routes/Lookup/components/testcafe/lookup-test.js

SyntaxError: client/routes/Lookup/components/Lookup.js: Unexpected token (60:8)
  58 |     if (error.status && error.status !== 404) {
  59 |       return (
> 60 |         <NetworkIssues code={error.status} />
     |         ^
  61 |       );
  62 |     }
  63 |
at Object.<anonymous> (client/routes/Lookup/components/testcafe/lookup-test.js:1:1)

查找-test.js

import Lookup from '../Lookup';
import React from 'react';
import { waitForReact } from 'testcafe-react-selectors';


fixture('Lookup Component').page('http://localhost:3000/web/lookup').beforeEach(async () => {
  await waitForReact();
});

test('foo', async (x) => {
  await x
    .typeText('customerName', '07450118811')
    .expect('customerName.value').contains('07450118811');
});

我的代码没有任何错误。它编译并运行良好，并通过了我所有的笑话和酶单元测试。但是我在网上找不到任何有关此的指导。如您所见，忽略错误标志无效。

干杯。

用于如下用途

test(testName, async (t) => {
  const ua = await getUA()

  await t.takeScreenshot(
    fixtureName +
      "/" +
      testName +
      "/" +
      identifyUserAgent(ua) +
      "/" +
      "scsh_1.png",
  )
...

从 testcafe@0.21.1 开始，我的解决方法是

const fixtureName = "Index_Page_Test"

fixture(fixtureName).page(...)

...

const testName = "dom_has_critical_elements"

test(testName, async (t) => {
...

但更愿意在 t 上提供它。我错过了什么吗？

我有一个<select>带有几个<option>标签的。其中一些可以通过使用“is-disabled”类来禁用。我想要做的是选择列表中的第一个可用选项。为此，我使用了在 testcafe 网站上找到的示例（https://devexpress.github.io/testcafe/documentation/recipes/testing-select-elements.html），但我似乎无法让它工作。

运行测试时，该工具会单击一次选择，然后再单击一次，然后关闭。此后，不再选择任何值。

有没有更好的方法来处理选项的动态选择？或者什么是更好的解决方案？任何帮助将不胜感激！

问候康奈尔

SizeSelector component:

import {t, Selector} from 'testcafe';

class SizeSelector {

  constructor() {
    this._sizeSelector = Selector('.sizeSelectionGroup');
    this._selectors = this._sizeSelector.child('.productSizeSelection');
    this._widthSelector = this._selectors.nth(0);

    // todo other size types (single numeric/text)
  }

  // todo refactor
  async setFirstAvailableWidth() {
    const options = this._widthSelector.find('option'); // contains 13 elements while debugging
    const availableOptions = options.filter(node => {
      return !node.classList.contains('is-disabled');
    });

    const count = await availableOptions.count; // contains around 8 elements while debugging
    if (count …

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

测试：

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)
  }
}

当我在测试中拥有所有函数内容时，这是有效的，但我想用无效的凭据编写第二个测试，而且，obvs，我想重用代码（实际函数更长，有更多字段）。但我无法弄清楚我做错了什么。

我收到此错误：

TypeError: Cannot read property 'enterBillingInformation' of undefined

文档中有关如何在页面对象中使用方法的示例将非常有帮助！这个页面似乎展示了如何设置该功能，但没有相应的代码片段来展示如何在测试中实际使用它。

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

我正在开发一个对外部资源进行大量调用的遗留应用程序。我正在尝试重构这个应用程序，并且我编写了testcafe测试来帮助我在犯错时通知我。我没有用 运行我的测试--skip-js-errors，但是当我收到 404 错误并且控制台打印出来时：

测试不会停止。我希望像这样的错误成为我被告知的事情。 如何使 4xx 和 5xx 网络响应失败 testcafe？ 如果这很重要，我将使用 angular 1.2。如果可以，我会更改所有远程调用以在 4xx 或 5xx 上抛出异常，但这是我不理解的遗留代码，我确信这样做会破坏功能。

如何从单个TestCafe CLI命令运行两个或多个测试.

-t"测试名称"只接受一个测试名称.

https://devexpress.github.io/testcafe/documentation/using-testcafe/command-line-interface.html#-t-name---test-name

需求:

想要在.js文件中的80个可用中运行选定的10个测试.

是否有任何特定的命令或模式？

我被赋予了使用testcafe构建测试服的任务,并且在我编写测试时,我偶然发现了一个特定问题"多少断言太多了？".基本上,在测试完成后,会生成一个报告.查看报告并不直观.例如,如果在网页上找不到元素,我会看到如下内容:

>Selector('tads') does not exist in the DOM. 

这迫使我手动完成测试以验证失败的原因.

根据testcafe文档,您可以向断言添加可选消息.如此处所见

截至目前,我在一些地方发布了一些消息.在每次点击或每次操作后都有一个断言(带有简明的错误信息)是否明智？(即单击登录按钮,执行断言以查看登录模式是否出现.现在登录,断言登录模式消失)

代码看起来像这样:

await t.click(this.loginButton);
await t.expect(this.loginButton.exists).ok("I don’t see the login button");

await signup.newUserSignUp();
await t.expect(this.loginButton.exists).notOk("The login modal didn’t disappear"); 

任何反馈都会很棒.

在文本字段中输入文本将向后输入

这在Safari中不会发生，并且过去也不会发生。没有进行任何更改应导致此。

TestCafe 1.2.0 NPM 6.9.0

导出异步函数logInMyAccount（emailElement，userEmail，passElement，userPassword，按钮）{等待t .typeText（Selector（emailElement），userEmail，{startPos：0}）.typeText（Selector（passElement），userPassword）.click（Selector（button ））; }

等待funct.logInMyAccount（'＃username'，active.email，'#userpass'，active.password，'#signIn'）;

应该将电子邮件输入为：active@mysite.com实际输入的电子邮件：moc.etisym@evitca

我有以下场景：

• 加载页面
• 期望微调器是隐藏的
• 输入用户名点击搜索
• 期待微调显示
• 延迟几秒钟后，预计微调器会隐藏
• 断言显示正确的用户详细信息

这是工作演示

我在我的测试规范中模拟了网络请求，但我无法理解在单击搜索按钮后如何断言微调器可见

这是我的测试规范：

    import {Selector, RequestMock} from "testcafe";
   import mockUser from "../mocks/mockUser.json";

var apiMocks = RequestMock()
  .onRequestTo(/\/api\/users/)
  .respond(mockUser, 200, {
    'access-control-allow-credentials': "*",
    'access-control-allow-origin': "*"
  })
fixture `When a user is searched`
  .page(`http://localhost:3000/`)
  .requestHooks(apiMocks);

test("Should fetch user details", async t => {
  const spinnerEl = Selector("[data-test-id='spinner']");

  await t.expect(spinnerEl.exists).notOk();

  await t
    .typeText("[data-test-id='txt-search']", "foo")
    .click("[data-test-id='btn-search']");
   // This line does not work
  // await t.expect(spinnerEl.exists).ok();
  await t.expect(Selector("[data-test-id='username']").innerText).eql("Foo Bar");
  await t.expect(Selector("[data-test-id='userid']").innerText).eql("foo");
})

我是 TestCafe 的新手，有人可以帮我解决这个问题。

谢谢！