如何在selenium java中编写自动下拉测试用例，在div标签中构建

Question

我正在努力获取动态下拉菜单来运行单元测试。有人可以建议如何获取自动完成下拉菜单吗？当我尝试单击下拉菜单进行检查时，下拉菜单消失了。因此，我无法迭代 drop-down 的选项。网址为 https://www.flydubai.com/en-gb/。我的代码是 d.get("https://www.flydubai.com/en-gb/"); d.manage().window().maximize(); d.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);

    // Accept cookies
    WebElement cookiesDialog = d.findElement(By.xpath("//div[contains(@class, 'osano-cm-dialog')]"));
    WebElement acceptButton = cookiesDialog.findElement(By.xpath(".//button[contains(@class, 'osano-cm-accept-all')]"));
    acceptButton.click();

    // Select one-way option
    WebDriverWait wait = new WebDriverWait(d, 10);
    WebElement oneWay = wait.until(ExpectedConditions.elementToBeClickable(By.xpath("//*[@class=\"MuiTypography-root MuiTypography-body1 jss1  css-1l0ew3p\"]")));
    oneWay.click();

    // Interact with the input field to trigger dropdown
    WebElement fromInput = wait.until(ExpectedConditions.elementToBeClickable(By.id("from-airportsList")));
    fromInput.click();
    fromInput.sendKeys("Glasgow");

    // Wait for suggestions to appear
    WebDriverWait waitForSuggestions = new WebDriverWait(d, 10);

    // Try to locate the dropdown suggestions based on the parent structure
    List<WebElement> suggestions = waitForSuggestions.until(ExpectedConditions.visibilityOfAllElementsLocatedBy(
            By.xpath("//div[contains(@class, 'MuiAutocomplete-root')]//div[contains(@role, 'option')]")
    ));

    // If suggestions are not found, try a more general approach
    if (suggestions.isEmpty()) {
        suggestions = waitForSuggestions.until(ExpectedConditions.visibilityOfAllElementsLocatedBy(
                By.xpath("//div[@role='listbox']//div[@role='option']")
        ));
    }

    // Iterate through suggestions and select "Glasgow"
    boolean suggestionFound = false;
    for (WebElement suggestion : suggestions) {
        String suggestionText = suggestion.getText();
        System.out.println("Suggestion: " + suggestionText);

        if (suggestionText.contains("Glasgow")) {
            suggestionFound = true;
            suggestion.click();
            break;
        }
    }

    // Assert that the suggestion was found
    Assert.assertTrue("Suggestion 'Glasgow' was not found in the dropdown.", suggestionFound);

我正在尝试获取下拉列表并迭代以获取 sendKeys("Gla") 的所有可能选项

Answer 1

我尝试将下拉菜单源代码保留在 Firefox 开发者工具中。您可以在 Firefox 中尝试以下步骤：

1. 打开“flydubai”页面并打开开发者工具。
2. 在开发人员工具的“调试器”选项卡中。为 'Keyboard' -> 'keyup' 添加事件侦听器断点
3. 切换到您的“flydubai”页面。在“From”输入中输入字符“a”。 然后你会发现当你'keyup''a'时页面停止了。

您可以在 Firefox 开发者工具的“检查器”选项卡中找到下拉源代码。它们被添加到 '' 的最后一部分

这是下拉菜单的代码片段。

<div role="presentation" class="MuiAutocomplete-popper css-1ozefeb" style="max-width: 370px; max-height: 340px; min-width: 370px; margin: 36px 0px 0px; border-radius: 11px; z-index: 1; box-shadow: rgba(0, 0, 0, 0.15) 0px 6px 24px 0px; position: absolute; transform: translate3d(186px, 583px, 0px); top: 0px; left: 0px; will-change: transform;" x-placement="bottom-start">
   <div class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiAutocomplete-paper css-18h49fy">
      <ul dir="ltr" style="width: 100%; position: absolute; margin-top: 0px; padding-bottom: 0px; padding-top: 0px; border-top-left-radius: 11px; border-top-right-radius: 11px;" class="myCustomList myCustomListMargin css-pwdjp1" role="listbox" id="from-airportsList-listbox" aria-labelledby="from-airportsList-label">
         <div dir="ltr" class="AirportListAutoComplete_currentLocation__Q3CmA">
            Use current location
            <div class="AirportListAutoComplete_currentIconContainer__ggEgL"><img alt="Current location" loading="lazy" width="22" height="22" decoding="async" data-nimg="1" style="color: transparent;" src="/v2/_next/static/media/gps-location.bb8088a1.svg"></div>
         </div>
         <li>
            <ul class="css-y8aj3r">
               <li class="MuiAutocomplete-option MuiBox-root css-0" style="padding: 0px; font-family: inherit;" tabindex="-1" role="option" id="from-airportsList-option-0" data-option-index="0" aria-disabled="false" aria-selected="false">
                  <div style="width: 100%;">
                     <div style="background-color: rgb(0, 156, 222);" class="AirportListAutoComplete_airportListItem__mJ_Xo">
                        <div class="AirportListAutoComplete_airportListLeft__UBwAG"><span class="AirportListAutoComplete_airportCountry__IUvL7" style="color: rgb(255, 255, 255);">Abha, Saudi Arabia</span><span style="color: rgb(255, 255, 255);" class="AirportListAutoComplete_airportTitle__GjVw2">Abha Airport</span></div>
                        <div class="AirportListAutoComplete_airportListRight__VsiaX"><span class="AirportListAutoComplete_airportCode__JyqCV">AHB</span></div>
                     </div>
                     <div class="AirportListAutoComplete_dividerContainerDesktop__UagAW">
                        <div class="AirportListAutoComplete_desktopDivider__hbA9Z"></div>
                     </div>
                  </div>
               </li>
               <li class="MuiAutocomplete-option MuiBox-root css-0" style="padding: 0px; font-family: inherit;" tabindex="-1" role="option" id="from-airportsList-option-1" data-option-index="1" aria-disabled="false" aria-selected="false">
                  <div style="width: 100%;">
                     <div class="AirportListAutoComplete_airportListItem__mJ_Xo">
                        <div class="AirportListAutoComplete_airportListLeft__UBwAG"><span class="AirportListAutoComplete_airportCountry__IUvL7">Abidjan, Ivory Coast</span><span class="AirportListAutoComplete_airportTitle__GjVw2">Felix Houphouet-Boigny International Airport</span></div>
                        <div class="AirportListAutoComplete_airportListRight__VsiaX"><span class="AirportListAutoComplete_airportCode__JyqCV">ABJ</span></div>
                     </div>
                     <div class="AirportListAutoComplete_dividerContainerDesktop__UagAW">
                        <div class="AirportListAutoComplete_desktopDivider__hbA9Z"></div>
                     </div>
                  </div>
               </li>
            </ul>
         </li>
         <li>
            <div class="css-z67u16">K</div>
            <ul class="css-y8aj3r">
               <li class="MuiAutocomplete-option MuiBox-root css-0" style="padding: 0px; font-family: inherit;" tabindex="-1" role="option" id="from-airportsList-option-148" data-option-index="148" aria-disabled="false" aria-selected="false">
                  <div style="width: 100%;">
                     <div class="AirportListAutoComplete_airportListItem__mJ_Xo">
                        <div class="AirportListAutoComplete_airportListLeft__UBwAG"><span class="AirportListAutoComplete_airportCountry__IUvL7">Kabul, Afghanistan</span><span class="AirportListAutoComplete_airportTitle__GjVw2">Kabul Airport</span></div>
                        <div class="AirportListAutoComplete_airportListRight__VsiaX"><span class="AirportListAutoComplete_airportCode__JyqCV">KBL</span></div>
                     </div>
                     <div class="AirportListAutoComplete_dividerContainerDesktop__UagAW">
                        <div class="AirportListAutoComplete_desktopDivider__hbA9Z"></div>
                     </div>
                  </div>
               </li>
               <li class="MuiAutocomplete-option MuiBox-root css-0" style="padding: 0px; font-family: inherit;" tabindex="-1" role="option" id="from-airportsList-option-149" data-option-index="149" aria-disabled="false" aria-selected="false">
                  <div style="width: 100%;">
                     <div class="AirportListAutoComplete_airportListItem__mJ_Xo">
                        <div class="AirportListAutoComplete_airportListLeft__UBwAG"><span class="AirportListAutoComplete_airportCountry__IUvL7">Kaohsiung, Taiwan</span><span class="AirportListAutoComplete_airportTitle__GjVw2">Kaohsiung International Airport</span></div>
                        <div class="AirportListAutoComplete_airportListRight__VsiaX"><span class="AirportListAutoComplete_airportCode__JyqCV">KHH</span></div>
                     </div>
                     <div class="AirportListAutoComplete_dividerContainerDesktop__UagAW">
                        <div class="AirportListAutoComplete_desktopDivider__hbA9Z"></div>
                     </div>
                  </div>
               </li>  
            </ul>
         </li>
      </ul>
   </div>
</div>