Question

我是cypress的新手，并开始针对Web应用程序使用cypress架构进行自动化。有人可以建议哪种测试架构和/或框架最适合与React Ui和微服务api测试一起使用吗？

Answer 1

该框架无关紧要，也不必使用微服务等。赛普拉斯是一种工具，无论您使用VueJS，Angular，原始html还是其他工具，都可以在UI中四处点击。总的来说，我建议对任何决定特定体系结构的框架都保持谨慎。

要开始使用，它有很多好处：https://docs.cypress.io/guides/references/best-practices.html。

另一条建议，因为他们建议使用data-cy属性来选择数据。不要让它们过于具体，而要建立层次结构。您始终可以执行cy.get("foo").find("baz")和cy.get("bar").find("baz")，并在baz和foo的上下文中分别指定bar。

另一个建议是使事情针对其目的，而不是其组成部分。举一个简单的例子，假设您有一个网上商店，可以在其中添加商品到购物篮。您添加到带有链接或按钮的购物篮是否重要？当然没有，所以data-cy="add-to-basket-button"或data-cy="add-to-basket-link"不好。取而代之的是data-cy="add-to-basket-action"或什至更好：data-cy="add-to-basket"（毕竟，名称的action部分是否提供了任何尚不清楚的信息？）。因此，要进行迭代，组件无关紧要，目的无所谓，关注需求并从解决方案中抽象出来。

我希望这足以使您开始建立一个良好的结构

Answer 2

如果您要与源代码隔离来测试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'))

然后您可以简单地识别出react元素，例如：

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

查找更多示例测试here

希望这会有所帮助！

赛普拉斯自动化测试的架构和框架

2 个答案: