How to wait for img src attribute to change using Selenium and JavaScript?

Question

let's say I have an element:

<div>
 <img src='src1'>
</div>

and after some time src changes to some other link
so how to I wait for it (or any property in general) to change?

maybe something like this:

await driver.wait(until.elementAttributeChanged(el,'src'),3000);

Do you know what will be the expected value once it's changed to some other link ? — cruisepandey, Nov 20 '21 at 18:14
@cruisepandey no i will have no idea what the new src will be — , Nov 20 '21 at 18:15
@cruisepandey it might change multiple times but if I can figure out how to detect it when it's changed once, I can figure out how to detect multiple changes — , Nov 20 '21 at 18:16
@Prophet yes I know src1, but it would be better if a solution could handle unkown values as well :) — , Nov 20 '21 at 18:17
If you know the initial value then you can have a condition that if that src does not meet the value that you've, then it must have been changed, make any sense to you ? — cruisepandey, Nov 20 '21 at 18:18
@cruisepandey yes but I don't know after what amount of time the value will be changed — , Nov 20 '21 at 18:19
@cakelover : We can have a loop for 30 seconds or so.. to check if the value has been changed or not. — cruisepandey, Nov 20 '21 at 18:27
@cruisepandey i would have done that but it seems inefficient, is there a more spontaneous solution? — , Nov 20 '21 at 18:28
@cakelover : None that I am aware of, with the pre-conditions that you've. Good luck ! — cruisepandey, Nov 20 '21 at 18:29
I'm not sure if this will solve your problem, but after some google search i found this link - https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver. See if you can use it. — Swaroop Humane, Nov 20 '21 at 18:46
@cakelover unknown value can be passed as a parameter, and the locator can be built dynamically depending on it. it's not a problem at all. In case the value is unique. I.e. no more elements will have this value. — Prophet, Nov 21 '21 at 07:27

score 0 · Accepted Answer · answered Nov 20 '21 at 19:03

0

To wait for the src attribute of the <img> to change using Selenium and node.js you can use the following until condition:

stalenessOf( element ): Creates a condition that will wait for the given element to become stale. An element is considered stale once it is removed from the DOM, or a new page has loaded.
```
let element = await driver.findElement(By.id('elementID'));
await driver.wait(until.stalenessOf(element),1000);
```

answered Nov 20 '21 at 19:03

undetected Selenium

183,867
41
278
352

I'm a little confused about the definition of stale, does modifying the src remove the element out of the DOM? if so then does that end the waiting ? could u elaborate a little on how this works? – Nov 20 '21 at 19:08
[_Staleness_](https://stackoverflow.com/questions/44838538/staleelementreference-exception-in-pagefactory/44844879#44844879) indicates that the previous reference of the element is now stale and the element reference is no longer present on the DOM of the page, i.e. The (previous) element has been deleted by a JavaScript or AjaxCall and is replaced by a (new) element with the same ID or other attributes. – undetected Selenium Nov 20 '21 at 19:11
wait so does changing an attribute replace the element with a new one? – Nov 20 '21 at 19:16
1

@cakelover yes, of-coarse – undetected Selenium Nov 20 '21 at 19:18

score 0 · Answer 2 · answered Nov 20 '21 at 21:27

Just to make DebanjanB's answer more precise.
Since we want to indicate the changing of src attribute value of some element, we can use locator based on the value of src attribute of that element. So the code can be something like this:

let element = await driver.findElement(By.xpath('//img[@src="src1"]'));
await driver.wait(until.stalenessOf(element),1000);

How to wait for img src attribute to change using Selenium and JavaScript?

2 Answers2