1

我正在使用 Cypress 和Cypress 测试库来测试我的 React 应用程序。

我有一个输入名称（'Steve'）作为它的值，我试图用柏树找到它，如下所示：

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

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

但是赛普拉斯没有找到这个元素并且测试失败了。如果我将输入更改为 div：

<div>Steve</div>

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

4

3 回答 3

3

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

于 2019-03-13T08:32:48.560 回答
0

您可以在不安装反应组件的情况下识别元素。如果您正在与源代码隔离测试您的 React 应用程序或编写功能性 UI 测试用例，您可以考虑使用名为cypress-react-selector的赛普拉斯插件。即使在缩小之后，它也可以帮助您按组件、道具和状态识别 Web 元素。在这种情况下，您需要使用 React Dev Tool 来识别组件名称。

这是一个例子：

假设您的反应应用程序：

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');

在此处查找更多示例测试

希望它会有所帮助！

于 2020-05-09T15:05:07.437 回答
0

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

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

<div id='name'>XYZ</div>
document.getElementById('name').innertText will return you XYZ
于 2020-05-09T17:58:32.470 回答