In the screen how to navigate to the row which contains the text that needs to be Edited and then click on Edit button.Can some one pls guide.NeedHelp

Question

In the screen how to navigate to the row which contains the text that needs to be Edited and then click on Edit button.

Scenario: I have a screen where I need to find the row which has the value as "test", then click on the Edit button of that row and then edit the value and remark column in that row and save... I have taken the xpath by position of the value "test" in the screen but this cannot work bz if the user enters a new value and the position of the value "test" changes then it will not click on the edit button . Similarly I have also taken the position of the field - value and remark... Below is the Code:

1. First

     //*[@id='mainForm:propertiesTable_data']/tr[47]/td[1]/following::a/span[contains(@class,'ui-icon-pencil')] ….
   

   This is the Xpath of the Edit button which has the value "test" which is in the 47th position in the table

2. I am clicking on the above path with this code -

   PageUtil.clickOnButton(driver, AppXPathsConstants.PropertiesEditIcon);
   

3. WebElement

   Value = driver.findElement(By.xpath(("(//input[contains(@class,'ui-inputfield') and @role='textbox'])[93]")));--------------> 
   

   This is the xPATH OF THE FIELD VALUE which is in the 93rd position

4. So I am clicking on the field, moving to the cursor to the left side of the text box by using Home button and then entering the value for the field which is read from the Feature file:

   Value.click();
   Value.sendKeys(Keys.HOME);
   DriverUtil.waitTime(1000);
   PageUtil.clearInputElement(Value);
   PageUtil.inputFieldEntry(driver,AppXPathsConstants.PropertiesValue,formEntryMap.get("Value"));
   

Now since the position of the field test can change when some other text is entered so it is not the right way of taking the Xpath and Editing and adding the text ….can some one please tell me how to go with this.

Answer 1

The problem with using Xpath is understandable, but it's not easy to help without the HTML code. I'd recommend using another locator strategy. Is it only the row you want to interact with the one with the value "test"? If yes, in that case, if you're working in a table, you could search for all the rows elements and then select the one with that value. Then you'll be able to interact inside it.

I'll put code in ruby, but I think it will give you an idea about what I mean:

table_element = @browswer.find_element(:tag_name, "table")
rows = table_element.find_elements(:tag_name, "tr")
the_row_you_need = rows.select do |row|
   row.text.include? "test"
end.first

// Then you have the proper row to interact
the_row_you_need

Does this help? Basically, I'm recommending avoiding using XPath as a locator, for the sake of your health. It should be the last option IMO

Answer 2

I am answering a bit late,but still posting it if someone faces this similar scenario.

As the OP didn't provide the DOM structure, I am posting the solution on the most possible assumption.

The scenario you have given can be done with XPath. We will use the text search to go to that particular row. The text will be the given value passed by a parameter (which is "test" here). Then we will use the XPath function "ancestor", and go one level up to the "tr" element. As a result, we will have all the "td" elements available under that tr element. The "Edit" icon will also be available there.

I have given the below code in C#:

public By DesiredRow(string value) => By.XPath($"//td[@text(),'{value}']/ancestor::tr//span[contains(@class,'ui-icon-pencil')]");

Now, there is a possibility that multiple rows can have the same value as "test". In that case, there must be some column with unique values on each row such as ID, that will differentiate the rows.

If there is no unique column on the table, then it will be a tough task to do.

I hope the above solution will meet your needs.

Answer 3

When identifying elements on a webpage using XPaths, relying on the position of the element in the HTML structure is not a reliable way to locate the element. Instead, it is recommended to use unique attributes of the element, such as its ID or class name, to locate it.

In this case, to locate the row that contains the text test, you can use an XPath that searches for the element based on its text content. Here's an example:

//tr[contains(., 'test')]/td/a/span[contains(@class, 'ui-icon-pencil')]

This XPath searches for a tr element that contains the text test, then finds an a element that contains a span element with a class that contains ui-icon-pencil.

To edit the value and remark columns in that row, you can use relative XPaths to locate the input elements for those columns within the same row. Here's an example:

//tr[contains(., 'test')]/td/input[contains(@class, 'value-input')]
//tr[contains(., 'test')]/td/input[contains(@class, 'remark-input')]

These XPaths search for input elements that have a class that contains value-input or remark-input, respectively, within the same <tr> element that contains the text test.

Using these XPaths, you can modify the code to find and edit the appropriate elements dynamically based on their unique attributes rather than relying on their position in the HTML structure.