无法找到垫选项硒

Question

我正在使用 Selenium Web 驱动程序来自动化 Angular 网站。问题是该网站有 3 个下拉菜单，1 个代表国家/地区，1 个代表省份，1 个代表城市。

\n\n

我知道我无法使用 Select 类，因此我要做的第一件事是单击 mat-select 元素，然后单击我想要的 mat-option。

\n\n

问题是，有时当我运行测试时，mat-option 的 id、xpath 或 cssSelector 是不同的。

\n\n

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

\n\n

用于垫选择的 HTML

\n\n

<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\xc3\xads" role="listbox" id="mat-select-5" tabindex="0" aria-label="Seleccione un pa\xc3\xads" aria-required="false" aria-disabled="false" aria-invalid="false" aria-multiselectable="false">\n    <div class="mat-select-trigger" aria-hidden="true" cdk-overlay-origin="">\n        <div class="mat-select-value">\n            <!----><span class="mat-select-placeholder ng-tns-c19-42 ng-star-inserted">Seleccione un pa\xc3\xads</span>\n            <!---->\n        </div>\n        <div class="mat-select-arrow-wrapper">\n            <div class="mat-select-arrow"></div>\n        </div>\n    </div>\n    <!---->\n</mat-select>\n

\n\n

单击垫子选择后，它会变成这样

\n\n

<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\xc3\xads" role="listbox" id="mat-select-5" tabindex="0" aria-label="Seleccione un pa\xc3\xads" 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">\n    <div class="mat-select-trigger" aria-hidden="true" cdk-overlay-origin="">\n        <div class="mat-select-value">\n            <!----><span class="mat-select-placeholder ng-tns-c19-42 ng-star-inserted">Seleccione un pa\xc3\xads</span>\n            <!---->\n        </div>\n        <div class="mat-select-arrow-wrapper">\n            <div class="mat-select-arrow"></div>\n        </div>\n    </div>\n    <!---->\n</mat-select>\n

\n\n

元素垫选项看起来像这样

\n\n

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

\n\n

Java代码

\n\n

By cmbPais = By.xpath("//*[@id=\'mat-select-0\']/div/div[1]"); // Country dropdown\nBy selectPais = By.cssSelector("#mat-option-63"); // Option dropdown\n\n// select the country\ndriver.findElement(cmbPais).click();\nThread.sleep(2000);\ndriver.findElement(selectPais).click();\n

\n\n

这是可行的，但是 mat-option 并不总是具有相同的行为（有时 cssLocator 不同，id 和 xpath 也不同），因此当发生这种情况时，测试不会选择我想要的国家/地区，而是选择另一个。

\n

Answer 1

显然mat-select有一个 ID，id="mat-select-5"，因此它应该始终是您选择的首选。对于选项，如果 ID 发生变化，我们就必须找到另一种方法来定位它们。从包含的文本开始似乎是一件好事。

\n\n

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

\n\n

我建议您将其放入一个函数中，您可以使用该函数来设置国家/地区下拉列表，然后传入您要选择的国家/地区名称。然后，您可以将其构建到第二次点击中，并将其用于任何国家/地区。

\n\n

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

\n\n

然后你会这样称呼它

\n\n

selectCountry("ESPA\xc3\x91A");\n

\n