Question

I have two elements on my page (two ‘cancel’ elements).

<div unselectable="on" class="x-grid-cell-inner x-unselectable" style="text-align: left; " id="ext-gen1179">
Cancel
</div>

<div unselectable="on" class="x-grid-cell-inner x-unselectable" style="text-align: left; " id="ext-gen2951">
Cancel
</div>

How do I click on the second element? Obviously, I can’t us id because it is randomly generated on each visit. What can I use?

Answer 1

1. Use FindElements method, which finds all IWebElements within the current context using the given mechanism. (In this case, you always need to know the index of the element you are looking for.)

IWebDriver driver = new FirefoxDriver();
IList<IWebElement> cancelDivs = driver.FindElements(By.XPath("//div[text()='Cancel']"));
cancelDivs[1].click(); //zero-base index

2. If those cancel buttons are in different sections, which can be identified by non-ExtJS id attributes.

<div id='header'>
    <div unselectable="on" class="x-grid-cell-inner x-unselectable" style="text-align: left; " id="ext-gen1179">Cancel</div>
</div>
<div id='footer'>
    <div unselectable="on" class="x-grid-cell-inner x-unselectable" style="text-align: left; " id="ext-gen2951">Cancel</div>
</div>

IWebElement secondCancelDiv = driver.FindElement(By.XPath("//div[@id='footer']//div[text()='Cancel']"));
secondCancelDiv.Click();

3. If those cancel buttons are in different sections, which can be identified by different ExtJS class attributes. (use the meaningful ones)

<div id='ext-gen1060' class='x-grid3-body'>
    <div unselectable="on" class="x-grid-cell-inner x-unselectable" style="text-align: left; " id="ext-gen1179">Cancel</div>
</div>
<div id='ext-gen2555' class='x-toolbar-right-row'>
    <div unselectable="on" class="x-grid-cell-inner x-unselectable" style="text-align: left; " id="ext-gen2951">Cancel</div>
</div>

IWebElement secondCancelDiv = driver.FindElement(By.XPath("//div[@class='x-toolbar-right-row']//div[text()='Cancel']"));
secondCancelDiv.Click();