如何在 Playright 中单击“type=submit”按钮答案

【问题标题】：How to click a "type=submit" button in Playright如何在 Playright 中单击“type=submit”按钮
【发布时间】：2022-10-24 18:58:43
【问题描述】：

我尝试了任何可能的方法来单击表单中的“type=submit”按钮，但它没有单击该按钮，唯一的方法是使用“text = 'Register'”但我不能使用文本，因为表单语言可能会根据用户选择的 UI 语言而改变。

public Task ClickRegister() => Page.Locator("type=submit").ClickAsync();

这是FE代码：

<button _ngcontent-yyv-c173="" type="submit" class="btn btn-primary"> Register </button>

我正在使用 Visual Studio

【问题讨论】：

请提供足够的代码，以便其他人可以更好地理解或重现该问题。
你需要什么代码？
奇怪的问题：想点击提交按钮，但不提交表单？那没有意义！

标签： playwright playwright-dotnet

【解决方案1】：

这不是一个有效的选择器。你能试试BUTTON[type="submit"]之类的吗？

【讨论】：

【解决方案2】：

虽然可以使用类选择器来选择元素，但这不是一个好的模式。在 e2e 测试中，您应该只使用用户在定位交互式元素时可以使用的方式。

并且仅在针对非交互式元素时使用 testid 或其他形式的选择器（如类选择器）。

await page.getByRole('button', {name: 'Sign In'})

这将针对带有文本Sign In 的按钮

【讨论】：

【解决方案3】：

有几种方法可以解决这个问题，以下任何一种都可以：

button.btn（元素的组合按钮和部分类btn)
button.btn.btn-primary（元素和完整类的组合btn btn-primary)
button.btn-primary（元素和类的唯一部分的组合btn-primary)
button.btn.btn-primary[type="submit"]（元素、完整类和属性的组合类型)
.btn.btn-primary（只是完整的类）

如果您的页面右侧有“注册”按钮，左侧有“取消”按钮，横幅上有“接受”cookie 按钮，您的 CSS 选择器按钮[类型=提交]可能很脆弱，因此我建议使用完整类作为唯一标识符，例如button.btn-primary注册，或button.btn-primary.pull-left取消。此外，您可能会发现开发人员已将按钮放在 DOM 中分层的行类中，您可以利用它来使其不那么脆弱，例如.btn-row button.btn-primary.

您可以从W3Schools - CSS Selector Reference 获取有关 CSS 选择器组合的更多信息

【讨论】：

这也是一个很好的答案。谢谢你。是的，我是剧作家的新手，我正在尝试了解选择器的语法。可悲的是，我不是一个 CSS 专家，这给我带来了麻烦。有时我并不真正理解定位器（“”）中的sintax，比如这个例子，'button >> text=Submit'。为什么是那些“>>”？顺便说一句，谢谢，我去看看 W3School
没问题，先看看一些css课程，这可能会有所帮助，这里有一个例子testautomationu.applitools.com/web-element-locator-strategiesCSS你不需要像xpath那样使用人字形，CSS你可以跳过一半的DOM来到达你的位置需要。 F12 中的 HTML 然后您可以使用其中的任何一个，例如元素类型、ID（如果存在）、属性、类和其他任何东西。每个您引用的 ID 都不同，您使用 #IDname，属性您使用 [type="Submit]，Class 您使用 .classname 和元素，您只需将其声明为按钮。例如：
CSS = '#Login button.btn-primary[type="submit"]' 在 Login 的 ID 中，树中有一个 button 的元素，其类为 .btn-primary，属性为 type = "submit"