如何在 testcafe 上使用 id 获取元素答案

【问题标题】：how to get an element using id on testcafe如何在 testcafe 上使用 id 获取元素
【发布时间】：2019-12-25 18:20:30
【问题描述】：

我有这个 HTML 代码

<form>
  <div class="form-group">
    <label for="name">Username</label
    ><input
      class="form-control"
      type="text"
      id="username"
      name="username"
      value=""
    />
  </div>
  <div class="form-group">
    <label for="name">Password</label
    ><input
      class="form-control"
      type="password"
      id="password"
      name="password"
      value=""
   />
  </div>
  <button type="submit" class="btn btn-primary" disabled="">Login</button>
</form>

我有这个 testcafe 代码来测试这个页面

import { Selector } from "testcafe";
fixture("First Test").page("http://localhost:3000/login");

test("Login Test", async t => {
  const username = await Selector("#username");
  const password = await Selector("#password");
  const loginButton = await Selector("login-button");
  await t
    .typeText(username, "test.email@gmail.com")
    .typeText(password, "testpassword")
    .click(loginButton);
});

问题是出现此错误

 × Login Test

  1) The specified selector does not match any element in the DOM tree.

   > | Selector('#username')

我知道这是一件非常简单的事情，但由于某种原因它对我不起作用，我查看了文档并正在尝试文档中的内容，但我似乎无法使用 id 获取元素。我是 testcafe 的新手，所以请帮帮我。

【问题讨论】：

您发布的代码与您正在运行的代码完全相同吗？用户名和密码已找到/对我来说正常工作。
所以我再次查看了错误，我的问题是当我尝试向其中添加文本时。此时代码“await t.typeText(username, "test.email@gmail.com")”
嗯，是的，我复制了您的示例，并且它在我这边运行良好。如果您手动转到http://localhost:3000/login，您可以按预期看到字段和提交按钮？

标签： testing css-selectors automated-tests e2e-testing testcafe

【解决方案1】：

这也发生在我身上，我知道这不是解决它的更好方法，但它对我有用。这是我使用的：

const input = Selector('input').withAttribute('id','idValue')

希望这也适用于您！ :)

【讨论】：

【解决方案2】：

您不必在为选择器创建变量时添加await

fixture("First Test").page("http://localhost:3000/login");

test("Login Test", async t => {
  const username = Selector("#username");
  const password = Selector("#password");
  const loginButton = Selector("login-button");
  await t
    .typeText(username, "test.email@gmail.com")
    .typeText(password, "testpassword")
    .click(loginButton);
});

【讨论】：