Question

我正在使用Selenium Web驱动程序来自动化一个有角度的网站。问题是该站点有3个下拉列表，其中1个代表国家，1个代表省，1个代表城市。

我知道我不能使用Select类，所以我要做的第一件事是单击mat-select元素，然后，单击所需的mat-option。

问题是有时运行测试时，mat选项的id，xpath或cssSelector是不同的。

如何保证始终都能访问相同的mat-option？

用于垫选的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-option看起来像这样

<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-option并不总是具有相同的行为（有时cssLocator有所不同，id和xpath也不同），因此，在这种情况下，测试不会选择我想要的国家/地区，选择另一个。

Answer 1

在下拉菜单元素上执行点击动作后，它会渲染一些html并导致其属性更改，但仍有一些属性没有更改，例如placeholder使用xath使用占位符单击城市下拉菜单元素

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

现在要确保可以看到选项元素并且可以单击以使用

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 2

如果您的选项始终以相同的顺序显示在页面上，则可以使用该选项选择所需的选项。

例如，选择第三个选项：

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

Answer 3

mat-select显然具有ID id="mat-select-5"，因此应该始终将其作为选择的首选。对于这些选项，如果ID发生变化，我们将不得不寻找另一种方式来找到它们。从头开始包含文本似乎是一件好事。

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

无法找到垫选项硒

3 个答案: