排毒：如何测试多行 TextInput

Posted 2023-04-15

【中文标题】排毒：如何测试多行 TextInput

【英文标题】：Detox: how to test multiline TextInput

【发布时间】：2018-05-13 07:12:30

【问题描述】：

我正在尝试使用 detox 在我的 react-native 应用程序中测试表单。

表单中的一个输入有multiline=true。

我正在尝试运行以下测试：

const inputElement = element(by.id('input_multiline'));
await expect(inputElement).toBeVisible();
await inputElement.typeText('line1\n');
await inputElement.typeText('line2\n');
await inputElement.typeText('line3\n');

const submitElement = element(by.id('submit'));
await submitElement.toBeVisible();
await submitElement.tap();

此测试未能通过 75% 的可见性标准，因为键盘隐藏了提交按钮。

通常对于带有multiline=false 的TextInput，您只需将\n 附加到输入字符串即可自动移动到下一阶段，但对于多行输入\n 只需添加一个新行。

我该怎么做才能通过这个排毒测试？

【参考方案1】：

首先，我们需要能够使用 multiline=true 关闭 TextInput 的键盘。

为此，我们将使用 react-native 中的键盘模块。

import Keyboard from 'react-native'

现在用 TouchableWithoutFeedback 包装您的表单并在按下时调用 Keyboard.dismiss()。

<TouchableWithoutFeedback onPress=Keyboard.dismiss>
   /* your form goes here */ 
</TouchableWithoutFeedback>

现在修改您的排毒测试以关闭键盘。

const inputElement = element(by.id('input'));
await expect(inputElement).toBeVisible();
await inputElement.typeText('line1\n');
await inputElement.typeText('line2\n');
await inputElement.typeText('line3\n');
// click somewhere outside the input
await inputElement.tapAtPoint(x: 0, y: 1);

const submitElement = element(by.id('submit'));
await submitElement.toBeVisible();
await submitElement.tap();