赛普拉斯自动化测试的架构和框架 [关闭]答案

【问题标题】：Architecture and Framework for Cypress Automation Testing [closed]赛普拉斯自动化测试的架构和框架 [关闭]
【发布时间】：2020-04-17 05:32:05
【问题描述】：

我是 cypress 的新手，并开始在 web 应用程序的 cypress 架构上实现自动化。考虑到 react Ui 和微服务 api 测试，任何人都可以推荐哪种测试架构和/或框架最适合使用吗？？

【问题讨论】：

标签： cypress

【解决方案1】：

框架无关紧要，您也不必使用微服务等。Cypress 是一种工具，无论您使用 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") 并分别在 foo 和 bar 的上下文中指定 baz。

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

我希望这足以让你开始一个好的结构

【讨论】：

【解决方案2】：

如果您正在与源代码隔离测试您的 React 应用程序或编写功能性 UI 测试用例，您可以考虑使用名为 cypress-react-selector 的赛普拉斯插件。即使在缩小之后，它也可以帮助您按组件、道具和状态识别 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 })

查找更多样例测试here

希望对您有所帮助！

【讨论】：