Невозможно найти селен-вариант селен

Question

Я использую веб-драйвер Selenium для автоматизации углового веб-сайта. Дело в том, что на сайте есть 3 выпадающих списка, 1 для страны, 1 для провинции и 1 для города.

Я знаю, что не могу использовать класс Select, поэтому первое, что я делаю, - это нажимаю на элемент mat-select, а после этого я нажимаю на нужный мне параметр mat.

Проблема в том, что иногда, когда я запускаю тест, id, xpath или cssSelector отличаются для параметра mat.

Как я могу гарантировать постоянный доступ к одному и тому же мату?

HTML для выбора мата

<mat-select _ngcontent-c16="" class="mat-select ng-tns-c19-42 ng-pristine ng-valid ng-star-inserted ng-touched" formcontrolname="country" placeholder="Seleccione un país" role="listbox" id="mat-select-5" tabindex="0" aria-label="Seleccione un país" aria-required="false" aria-disabled="false" aria-invalid="false" aria-multiselectable="false">
    <div class="mat-select-trigger" aria-hidden="true" cdk-overlay-origin="">
        <div class="mat-select-value">
            <!----><span class="mat-select-placeholder ng-tns-c19-42 ng-star-inserted">Seleccione un país</span>
            <!---->
        </div>
        <div class="mat-select-arrow-wrapper">
            <div class="mat-select-arrow"></div>
        </div>
    </div>
    <!---->
</mat-select>

После того, как я нажму на циновку, выберите ее

<mat-select _ngcontent-c16="" class="mat-select ng-tns-c19-42 ng-pristine ng-valid ng-star-inserted ng-touched" formcontrolname="country" placeholder="Seleccione un país" role="listbox" id="mat-select-5" tabindex="0" aria-label="Seleccione un país" aria-required="false" aria-disabled="false" aria-invalid="false" aria-multiselectable="false" aria-owns="mat-option-344 mat-option-345 mat-option-346 mat-option-347 mat-option-348 mat-option-349 mat-option-350 mat-option-351 mat-option-352 mat-option-353 mat-option-354 mat-option-355 mat-option-356 mat-option-357 mat-option-358 mat-option-359 mat-option-360 mat-option-361 mat-option-362 mat-option-363 mat-option-364 mat-option-365 mat-option-366 mat-option-367 mat-option-368 mat-option-369 mat-option-370 mat-option-371 mat-option-372 mat-option-373 mat-option-374 mat-option-375 mat-option-376 mat-option-377 mat-option-378 mat-option-379 mat-option-380 mat-option-381 mat-option-382 mat-option-383 mat-option-384 mat-option-385 mat-option-386 mat-option-387 mat-option-388 mat-option-389 mat-option-390 mat-option-391 mat-option-392 mat-option-393 mat-option-394 mat-option-395 mat-option-396 mat-option-397 mat-option-398 mat-option-399 mat-option-400 mat-option-401 mat-option-402 mat-option-403 mat-option-404 mat-option-405 mat-option-406 mat-option-407 mat-option-408 mat-option-409 mat-option-410 mat-option-411 mat-option-412 mat-option-413 mat-option-414 mat-option-415 mat-option-416 mat-option-417 mat-option-418 mat-option-419 mat-option-420 mat-option-421 mat-option-422 mat-option-423 mat-option-424 mat-option-425 mat-option-426 mat-option-427 mat-option-428 mat-option-429 mat-option-430 mat-option-431 mat-option-432 mat-option-433 mat-option-434 mat-option-435 mat-option-436 mat-option-437 mat-option-438 mat-option-439 mat-option-440 mat-option-441 mat-option-442 mat-option-443 mat-option-444 mat-option-445 mat-option-446 mat-option-447 mat-option-448 mat-option-449 mat-option-450 mat-option-451 mat-option-452 mat-option-453 mat-option-454 mat-option-455 mat-option-456 mat-option-457 mat-option-458 mat-option-459 mat-option-460 mat-option-461 mat-option-462 mat-option-463 mat-option-464 mat-option-465 mat-option-466 mat-option-467 mat-option-468 mat-option-469 mat-option-470 mat-option-471 mat-option-472 mat-option-473 mat-option-474 mat-option-475 mat-option-476 mat-option-477 mat-option-478 mat-option-479 mat-option-480 mat-option-481 mat-option-482 mat-option-483 mat-option-484 mat-option-485 mat-option-486 mat-option-487 mat-option-488 mat-option-489 mat-option-490 mat-option-491 mat-option-492 mat-option-493 mat-option-494 mat-option-495 mat-option-496 mat-option-497 mat-option-498 mat-option-499 mat-option-500 mat-option-501 mat-option-502 mat-option-503 mat-option-504 mat-option-505 mat-option-506 mat-option-507 mat-option-508 mat-option-509 mat-option-510 mat-option-511 mat-option-512 mat-option-513 mat-option-514 mat-option-515 mat-option-516 mat-option-517 mat-option-518 mat-option-519 mat-option-520 mat-option-521 mat-option-522 mat-option-523 mat-option-524 mat-option-525 mat-option-526 mat-option-527 mat-option-528 mat-option-529 mat-option-530 mat-option-531 mat-option-532 mat-option-533 mat-option-534 mat-option-535 mat-option-536 mat-option-537 mat-option-538 mat-option-539 mat-option-540 mat-option-541 mat-option-542 mat-option-543 mat-option-544 mat-option-545 mat-option-546 mat-option-547 mat-option-548 mat-option-549 mat-option-550 mat-option-551 mat-option-552 mat-option-553 mat-option-554 mat-option-555 mat-option-556 mat-option-557 mat-option-558 mat-option-559 mat-option-560 mat-option-561 mat-option-562 mat-option-563 mat-option-564 mat-option-565 mat-option-566 mat-option-567 mat-option-568 mat-option-569 mat-option-570 mat-option-571 mat-option-572 mat-option-573 mat-option-574 mat-option-575 mat-option-576 mat-option-577 mat-option-578 mat-option-579 mat-option-580 mat-option-581 mat-option-582 mat-option-583 mat-option-584 mat-option-585 mat-option-586 mat-option-587 mat-option-588 mat-option-589" aria-activedescendant="mat-option-344">
    <div class="mat-select-trigger" aria-hidden="true" cdk-overlay-origin="">
        <div class="mat-select-value">
            <!----><span class="mat-select-placeholder ng-tns-c19-42 ng-star-inserted">Seleccione un país</span>
            <!---->
        </div>
        <div class="mat-select-arrow-wrapper">
            <div class="mat-select-arrow"></div>
        </div>
    </div>
    <!---->
</mat-select>

И опция элемента mat выглядит следующим образом

<mat-option _ngcontent-c16="" class="mat-option ng-star-inserted" role="option" tabindex="0" id="mat-option-407" aria-selected="false" aria-disabled="false">
    <!----><span class="mat-option-text"> ESPAÑA </span>
    <div class="mat-option-ripple mat-ripple" mat-ripple=""></div>
</mat-option>

Java-код

By cmbPais = By.xpath("//*[@id='mat-select-0']/div/div[1]"); // Country dropdown
By selectPais = By.cssSelector("#mat-option-63"); // Option dropdown

// select the country
driver.findElement(cmbPais).click();
Thread.sleep(2000);
driver.findElement(selectPais).click();

Это работает, но опция mat не всегда имеет одинаковое поведение (иногда cssLocator отличается, также id и xpath), поэтому, когда это происходит, тест не выбирает страну, которую я хочу, выбирает другой.

Answer 1

У mat-select явно есть идентификатор, id="mat-select-5", поэтому он всегда должен быть вашим первым выбором для выбора. Для опций, если идентификаторы меняются, мы должны найти другой способ их найти. Содержимое текста кажется хорошим началом.

driver.findElement(By.id("mat-select-5")).click(); // opens the dropdown
driver.findElement(By.xpath("//mat-option/span[contains(.,'ESPAÑA')]")).click(); // clicks on 'ESPAÑA' option

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

public void selectCountry(String countryName)
{
    driver.findElement(By.id("mat-select-5")).click();
    driver.findElement(By.xpath("//mat-option/span[contains(.,'" + countryName + "')]")).click();
}

и тогда вы бы назвали это как

selectCountry("ESPAÑA");

Answer 2

После действия щелчка, выполненного над выпадающим элементом, он отображает некоторый html и приводит к изменению его атрибутов, но есть некоторые атрибуты, которые не изменяются, например placeholder Используйте xath, чтобы щелкнуть элемент раскрывающегося списка городов с помощью заполнителя

driver.findElement(By.xpath("//mat-select[@placeholder='Seleccione un país']").click();

теперь, чтобы убедиться, что элементы опций видны и доступны для нажатия, можно проверить с помощью wait

WebDriverWait wait = new WebDriverWait(driver, 5);
wait.until(ExpectedConditions.elementToBeClickable(By.xpath("//span[text()=' ESPAÑA ']")));

driver.findElement(By.xpath("//span[text()=' ESPAÑA ']").click();

надеюсь, это поможет

Answer 3

Если ваши параметры всегда отображаются на странице в одном и том же порядке, вы можете использовать их для выбора того, что вам нужно.

Например, чтобы выбрать 3-й вариант:

WebElement dropdown = driver.findElement(By.xpath("(//mat-option)[3]"));