testing - 如何在 testcafe 上使用 id 获取元素

Question

我有这个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 的新手，所以请帮助我。

Answer 1

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

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

希望这也适用于您! :)