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

Posted 2023-02-23

【中文标题】在 Flutter 中使用 Flutter Driver 对 OTPTextField 小部件进行集成测试

【英文标题】：Integration testing using Flutter Driver for OTPTextField widget in flutter

【发布时间】：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");
);

【参考方案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');