替换后，React Input字段会继续恢复为默认文本

Question

我要在测试自动化中实现以下输入字段：

false

我尝试了几种输入，替换，退格键等方法来更改输入值。但是当page $ eval或page.evaluate完成时。输入字段将还原为“新图表”。

到目前为止，这是我的尝试。

true

或

< input id="chart-name" name="chartName" type="text" value="New Chart">

或

await page.evaluate(() => {
    const chartName = document.getElementById('chart-name');
    chartName.value = 'fooBAR!';
});

或者我们首先将字符退格吗？这个没事...

await page.$eval('input#chart-name', el => el.value = 'SNAFU!');

以及上述解决方案的几种排列。仍在尝试....任何建议将不胜感激。

Answer 1

执行value="New Chart"时，称为受控输入。您可以在react网站上搜索该文章，其中有一篇很好的文章讨论了什么是受控的，什么不是受控的。

因此，您无法在此处编写固定值，因为它与

相同

   const value = '123'

   <input value={value} />

如果您删除value部分，则测试将起作用。但这可能无济于事，因为您想更改值，因此界面必须为

   <Component value={value} />

此处组件可以是input或您想要的任何组件，但是值不能硬编码，必须将其传递给其中，而onChange是更改它的另一项支持。这些是典型输入的通用接口。