Flutter 测试 - 表单

Question

我已经尝试使用 flutter_test 和 flutter_driver 在 flutter 中进行测试。可以用tap函数实现UI测试。但我的要求是端到端测试表格（即自动填写表格）。面对 driver.enterText() 的问题，它没有被执行，测试用例从这里停止执行。

下面是我试过的代码：

test('Going back to customers tab', () async {
      // First, tap the button.
      final customerTabFinder = find.text('Customers');
      await driver.waitFor(customerTabFinder);
      await driver.tap(customerTabFinder);
      await driver.getText(find.text("Customer"));
      await takeScreenshot(driver, 'screenshots/incremented1.png');
    });

    test("Adding customers", () async {
      final pressAddCustomerButton = find.byTooltip("Increment");

      await driver.waitFor(pressAddCustomerButton);
      await driver.tap(pressAddCustomerButton);
      print("Add customer page is opened");
    });

    test("Adding text in textfield", () async {
      await driver.tap(find.byValueKey("CustomerBusinessName"));
      await sleep(Duration(seconds: 5));
      await driver.enterText('Hello !');

      await driver.tap(find.byValueKey("CustomerPhoneNumber"));
      await driver.enterText('1234567890');
    });

Answer 1

您首先需要告诉 driver 等到元素即 CustomerBusinessName textField 被定位，然后点击它然后直接输入文本。无需在点击和输入文本操作之间等待或休眠 5 秒，因为驱动程序首先需要定位元素，然后对其执行操作。我尝试渲染两个 TextFields 并且能够在它们中正确输入文本。这是工作示例代码：

main.dart:

body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Form(
                  key: Key('inputTextField'),
                  child: TextField(
                    decoration: InputDecoration(
                        hintText: 'Enter name'
                    ),
                  )
              ),
              Form(
                  key: Key('inputTextField1'),
                  child: TextField(
                    decoration: InputDecoration(
                        hintText: 'Enter phone'
                    ),
                  )
              )
            ],
          )
        )

driver test:

test('enter text', () async {
    final formFinder = find.byValueKey('inputTextField');
    final formFinder1 = find.byValueKey('inputTextField1');

    await driver.waitFor(formFinder);
    await driver.tap(formFinder);
    await driver.enterText('Hello');
    print('entered text');

    await driver.waitFor(formFinder1);
    await driver.tap(formFinder1);
    await driver.enterText('123456');
    print('entered number');
  });

测试结果：

希望这能回答您的问题。

Answer 2

现在你应该稍微改变一下这个问题。您可以使用测试器来创建元素并与之交互。 Docs

await tester.pumpWidget(testWidget);
await tester.enterText(find.byKey(Key("titleInput")), "title");

Flutter 测试 - 表单

Flutter testing - forms

flutter-test