Selenium Nightwatch setValue 输入仅显示最后一个字符

Question

使用以下代码，我尝试测试传入值“我的测试”的反应输入，但在屏幕上（和组件值中）只出现最后一个“t”

this.useXpath()
    .waitForElementVisible('@subsetDialogNameInput')
    .clearValue('@subsetDialogNameInput')
    .setValue('@subsetDialogNameInput', name)
    .pause(500)
    .expect.element('@subsetDialogNameInput').to.have.value.that.equals(name)

然后测试输出变成：

Expected element @subsetDialogNameInput <.//*[local-name()="input" and @id="Subset-name"]> to have value that equals: "My test" - expected "equals 'My test'" but got: "t"

我是运行版本 100.0.0 的 chromedriver

编辑：根据要求为输入字段添加 jsx

import { TextField as MuiTextField } from '@mui/material';
import clsx from 'clsx';
import type { ChangeEvent } from 'react';
import { memo } from 'react';

import { formStyle } from '@/style';

import { asteriskStyle, controlStyle, inputReadOnlyStyle, inputStyle, labelReadOnlyStyle, labelStyle, nativeInputStyle } from './style';


interface Props {
    readonly borderless: boolean;
    readonly className: string | undefined;
    readonly dark: boolean;
    readonly id: string;
    readonly label: string | undefined;
    readonly onChange: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
    readonly readOnly: boolean;
    readonly required: boolean;
    readonly type: 'text' | 'number';
    readonly value: string;
    readonly max?: number | undefined;
    readonly min?: number | undefined;
}

const TextField = ({ borderless, className, dark, onChange, id, label, max, min, readOnly, required, type, value }: Props) => (
    <MuiTextField
        autoComplete="off"
        fullWidth
        id={id}
        InputLabelProps={{
            classes: { root: clsx(labelStyle, dark ? formStyle.labelDark : formStyle.labelLight, readOnly && labelReadOnlyStyle), asterisk: asteriskStyle }
        }}
        inputProps={{ className: nativeInputStyle, max, min, tabIndex: readOnly ? -1 : 0 }}
        InputProps={{
            readOnly,
            className: clsx(
                inputStyle,
                dark ? formStyle.inputDark : formStyle.inputLight,
                borderless && formStyle.inputBorderless,
                readOnly && inputReadOnlyStyle
            )
        }}
        label={label}
        onChange={onChange}
        required={required}
        type={type}
        value={value}
        variant="filled"
        className={clsx(controlStyle, className)}
    />
);

export default memo(TextField);

Answer 1

在 TextField 的父组件上添加一个 useState 钩子，并使用 setInputValue 内部的回调函数解决了这个问题。似乎在通过 selenium setValue 函数输入时会产生某种竞争条件，使用 setState 回调可以解决它。

Selenium Nightwatch setValue 输入仅显示最后一个字符

Selenium Nightwatch setValue on input only showing last character

testing

selenium

reactjs

nightwatch