I’m trying to validate and test the relay16 webpage.
I’m using selenium robot framework to write my code.
However the relay16 webui has the same xpaths for verifying some of the elements on the page. Which will make it very difficult to verify individual elements on the webpage. For example when validating the thermometers and relay buttons, they all have one same xpath, so selenium robot can only see one element.
Example below is the relay 1 - 2 buttons xpath
//div[@class=‘flow-panel-gutter’]//div[@class=‘flow-panel-item anvil-always-inline-container hide-with-component’]//canvas[@class=‘anvil_notify_add anvil-spacing-above-small anvil-spacing-below-small anvil-component’]
The example below is the text xpath
div[@class=‘flow-panel-gutter’]//div[@class=‘flow-panel-item anvil-always-inline-container hide-with-component’]//input[@type=‘text’]
The two screenshots in the attach file is another example showing two xpaths that are the same with two different relay 1 - 2 buttons. Im not able to upload two images as im restricted but hopefully what I said make sense.
To solve this issue, would it be better to have separate xpath IDs?
Thank you for the link that you sent
If I was to use the Override the base Component class in the startup form/module.
HTML id attribute for components - #5 by owen.campbell
How would that solve the same xpath issues that i’m currently dealing with?
In your app, every anvil component would then have an id attribute which you could set to anything you want and use in your XPATH or CSS selectors.
OK however when using XPATH or CSS selectors, they are the same when trying to validate the relay 1 - 2 buttons. Both different buttons has the same XPATH and CSS selectors. Here is a screenshot below.
You don’t appear to have set the id attribute for those components (or, at least, I can’t see it in the html you’re showing).
Ah ok, how would I go about setting id attribute for those components?
-
Add a component to a form in the normal way and give it a name. e.g. my_important_button
-
In the code for the form, set the id of that component to something unique across the whole of your app. e.g.
class MyForm(MyFormTemplate):
def __init__(self):
self.my_important_button.id = "my_form.my_important_button"
If you really need an id that is guaranteed to be unique, you can always use the uuid module. (but note that ids should start with a letter or underscore)
Alright, how would selenium know which element to click on if I made an id called “my_form.my_important_button” ?
Is there example for locating elements for images. I couldn’t see it in the link above unless I missed it?
It’s just a component like any other. Drag it on to the form and set its id attribute like I showed you.
Something like this?
class MyForm(MyFormTemplate):
def __init__(self):
self.my_important_button.id = "//div[@class='anvil-spacing-above-small anvil-spacing-below-small flow-panel anvil-container anvil-container-overflow flow-spacing-medium anvil-component has-components belongs-to-ONZWMT']//div[@class='flow-panel-gutter']//div[@class='flow-panel-item anvil-always-inline-container hide-with-component']//div[@class='anvil-spacing-above-small anvil-spacing-below-small anvil-image anvil-component']//img[@style='width: 100%;']"
No. Like I showed you in the code above.
what do you mean by add a component to a form?
@robert.james just to summarize the thread so far:
It seems like you are trying to test images rendered in your anvil app via Selenium.
You want to use the xpath to determine whether they are the correct image
But you have noticed that the xpath for images might be duplicated.
@owen.campbell has suggested scrapping xpaths and refer to element ids instead.
There is a linked post that shows how to add an id to an anvil component.
And there is a link to documentation on how to use selenium to locate elements by id.
There is also some confusion about “adding a component”.
You have already added your image components.
You either dragged these into the designer or added them in code.
Hopefully that’s a good summary of where we are.
If you want to persist down the xpath route then you might want to use the absolute xpath.
This is more brittle, as mentioned in selenium documentation, but at least they are guaranteed to be different.
If you want to try the solution with element ids, then you’ll need to add ids to your Image components - see above. (No need to mention xpaths if you’re trying this method - just pick different ids per component you need to refer to).
Let us know what you’ve tried and where you’re stuck.
4 Likes
