Handle submenu items from a drodown

Question

I want to locate the elements from sub menu

i am trying to locate print but couldn't. how can i fix this?

My code

    WebDriver driver = new FirefoxDriver();
    driver.get("https://www.flipkart.com");

    try {
        WebElement closeButton = driver.findElement(By.xpath("//button[contains(text(),'✕')]"));
        closeButton.click();
    } catch (Exception e) {
        System.out.println("No login popup to close.");
    }

    Actions actions = new Actions(driver);
    WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(20)); // Increased wait time
    JavascriptExecutor js = (JavascriptExecutor) driver;

    try {

        WebElement computerPeripheralsMenu = wait.until(
                ExpectedConditions.visibilityOfElementLocated(By.xpath("//span[text()='Computer Peripherals']/parent::div")));

        actions.moveToElement(computerPeripheralsMenu).perform();
        System.out.println("Hovered over 'Computer Peripherals' menu.");

        Thread.sleep(2000);

        System.out.println(driver.getPageSource());

        WebElement printersMenu = wait.until(
                ExpectedConditions.visibilityOfElementLocated(By.xpath("//a[text()='Printers']")));


        js.executeScript("arguments[0].scrollIntoView(true);", printersMenu);


        printersMenu.click();
        System.out.println("Clicked on 'Printers' submenu item.");


        System.out.println("Current URL: " + driver.getCurrentUrl());

    } catch (Exception e) {
        e.printStackTrace();
    } finally {
        // Close the browser
        driver.quit();
    }
}

Answer 1

First of all, when I look into your code, you are not hovering on the Electronics tab on the Flipkart home page. Once you hover over Electronics only then you would be able to locate Computer Peripherals and then Printers.

Please find below the working code for your scenario,

WebDriver driver = new FirefoxDriver();
    driver.manage().window().maximize(); // It is always better to maximize screen to avoid to prevent the missing of few web elements
    driver.get("https://www.flipkart.com");

    try {
        WebElement closeButton = driver.findElement(By.xpath("//button[contains(text(),'✕')]"));
        closeButton.click();
    } catch (Exception e) {
        System.out.println("No login popup to close.");
    }
    Actions actions = new Actions(driver);
    WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(20)); // Increased wait time
    JavascriptExecutor js = (JavascriptExecutor) driver;
    try {
        WebElement electronics = driver.findElement(By.xpath("//div[@aria-label='Electronics']")); //You need to hover over Electronics first
        actions.moveToElement(electronics).perform();
        WebElement computerPeripheralsMenu = driver.findElement(By.xpath("//a[text()='Computer Peripherals']")); //The xpath for Computer peripherals was incorrect
        actions.moveToElement(computerPeripheralsMenu).perform();
        System.out.println("Hovered over 'Computer Peripherals' menu.");
        Thread.sleep(2000);
        //System.out.println(driver.getPageSource()); //I did not understand the significance of this step
        WebElement printersMenu = wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//a[text()='Printers']")));
        js.executeScript("arguments[0].scrollIntoView(true);", printersMenu);
        printersMenu.click();
        System.out.println("Clicked on 'Printers' submenu item.");
        System.out.println("Current URL: " + driver.getCurrentUrl());
    } catch (Exception e) {
        e.printStackTrace();
    } finally {
        // Close the browser
        driver.quit();
    }

For identifying disappearing web elements in the browser please use this strategy How can I inspect disappearing element in a browser?