Selenium: It wont click on the element i need

Question

im learning Automation, it's my 2nd script..i want to do something really really simple, go to https://demoqa.com/ click on Widgets and then click on Sliders but i tried all the elements and it's not working...i cant try with a Select because i have a ul il but not value. i also tried with a invisibily of the footer element but it wont work either.. This is my code... (remember im really new in this..) i left as coments all the ways i tried

package paginas;
import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.support.FindBy;
import org.openqa.selenium.support.PageFactory;
import org.openqa.selenium.support.pagefactory.AjaxElementLocatorFactory;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.Select;
import org.openqa.selenium.support.ui.WebDriverWait;
public class Slider {
        //Identify all elements to use

        //Poblem: Unable to locate the element
        //@FindBy(className="btn btn-light active")

        //Problem: element not interactable
        //@FindBy(id="item-3")  
        
        //Problem (abs xpath):element click intercepted: Element <li class="btn btn-light " id="item-3">...</li> 
                //is not clickable at point (177, 621). Other element would receive the click: <footer>...</footer> 
        //@FindBy(xpath="/html[1]/body[1]/div[1]/div[1]/div[1]/div[2]/div[1]/div[1]/div[1]/div[4]/div[1]/ul[1]/li[4]")
        
        //Problem (Rel xpath: element click intercepted: Element <li class="btn btn-light " id="item-3">...</li> 
           //is not clickable at point (177, 621). Other element would receive the click: <footer>...</footer>)
        @FindBy(xpath="//div[4]//div[1]//ul[1]//li[4]")
        WebElement slider;      
        WebDriver driver;
                
        public Slider(WebDriver driver) {
            this.driver = driver;
            //Inicializacion de los elementos con una espera impicita
            PageFactory.initElements(new AjaxElementLocatorFactory(driver,20), this);
    
        }       
        public void clickonSlider()
        {   // 4 | click | css=.show #item-3 > .text | 
            // Hace click en Sliders
//          //driver.findElement(By.cssSelector(".show #item-3 > .text")).click();
            slider.click();
        }       
    
    
} 

Answer 1

The element isn't yet visible, that's why you get the not interactable error, also the className method doesn't match multiple classes.

Solution

Find the element by xpath and use the JavascriptExecutor component to scroll to that element after you can click it.

WebElement slider = driver.findElement(By.xpath("//span[text()=\"Slider\"]"));
((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView(true);", slider);
slider.click();

You can also switch the local declaration with the annotation @FindBy

@FindBy(xpath="//span[text()=\"Slider\"]"
WebElement slider;