DOM 测试库：当表单 header 具有相同文本内容时选择按钮？

Question

我正在使用 DOM 测试库，而不是 React 测试库，但前者没有标签，所以我使用后者，因为这似乎是最接近的匹配项。希望没关系。

我有一个身份验证表单，其提交按钮包含文本 "Log in"，该页面还包含具有相同文本内容的标题：

如屏幕截图所示，我实际上已将标题更改为 "Admin Log In" 因为这（至少暂时）解决了问题。

我的测试如下：

import { getByPlaceholderText, getByText } from '@testing-library/testcafe';

const testHostname = process.env.TEST_HOST || 'https://redacted-qa-server';

fixture`Admin Auth`.page`${testHostname}/admin/`;

test('authentication works for a known account', async t => {
    await t
        .typeText(getByPlaceholderText('E-mail address'), username)
        .typeText(getByPlaceholderText('Your password'), password)
        .click(getByText('Log in'));

    const location = await t.eval(() => window.location);
    await t.expect(location.pathname).notContains('/login');
});

It's worth mentioning that both the heading and the submit button are currently using CSS to style the text as all-caps, but both are coded using the case "Log in".

通过更改标题内容以包含[=36=] 并在getByText 中使用exact-match 精度，此测试可以通过。但是，如果我不想在标题中包含 "Admin" 前缀怎么办？

我知道我可以使用像 getByText(/^log in$/i) 这样的正则表达式匹配来区分大小写但不允许子字符串，但这并不能解决 "I don't want to keep the admin prefix" 问题。

我知道我可以使用 getAllByText 来获取一组匹配项，并且可以简单地知道我想点击哪一个...但这似乎违背了 DOM 测试库。这个问题有好办法吗？

Answer 1

您可以使用 getByText(/log in/i, {selector: 'button'}) 到 select 登录按钮。

您可能还对 the upcoming name option 的 *ByRole 查询感兴趣。发布后，您还可以：getByRole('button', {name: /log in/i}).

考虑到两者之间的选择，我想我更喜欢 getByText。祝你好运！

DOM 测试库：当表单 header 具有相同文本内容时选择按钮？

DOM Testing Library: Selecting a button when form header has the same text content?

javascript

testing

react-testing-library