在 Flutter 中使用 Flutter Driver 对 OTPTextField 小部件进行集成测试答案

【问题标题】：Integration testing using Flutter Driver for OTPTextField widget in flutter在 Flutter 中使用 Flutter Driver 对 OTPTextField 小部件进行集成测试
【发布时间】：2021-11-13 00:30:23
【问题描述】：

我正在尝试使用颤振驱动程序进行集成测试。我正在使用 await driver.enterText(find.byType('OTPTextField')) 使用颤振驱动程序输入 otp。但它卡在那个屏幕上并且什么都不做，并且在终止错误后测试失败。 OTPTextField 小部件的 UI 类型与普通文本字段不同。我不确定 enterText 函数是否可以在此工作。如果没有，有什么替代方案？

这是我的 OTPTextField 小部件代码：

OTPTextField(
                key: const Key('otpvalue'),
                length: 6,
                textFieldAlignment: MainAxisAlignment.spaceAround,
                fieldWidth: 30,
                fieldStyle: FieldStyle.underline,
                width: MediaQuery.of(context).size.width / 2,
                style: TextStyle(
                    fontSize: 17,
                    color: Colors.black,
                    fontWeight: FontWeight.bold),
                onCompleted: (pin) async {
                  print("Completed: " + pin);
                  print(_user.status);
                  if (_user.status == Status.VerifyingOTP ||
                      _user.status == Status.VerifiedOTP) {
                    Navigator.of(context).push(
                        MaterialPageRoute(builder: (_) => LoaderScreen()));
                      return;
                  }
                  if (widget.isSignup) {
                    if (await _user.signUpWithPhoneNumber(
                      pin.toString(),
                      context,
                      email: widget.emailId,
                      firstName: widget.firstName,
                      lastName: widget.lastName,
                    )) {
                      Navigator.of(context).pushReplacement(
                          MaterialPageRoute(
                              builder: (context) => OtpVerified()));
                    } else {
                      Navigator.of(context).push(
                          MaterialPageRoute(
                              builder: (context) => LoaderScreen()));
                    }
                  } else {
                    if (await _user.signInWithPhoneNumber(
                        pin.toString(), context, _user.language, _user.country)) {
                      Navigator.of(context).pushReplacement(
                          MaterialPageRoute(
                              builder: (context) => OtpVerified()));
                    } else {
                      Navigator.of(context).push(
                          MaterialPageRoute(
                              builder: (context) => LoaderScreen()));
                    }
                  }
                },
              ),

这是我为这个小部件尝试的集成测试代码。

test('enter otp', () async {
 SerializableFinder enterotp = find.byValueKey('otpvalue');
  await driver.tap(enterotp);
  await driver.enterText('123456');
  expect(await driver.getText(enterotp), "123456");
});

【问题讨论】：

标签： flutter dart integration-testing flutter-test flutterdriver

【解决方案1】：

也许有一些动画正在发生并阻止驱动程序找到小部件，为此尝试解决方案 1。如果它不起作用，请尝试解决方案 2：

解决方案 1：

test('enter otp', () async {
  await driver.runUnsynchronized(() async {
    SerializableFinder enterotp = find.byValueKey('otpvalue');
    await driver.tap(enterotp);
    await driver.enterText('123456');
    expect(await driver.getText(enterotp), "123456");


});
});

解决方案 2：

       final otpField = find.descendant(
        of: find.byType('OTPTextField'),
        matching: find.byType('AnimatedContainer'),
       
    );
      await driver.tap(otpField);
      await driver.enterText('111111');

【讨论】：