React.js Как определить пользовательский идентификатор, вместо того, чтобы показывать response-select-1 - значение в HTML

Question

Как изменить приложение React.js, чтобы оно прекратило случайное распределение входных идентификаторов, чтобы Selenium работал согласованно?

Я работаю с Selenium и приложением React.js.Приложение постоянно находится в разработке.У меня есть метод Selenium, который работает случайным образом, чтобы выбрать выпадающие списки реакции, используя один, многократно используемый метод, но идентификаторы выпадающих значений реагирования почему-то меняются, возможно, каждый раз, когда создается приложение, так что это создает переработку для тестирования Selenium.

Метод селена: (в JAVA)

Помимо изменения входных идентификаторов реагирования и выбора, этот метод работает для случайного выбора параметров в раскрывающихся списках реакции, но его необходимоубрано.Он выберет опцию, независимо от того, существует ли уже выбранная опция путем перехода, затем обратно к раскрывающемуся списку.

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");

Как я могу удалить динамически назначенное значение «response-select-1 - value» и определить идентификатор какчто-то более интуитивное, вроде «mydropdown-value», чтобы каждый раз, когда приложение собирает идентификатор, сохранялся?

Это пример рендеринга 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 выпадающих списков, и без интуитивного идентификатора мне нужно либо изменить свой метод Selenium, либо разработчики должны добавить более качественные идентификаторы в приложение.Мы хотим, чтобы наши тесты Selenium выполнялись в конвейере с использованием TestNG, и это никогда не сработает, пока это не будет решено.В любом случае, мне кажется, что изменение входного идентификатора реагирования более удобно для управления конфигурацией (CM).Все эти входы должны управляться через CM.

Я только начал с реакции, и это не самый интуитивный для меня, но ...

Answer 1

Вы можете использовать xpath как -

// span [@ class = 'Select-multi-value-wrapper' и @id [начинается с (@ id, 'Reaction-Select')

Answer 2

Я нашел решение самостоятельно, inputId - это ключ для создания уникального идентификатора и удаления этого уродливого ответа-выбора.Вот пример ....

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, кажется, работает лучше.