剧作家-登录表单、输入和提交问题单击

Question

我想写这个网站的登录功能：

这是我的代码：

const { chromium, firefox, webkit } = require('playwright');
(async () => {
  const browser = await chromium.launch({ headless: false, slowMo: 50  });
  const context = await browser.newContext({
    userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36'
  });
  const page = await context.newPage();
  await page.goto('url');
  await page.type('input[name="userName"]', 'some@account');
  await page.type('input[name="password"]', 'somepassword');
  await page.click('text=Sign In');
  await page.waitForTimeout(2000);
  await context.close();
})();

我把无头：假，所以我可以看到是怎么回事，但输入值不填写和登录按钮没有点击，任何帮助？

Answer 1

我尝试了上面提到的一切，但第一次测试它没有正确登录。然而，从第二个测试用例来看，一切都很完美。我怀疑剧作家的测试是否有限制。我的问题是，每当我第一次运行测试用例时，它都会键入用户名。然后测试失败了，因为它无法进一步移动。然后，第二个测试用例加载浏览器，一切工作都很顺利。我正试图登录到这个网站https://login.microsoftonline.com/.

Answer 2

借助npx剧作家codegen，背负@hardkoded

这一步对我来说是最困难的，但这里有一些帮助。（不过，有些你可能已经在做了。）

• 如果您还没有使用codegen，请使用它编写一个测试，看看是否有效。一旦这样做了，你可以从那里扩展，使事情更加灵活。（如果需要，请考虑使用页面对象模型。）
• 不要使用input[name=“userName”]选择器，请确保此输入具有唯一的id。然后您可以执行`input[id=“userName”].
• 尝试通过可访问性测试程序运行您的页面，以帮助支持在需要时生成唯一的ID和名称（请参阅Axe Playwright，尽管它还不完美）。可访问性的一部分是确保元素有足够的唯一id或aria id。在页面上实现可访问性不仅可以让所有人都更容易使用，还可以让选择器在测试中更加严格。当您通过这些测试后再次运行codegen时，您甚至会看到差异。（如果您不想通过编程评估可访问性，也可以使用浏览器扩展来帮助您实现这一点。）事实上，当我运行npx codegen www.google.com查看他们的输入字段弹出的内容时，我得到：wait page.fill（“[aria label=“Search”]”，stackoverflow”） 。注意他们使用的选择器是一个aria标签，用于辅助功能
• 最后，我相信page.type（selector，value）和page.fill（selector，value）之间是有区别的。我使用page.fill（选择器，值）来填写我的表单，这对我来说很好。也许你也可以试着换一下，看看是否有帮助

Answer 3

使用'input[name=“userName”]选择器有三个元素。我敢打赌，您尝试键入的不是第一个。您可以尝试改进选择器。例如，像这样的“#signInFormPage输入[name=“userName”]”。