React.js 如何定义自定义id，而不是在html中显示

Question

如何更改 React.js 应用程序以停止随机分配 inputId，以便 Selenium 能够始终如一地工作？我正在使用 Selenium 和 React.js 应用程序。该应用程序一直在开发中。我有一个 Selenium 方法，可以使用一个可重用的方法随机选择反应下拉列表，但是反应下拉列表的 id 由于某种原因不断变化，可能是每次构建应用程序时，所以这会为 Selenium 测试创建返工。Selenium 方法：（在 JAVA 中）除了那些 react-select inputIds 改变之外，这个方法可以在反应下拉列表中随机选择选项，但它需要被清理。无论是否已经通过导航选择了一个选项，它都会选择一个选项，然后返回下拉菜单。public String RandomSelect(WebDriver mydriver, String myid){try{Actions actions = new Actions(mydriver);actions.pause(300);WebElement dropdown = mydriver.findElement(By.id(myid));String scrollElementIntoMiddle = "var viewPortHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);" +"var elementTop = arguments[0].getBoundingClientRect().top;"+"window.scrollBy(0, elementTop-(viewPortHeight/2));";((JavascriptExecutor) mydriver).executeScript(scrollElementIntoMiddle, dropdown);//((JavascriptExecutor) mydriver).executeScript(// "arguments[0].scrollIntoView();", dropdown); actions.moveToElement(dropdown).click().build().perform();actions.pause(1000);actions.sendKeys(Keys.DELETE).build().perform();actions.pause(1000);actions.sendKeys(Keys.TAB).build().perform();actions.pause(1000);actions.moveToElement(dropdown).click().build().perform();actions.pause(1000);//  actions.pause(3000);//actions.sendKeys(Keys.DELETE);WebDriverWait wait = new WebDriverWait(mydriver, 10);wait.until(ExpectedConditions.elementToBeClickable(By.className("Select-option")));List<WebElement> options = mydriver.findElements(By.className("Select-option"));List<String> stroptions = new ArrayList<>();System.out.println(options.size());for (WebElement option: options) 使用硒方法：做这样的事情 100 次比键入所有 Selenium 方法 100 次要容易。WebDriver driver;driver = new EdgeDriver();ReactDropdown mydropdown = new ReactDropdown();mydropdown.RandomSelect(driver, "react-select-1--value");如何删除动态分配的“react-select-1--value”并将 id 定义为更直观的东西，如“mydropdown--value”，以便每次应用程序构建时都维护 id？

Answer 1

您可以将 xpath 用作 -

//span[@class='Select-multi-value-wrapper' 和 @id[starts-with(@id,'react-select')

Answer 2

我自己找到了一个解决方案，inputId 是制作唯一 id 并删除 react-select 丑陋的关键。这是一个例子......

import React from 'react';

import Select from 'react-select';

const options = [

{ value: 'chocolate', label: 'Chocolate' },

{ value: 'strawberry', label: 'Strawberry' },

{ value: 'vanilla', label: 'Vanilla' }

];

export class Counter extends React.Component {

state = {

    selectedOption: null,

}

handleChange = (selectedOption) => {

    this.setState({ selectedOption });

    console.log(`Option selected:`, selectedOption);

}

render() {

    const { selectedOption } = this.state;

    return (

        <Select

            value={selectedOption}

            inputId="mydropdown"

            onChange={this.handleChange}

            options={options}

        />

    );

}

}

静态定义 inputId 后，我的 Selenium 方法似乎效果更好。