寻求适用于Web部署Flutter应用的UI自动化测试框架

1. 官方Integration Test方案（推荐） #

基于Flutter官方集成测试框架，无需处理flt-glass-pane这类内部DOM结构，兼容性和稳定性拉满。

• 可在独立代码库中创建轻量Flutter项目，专门编写Web测试用例
• 核心思路是通过WebDriver连接已部署的应用地址，直接操作Flutter组件
• 示例代码：

  import 'package:integration_test/integration_test.dart';
  import 'package:test/test.dart';
  import 'package:webdriver/io.dart';
  
  void main() {
    IntegrationTestWidgetsFlutterBinding.ensureInitialized();
  
    test('完成登录流程', () async {
      final driver = await createDriver(uri: Uri.parse('http://你的部署地址'));
      // 通过自定义测试属性定位元素
      await driver.findElement(By.cssSelector('[data-test-id="username-input"]')).sendKeys('测试用户');
      await driver.findElement(By.cssSelector('[data-test-id="login-btn"]')).click();
      // 断言登录成功后的页面元素
      expect(await driver.findElement(By.cssSelector('[data-test-id="welcome-text"]')), isNotNull);
      await driver.quit();
    });
  }
  

• 运行命令：flutter drive --target=test/integration_test/web_test.dart --driver=test_driver/integration_test.dart --browser=chrome

2. 自定义测试属性 + Playwright/Puppeteer #

解决定位不稳定的核心是让Flutter暴露可被测试工具识别的明确标识，而非穿透内部DOM：

• 在Flutter组件中添加自定义测试标识：

  // 方式1：使用Key，Flutter Web会自动转为data-key属性
  ElevatedButton(
    key: const Key('login-btn'),
    child: const Text('登录'),
    onPressed: () => _handleLogin(),
  )
  
  // 方式2：添加自定义HTML属性（需配合Semantics）
  Semantics(
    attributes: const {'data-test-id': 'username-input'},
    child: TextField(...),
  )
  

• 在Playwright中直接通过这些标识定位，完全避开flt-glass-pane：

  const { test, expect } = require('@playwright/test');
  
  test('验证登录功能', async ({ page }) => {
    await page.goto('http://你的部署地址');
    await page.locator('[data-test-id="username-input"]').fill('测试用户');
    await page.locator('[data-key="login-btn"]').click();
    await expect(page.locator('[data-test-id="welcome-text"]')).toBeVisible();
  });
  

3. 复用Codecept.js + WebDriver（适配Flutter Web） #

既然你已经用Codecept.js做移动端测试，直接复用这套技术栈，降低学习成本：

• 配置Codecept.js使用WebDriver，指向已部署的Flutter Web地址
• 测试脚本中通过自定义测试属性定位元素，示例：

  Feature('Flutter Web 登录测试');
  
  Scenario('用户登录验证', async ({ I }) => {
    I.amOnPage('http://你的部署地址');
    I.fillField('[data-test-id="username-input"]', '测试用户');
    I.click('[data-key="login-btn"]');
    I.see('欢迎回来');
  });
  

关键注意事项 #

• 绝对不要直接定位Flutter生成的内部DOM元素（如flt-glass-pane、flt-widget），这些结构会随Flutter版本变更，导致测试失效
• 所有需要交互的组件都要添加明确的测试标识（Key、自定义属性等），这是Flutter Web自动化测试的核心原则
• 如需处理拖拽、滑动等手势，优先使用官方Integration Test的手势API，或Playwright的原生手势方法，配合正确的元素定位

内容的提问来源于stack exchange，提问作者A. Petrizza