使用 Cypress 测试 Flutter 应用程序答案

【问题标题】：Testing Flutter apps with Cypress使用 Cypress 测试 Flutter 应用程序
【发布时间】：2020-02-28 22:57:59
【问题描述】：

是否可以使用 Cypress 框架而不是使用 Flutter 提供的内置测试组件来测试 Flutter 应用程序？如果是这样，如果我对 Cypress 很了解，那么两者对于 Flutter 测试的优缺点是什么？

【问题讨论】：

你有没有得到任何地方？你是如何解决 e2e 和 Flutter 的？
不……没什么新意 :)
干杯！测试驱动程序似乎还可以，但与柏树相差甚远。祝你好运！
这听起来是个好主意，并且可能可以消除flutter drive的一些警告
如果您的 Flutter 应用也可以作为 Web 版本运行，您可以使用 Cypress 对其进行测试。

【解决方案1】：

是的，从技术上讲，这是可能的。

这是基本颤振计数器应用程序通过的规范：

describe('Counter app', () => {
    beforeEach(() => {
      cy.visit('http://localhost:_example_port_/#/')
      cy.get('flt-semantics-placeholder').click({force: true})
    })
    it('Increments on button press', ()=>{
        cy.get(`[aria-label="0"]`)
        cy.get(`[aria-label="Increment"]`).click()
        cy.get(`[aria-label="1"]`)
    })
})

解释一下，如果你通过点击隐藏的 'flt-semantic-placeholder' 元素来启用语义，flutter 会添加一个由屏幕阅读器使用的语义层。带有工具提示和文本的小部件会自动分配 aria-labels，赛普拉斯可以使用这些标签来查找和单击元素。（您可以使用Semantics Widget 对这些标签进行更多控制。）

我发现这适用于画布渲染器，但是当我尝试在同一运行中运行多个测试用例时它崩溃了。因此，使用 html 渲染器，即运行 flutter 进行测试，如下所示：

flutter run -d chrome --web-renderer html --web-port 3443

好的，所以单击按钮非常简单。其他互动呢？

在字段中输入文本：

非常简单。见this example。

模拟滚动事件：

简而言之，还没有解决方案。见this markdown。

模拟拖放：

不太可能。见this markdown。

现在来说利弊...

优点：

Cypress 比 Flutter 提供的集成测试更加用户友好。能够轻松地热重载测试，并且能够点击并检查失败测试的实时状态是不错的功能。

缺点：

（还）不能模拟滚动或拖动。
Flutter web 的性能不太好，尤其是第一次加载需要很长时间。测试运行缓慢。
没有任何迹象表明 Flutter 团队或 Cypress 团队有任何计划支持使用 Cypress 测试 Flutter。
截至本文发布时，没有用于测试 Flutter 和 Cypress 的在线指南或文章。

另见：

【讨论】：