Selenium Webdriver：cssselector

Question

I am trying to do SignIn for this . In it click on 'SignIn' which I have done it successfully. Now when trying to type in Username/Password using Xpath it shows exception which says

Exception in thread "main" org.openqa.selenium.ElementNotVisibleException: element not visible

code is :-

driver.findElement(By.xpath(".//*[@id='load_form']/fieldset[1]/input")).sendKeys("test123");
driver.findElement(By.xpath(".//*[@id='load_form']/fieldset[2]/input")).sendKeys("test123");

I know this Xpath is same as used in SignUp form, so what are the other ways to locate these two fields? How we can use it by using cssselector ? Thanks for the help in advance.

Answer 1

Go One Level up on finding the relative xpath with

//div[@id='login']/form[@id='load_form']//input[@name='username']
//div[@id='login']/form[@id='load_form']//input[@name='password']

Answer 2

Try this

 //For Username
        driver.findElement(By.xpath("(//input[@name='username'])[2]")).sendKeys("username test");
//or
        driver.findElement(By.cssSelector("#login > #load_form > fieldset > input[name='usernam']")).click();   

//For password
        driver.findElement(By.xpath("(//input[@name='password'])[2]")).sendKeys("password test");
//or
        driver.findElement(By.cssSelector("#login > #load_form > fieldset > input[name='password']")).click();

the above codes are working for me.

Answer 3

There are basically two elements found by provided xpath , and it works with first found element which is invisible as your exception saying, you should try using cssSelector as below :-

driver.findElement(By.cssSelector("div#login input[name = 'username']")).sendKeys("test123");
driver.findElement(By.cssSelector("div#login input[name = 'password']")).sendKeys("test123");

Note :- For learning about cssSelector follow this url and for xPath follow this url

I'm suggesting you before selenium execution with the locator you need to sure that using locator is correct and returns single or multiple element at your browser console by pressing f12 . for verify xPath you should use $x("your xpath expression") and for cssSelector you should use document.querySelector("your css selector expression") ..

Hope it will help you..:)