React.js如何定义自定义ID，而不是在html中显示react-select-1 - 值

Question

如何更改React.js应用程序以停止随机分配inputIds，以便Selenium能够一致地工作？

我正在使用Selenium和React.js应用程序。该应用程序正在不断开发中。我有一个Selenium方法，使用一个可重复使用的方法随机选择反应下拉列表，但反应下拉列表的ID由于某种原因而不断变化，也许每次构建应用程序时，这都会导致Selenium测试的返工。

硒方法:(在JAVA中）

除了那些react-select inputIds更改之外，此方法可以在react响应下拉列表中随机选择选项，但需要清除它。它将选择一个选项，无论是否已经通过导航选择了选项，然后返回到下拉列表。

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) {
    stroptions.add(option.getText());
    System.out.println(option.getText());
}
Random rand = new Random();
int randomNum = rand.nextInt((options.size()));
String randomoption = stroptions.get(randomNum).toString();
actions.sendKeys(randomoption+Keys.RETURN).click().build().perform();
System.out.println("Random Option Is: "+ randomoption);
//  mydriver.findElement(By.className("main-container"));

options.clear();
return randomoption;

}
catch (Exception ex)
{
    System.out.println("React Select Error: "  + ex.toString());
    return null;
}

}  

使用Selenium方法：

做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？

这是渲染的html的一个例子：

React.js html输出

<div class="prop-row">
    <div class="dropdown field mydropdown ">
        <div class="field-label">
            <label for="mydropdown">mydropdownlabel</label>
        </div>
        <div class="Select mydropdown undefined is-searchable Select--single">
            <div class="Select-control">
                <span class="Select-multi-value-wrapper" id="react-select-1--value">
                    <div class="Select-placeholder">Select...</div>

摆脱丑陋：

id="react-select-1--value" 

并将其更改为

id="mydropdown--value" 

因此，每次都是理想的测试，它是相同的，详细的，可预测的。在一个页面上有超过15个下拉列表，没有直观的ID，我需要更改我的Selenium方法，或者开发人员需要为应用程序添加更好的ID。我们希望我们的Selenium测试使用TestNG在管道中运行，并且在解决之前永远不会有效。随着改变反应inputId似乎对我来说更加友好的配置管理（CM）。所有这些输入都应通过CM进行管理。

我刚开始做出反应，对我来说这不是最直观的，但......

Answer 1

您可以使用xpath作为 -

// span [@ class ='Select-multi-value-wrapper'和@id [starts-with（@ id，'react-select'）

Answer 2

我自己找到了一个解决方案，inputId是创建唯一ID的关键，并删除了反应选择丑陋。这是一个例子....

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方法看起来效果更好。