How to construct a xpath or css locator to identify the element using Selenium and Java

Question

Here is my Html:

<div class="x-form-item " tabindex="-1" id="ext-gen118">
    <label for="ext-comp-1060" style="width:40px;" class="x-form-item-label" id="ext-gen119">Name:</label>
    <div class="x-form-element" id="x-form-el-ext-comp-1060" style="padding-left:45px">
        <div class="x-form-field-wrap x-form-field-trigger-wrap x-trigger-wrap-focus" id="ext-gen120" style="width: 168px;">
            <input type="text" size="16" autocomplete="off" id="ext-comp-1060" name="ext-comp-1060" class="x-form-text x-form-field x-form-focus" style="width: 143px;" title="">
            <span class="x-form-twin-triggers" id="ext-gen121">
                <img src="/mco/extjs/resources/images/default/s.gif" alt="" class="x-form-trigger x-form-clear-trigger" id="ext-gen122" style="display: none;">
                <img src="/mco/extjs/resources/images/default/s.gif" alt="" class="x-form-trigger x-form-search-trigger" id="ext-gen123">
            </span>
        </div>
    </div>
    <div class="x-form-clear-left"></div>
</div>

I have tried below id "ext-comp-1060 is dynamic so that I cannot use.

xpath = "//div[@class='x-form-field-wrap x-form-field-trigger-wrap x-trigger-wrap-focus']//input[@class='input.x-form-text.x-form-field.x-form-focus']"

css = "input.x-form-text.x-form-field.x-form-focus"

In My application same input text field I have to use two times one after other first time it's working I have tried like this:

Wait wait = new FluentWait<WebDriver>(driver)
                .withTimeout(10, TimeUnit.SECONDS)
               .pollingEvery(3, TimeUnit.SECONDS);
       wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//label[contains(text(),'Name:')]")));
       ((JavascriptExecutor) driver).executeScript("arguments[0].click();", labelName);

searchName =@FindBy(css = "input.x-form-text.x-form-field.x-form-focus")
private WebElement searchByName;

searchByName.sendKeys(name);

But At same time second time it's not working

Duplicate Which version of TLS is supported by JavaMail 1.4? — Ru Yu
– Ru Yu, Commented Jan 22, 2020 at 12:24

Muzzamil · Accepted Answer · 2020-01-22 14:22:56Z

2

Your webelement is dynamic so you can look for partial matching for element's attribute like Id , class and Name

Wait for element

    By byCss=By.cssSelector("input[id^='ext-comp-']");
    By byXpath= By.xpath("//label[.='Name:']//input");

    WebDriverWait wait = new WebDriverWait(driver, 30);
    wait.until(ExpectedConditions.elementToBeClickable(byCss));

    WebDriverWait wait = new WebDriverWait(driver, 30);
    wait.until(ExpectedConditions.elementToBeClickable(byXpath));

Find element and Click:

    WebElement element = driver.findElement(byCss); 


    WebElement element = driver.findElement(byXpath);

    element.click();

edited Jan 22, 2020 at 14:22

answered Jan 22, 2020 at 13:57

Muzzamil

2,8812 gold badges14 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

undetected Selenium · Accepted Answer · 2020-01-22 13:48:51Z

1

To click() within the desired element you need to induce WebDriverWait for the elementToBeClickable() and you can use either of the following Locator Strategies:

cssSelector:

new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.cssSelector("label.x-form-item-label[id^='ext-gen'][for^='ext-comp-']"))).click();

xpath:

new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//label[@class='x-form-item-label' and starts-with(@id, 'ext-gen')][starts-with(@for, 'ext-comp-') and text()='Name:']"))).click();

answered Jan 22, 2020 at 13:48

undetected Selenium

194k44 gold badges304 silver badges387 bronze badges

Comments

D. Lawrence · Accepted Answer · 2020-01-22 12:52:05Z

0

Does only the numbers change or the whole word? If only the numbers change you can use this as Css locator:

input[id^='ext-comp']

edited Jan 22, 2020 at 12:52

D. Lawrence

9591 gold badge10 silver badges23 bronze badges

answered Jan 22, 2020 at 12:37

Yalcin Batur

598 bronze badges

2 Comments

D. Lawrence Over a year ago

Please add this as a comment of the question as it is definitely not an answer

Yalcin Batur Over a year ago

edited my answer in somethign usefull anyway, thanks for adjusting @D.Lawrence

KunduK · Accepted Answer · 2020-01-22 13:04:18Z

0

Use the following XPATH which will identify the input element with reference to label tag Name:

//label[text()='Name:']/following-sibling::div[1]//input

To handle dynamic element Induce WebDriverWait and wait for elementToBeClickable()

new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//label[text()='Name:']/following-sibling::div[1]//input"))).sendKeys("Hello");

answered Jan 22, 2020 at 13:04

KunduK

33.4k5 gold badges19 silver badges42 bronze badges

2 Comments

sap Over a year ago

Thanks all I have tried all solutions but nothing work for me

sap Over a year ago

Actually I have two same input text field in my app so first one is working I have tried like this: css = "input.x-form-text.x-form-field.x-form-focus" with wait but at same time for second time its not working

Zohair · Accepted Answer · 2020-01-22 13:06:37Z

0

You can try below given xpath.

//div[@class='x-form-element']//child::input[@type='text' AND size='16']

I am accessing the input field using type and size attribute of the web element through a parent level element.

Hope this will solve your problem.

answered Jan 22, 2020 at 13:06

Zohair

2882 silver badges7 bronze badges

Comments

Evgeniy Chiruk · Accepted Answer · 2020-01-22 14:52:08Z

0

I updated your xpath using contains, try this:

xpath = "//div[contains(@class, 'x-form-field-wrap']/input[contains(@class, 'x-form-text']"

edited Jan 22, 2020 at 14:52

answered Jan 22, 2020 at 12:51

Evgeniy Chiruk

3581 silver badge10 bronze badges

Collectives™ on Stack Overflow

How to construct a xpath or css locator to identify the element using Selenium and Java

6 Answers 6

Comments

Comments

2 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

2 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related