xpath/css selector

Support
1

Hi Team,

I am trying a simple script to measure the performance of search activity. Here is the script:

navigate	https://www.uptodate.com/contents/search
setValue	xPath=“//*[@id='tbSearch']”	heart
//setValue	css=#tbSearch
//setValue        id=tbSearch
submitForm	name=searchForm

I tried different selectors to find the search field uniquely ( which btw working fine in selenium and other tools) but no luck. My test doesn’t perform search action and I see below logs:

[DOM] Found 2 elements with non-unique id #tbSearch: (More info: https://goo.gl/9p2vKq) %o %o

I am not getting it, why it says found 2 elements?

Thanks,
Ashish

2

Ah Angular, my old friend. :slight_smile:

There’s a few things going on here…

setValue        id=tbSearch heart

That command successfully sets the value of the tbSearch field to heart. The problem is that Angular needs us to dispatch an “input” event to let us submit the form.

execAndWait	document.querySelector('[id="tbSearch"]').dispatchEvent(new Event("input"));

We’re not quite done yet. It looks like the form itself uses a span for the submit button, rather than a native submit input type. So, you’ll need to take a different approach here rather than trying to submit the form. Instead, we need to “click” on the span. Here’s the full, working script (with a few names to help clarify the results):

setEventName	searchPage
navigate	https://www.uptodate.com/contents/search
setValue	id=tbSearch	heart

setEventName	dispatchEvent
execAndWait	document.querySelector('[id="tbSearch"]').dispatchEvent(new Event("input"));


setEventName	submitSearch
execAndWait	document.querySelector('.newsearch-submit').click();

As for this one:

My test doesn’t perform search action and I see below logs:

[DOM] Found 2 elements with non-unique id #tbSearch: (More info: https://goo.gl/9p2vKq) %o %o

That’s coming from Chrome. If you load the page up in Chrome, they’re flagging this in the dev tools. Interestingly, I don’t see two elements with that ID so something is tripping them up there—likely something related to how Angular is building the DOM. It doesn’t look like it should impact your ability for this script to work though.

2 Likes
3

Thank you so much @tkadlec , thanks for taking your time out to help resolve the issue and provide all the required explanation.

4

@tkadlec Sorry but how to do identify this kind of events? like angular needs us to dispatch an “input” event to let us submit the form. Any reference I should read to get my familiar with this. Many thanks in advance

5

Here’s a post that does a decent job of walking through this particular situation: Testing Angular forms with dispatchEvent

Generally, I could see that it didn’t seem to be letting me execute the submit/click as I expected. I’ve run into my fair share of JS-driven forms in the past so figured it was something funky like this.

1 Like