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

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

我输入了 headless: false 这样我就可以看到发生了什么，但是输入值没有填写并且没有点击登录按钮，有什么帮助吗？

Answer 1

'input[name="userName"]' 选择器包含三个元素。我敢打赌您要输入的不是第一个。
您可以尝试改进您的选择器。例如，像这样 '#signInFormPage input[name="userName"]'.

Answer 2

搭载 @hardkoded，使用来自 Playwright 的 npx playwright codegen <replaceWithSomeURLHere> 并不总是创建最灵活的选择器。（当你有一个动态页面时，这个特性很重要，例如带有填充行的 table。同一个选择器不会一直工作，因为 table 本身会处于不同的状态，具体取决于在用户的特定操作序列上。）使用此工具创建用户故事只会为该特定操作序列生成选择器 - 网页的特定状态。因此，最好确保您选择的是唯一选择器。

这一步对我来说是最困难的部分，但以下是对我有帮助的部分。（尽管有些您可能已经在做。）

如果您还没有使用 codegen，请使用它编写一个测试以查看它是否有效。一旦完成，您可以从那里进行扩展，使事情变得更加灵活。 (Consider using a page object model when you do.)
不要使用 input[name="userName"] 选择器，而是确保此输入具有唯一 ID。然后你可以做 `input[id="userName"].
尝试运行通过可访问性测试器调整您的页面，以帮助支持在需要时制作唯一的 ID 和名称，(see Axe-Playwright -- although it's not perfect yet)。可访问性的一部分是确保您的元素有足够的唯一 id 或 aria id。在您的页面上实现可访问性不仅可以使它对所有人更有用，而且还可以使您的选择器在测试中更加严格。通过这些测试后，当您再次运行 codegen 时，您甚至会看到不同之处。（如果您不想以编程方式评估可访问性，也可以使用浏览器扩展来帮助解决此问题。）事实上，当我运行 npx codegen www.google.com 查看他们的输入字段弹出的内容时，我得到： await page.fill('[aria-label="Search"]', 'Whosebug');。请注意他们使用的选择器是一个 aria-label，用于辅助功能！
最后，我认为page.type(selector, value) and page.fill(selector, value)是有区别的。我使用 page.fill(selector, value) 来填写我的表格，这对我来说效果很好。也许也尝试切换到那个，看看它是否有帮助。

Answer 3

我尝试了上面提到的所有方法，但是第一次测试它没有正确登录。然而，从第二个测试用例开始，一切都完美无缺。我怀疑在 Playwright 中添加的测试是否有任何限制。我的问题是，每当我运行第一次测试用例时，它都不会输入用户名失败。然后测试失败，因为它无法进一步移动。然后第二个测试用例加载浏览器，一切顺利。我正在尝试登录此 https://login.microsoftonline.com/.

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

playwright - issues with login form, inputs and submit click

javascript

webautomation

playwright