使用 Cypress 测试 Flutter 应用程序

Question

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

Answer 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 标签，Cypress 可以使用这些标签来查找和单击元素。（您可以使用语义小部件更好地控制这些标签。）

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

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

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

在字段中输入文本：

非常简单。请参阅此示例。

模拟滚动事件：

简而言之，目前还没有解决方案。请参阅此降价。

模拟拖放：

不见得。请参阅此降价。

现在来说说优点和缺点...

优点：

• Cypress 比 flutter 提供的集成测试更加用户友好。能够轻松地热重载测试，并能够单击并检查失败测试的实时状态，这些都是很好的功能。

缺点：

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

也可以看看：

• Flutter for Web 生成的标签 <flt-*> 是什么？
• https://www.didierboelens.com/2018/07/semantics/