java反应。js如何定义自定义id，而不是在html中显示reactselect1value

Question

我如何改变反应。js应用程序停止随机分配inputid，以便Selenium能够始终如一地工作

我正在使用硒和一种化学物质。js应用程序。该应用程序正在不断开发中。我有一个Selenium方法，可以使用一个可重用的方法随机选择react下拉列表，但是react下拉列表的ID由于某种原因不断变化，可能每次构建应用程序时都会发生变化，因此这会为Selenium测试创建返工

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;
}

}  

使用硒法：

像这样做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的一个示例：

反应。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的管道中运行，在解决这个问题之前，它永远不会工作。无论如何，对我来说，更改react inputId似乎对配置管理（CM）更友好。所有这些输入都应通过CM进行管理

我刚从react开始，它对我来说不是最直观的，但是

Answer 1

您可以将xpath用作-

//span[@class='Select-multi-value-wrapper'和@id[以（@id，'react-Select'开头）

Answer 2

我自己找到了一个解决方案，inputId是创建唯一id和删除该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方法似乎工作得更好