Cypress + Dom 测试库：getByText 找不到输入值

Question

我正在使用带有 Cypress Testing Library 的 Cypress 来测试我的 React 应用程序。

我有一个以名称 ('Steve') 作为值的输入，我正在尝试使用 cypress 查找它，如下所示：

// In the component:
<input defaultValue="steve" />

// In the spec file:
cy.getByText(/steve/i).should('exist');

但是Cypress没有找到这个元素，测试失败。如果我将输入更改为 div:

<div>Steve</div>

有效（但我需要渲染输入）。赛普拉斯（和 Dom 测试库）如何找到输入的值？

Answer 1

我找到了答案。 getByText() 找不到 <input /> 的值。 getByDisplayValue() 确实如此。我不喜欢那样，因为这使得它有点依赖于实现细节，但至少这修复了测试。

Answer 2

无需挂载react组件即可识别元素。如果您正在与源代码隔离测试您的 React 应用程序或编写功能性 UI 测试用例，您可以考虑一个名为 cypress-react-selector 的 Cypress 插件。它可以帮助您通过组件、道具和状态识别 Web 元素，即使在缩小之后也是如此。在这种情况下，您需要使用 React Dev Tool 来识别组件名称。

这是一个例子：

假设你的 React 应用：

const MyComponent = ({ someBooleanProp }) => (
  <div>My Component {someBooleanProp ? 'show this' : ''} </div>
)

const App = () => (
  <div id='root'>
    <MyComponent />
    <MyComponent someBooleanProp={true} />
  </div>
)

ReactDOM.render(<App />, document.getElementById('root'))

然后你可以像这样简单地识别反应元素：

cy.react('MyComponent', { someBooleanProp: true })

因此，您可以尝试以下方法：

cy.react('Input',{defaultValue:"steve"}).should('exist');

查找更多示例测试here

希望对您有所帮助！

Answer 3

因为 getByText() 方法始终 returns innerText 的值，这就是为什么当您指定 <div defaultvalue='XYZ'/> 时，它不起作用。

您也可以在 DevTools 控制台中查看...

<div id='name'>XYZ</div>
document.getElementById('name').innertText will return you XYZ

Cypress + Dom 测试库：getByText 找不到输入值

Cypress + Dom Testing Library: getByText does not find input's value

reactjs

e2e-testing

cypress

cypress-testing-library