How best should I interact with a this <li> from Selenium Java Webdriver

Question

I am trying to interact with the Nike shoe online shop, login and then select a shoe size from the list and then press add to cart button from Selenium's Java WebDriver:

http://store.nike.com/us/en_us/pd/air-max-2014-running-shoe/pid-830258/pgid-774364

First of all I cannot seem to find the correct <li> element and select it - and need some advise on how to do it.

I am finding my code does not work for selecting a shoe size : pastebin.com/6K1RpPKL (as guided by the kind user on the first response.

Answer 1

The element type in li is not select. Use following code instead, it will work fine.

WebElement shoeSizes = driver.findElement(By.xpath("//div[contains(@class,'exp-pdp-size-container')]/a"));
shoeSizes.click(); // Expanded
String shoeSize = "8.5";
WebElement shoeSizeSel = driver.findElement(By.xpath("//li[text()='"+shoeSize+"']"));
shoeSizeSel.click(); // Size selected
driver.findElement(By.xpath("//div[@class='exp-pdp-save-container']/button")).click(); // Added to cart

As far as advice goes, you should first learn the basics like identifying elements, using locators before asking these kind of question. Go through these: Selenium Docs, Mozilla Blogs. Many such resources are available on web.

Answer 2

First off, you should get away from the IDE if you are wanting more robust test-writing like flash. For your login issue, this is simple.

Using the getting started with selenium framework your test would look like:

@Config(url="http://store.nike.com/us/en_us/pd/air-max-2014-running-shoe/pid-830258/pgid-774364")
public class NikeTest extends AutomationTest {
    @Test
    public void testNike() {
        click   (By.cssSelector("div.login.nav-section > a"))
        .setText(By.cssSelector("form[name='login-form] input[name='email']"),    "<My Username>")
        .setText(By.cssSelector("form[name='login-form] input[name='password']"), "<My Password>")
        .click  (By.cssSelector("form[name='login-form] button.exp-login-submit")
        
        // now we're logged in.

        // let's select a size of shoe.
        .click  (By.cssSelector("div.exp-pdp-size-and-quantity-container > a.exp-pdp-size-dropdown") // now it's expanded.

        .selectOptionByText(By.cssSelector("select[name='skuAndSize']"), "10.5") // you can replace 10.5 with whatever option you need.
    }
}

Those are some CSS selectors you can use. Also per your Flash thing, i think you're out of luck buddy.. I hadn't heard of any very successful solution with automating flash.

One key thing here:

Make sure you know what element is receiving the click. Selenium IDE doesn't do a great job determining WHAT exact element is receiving the click. My guess is that it was trying either the <div> or <li> when it's the <a> that actually makes the dropdown come down.