aria角色的输入元素与类型号

Question

元素：

<input
type="number"
placeholder="Duration"
aria-label="duration"
/>

测试：

const input = screen.getByRole('textbox', {
name: /duration/i,
});

当我将输入类型设置为"0"时；文本"；元素被找到，但当我将类型设置为"0"时；数字"；，它失败了。请说明对于类型为"的输入元素，什么是合适的角色；数字"；？

Answer 1

类型为number的input元素的角色是spinbutton。

所以你的代码应该是：

const input = screen.getByRole("spinbutton", {
name: /duration/i
});

通常情况下，当testing-library没有找到角色时，它会在测试失败后显示可能的角色，类似于以下内容：

Unable to find an accessible element with the role "textbox" and name `/duration/i`
Here are the accessible roles:
spinbutton:

或者，如果您仍有疑问，您可以在此处检查某些元素的可能角色(例如输入元素->隐式ARIA角色项)。