Selenium：如何跟踪DOM操作以查找元素的可见性？

Question

Is there a possibility of watching a webpage for events like: an element has been made visible?

And is this possible using selenium?

For example, If I define a timeline for watching a webpage from startTime to endTime. From startTime to endTime, different webpage events could be captured, which includes dom manipulations ( for example: html element has got added and been made visible ). Once endTime is reached, I would iterate over the list of events and I could validate a particular event has occurred or not.

In my case, I would like to find out if an html element has been made visible or not.

The usual way to find out is to use webdriver's API to check visibility of an element, with some timeout.

But, I would like to capture different events and have some callbacks, thereby validating that some expected event has occurred.

[UPDATE]: Do we have a support for MutationObserver in Selenium?

Answer 1

Yes, you use explicit wait as shown in the WebDriver Documentation .

The ExpectedConditions class provides many useful element states such as ElementToBeVisible , ElementToBeClickable , etc.

That should do the trick.

Answer 2

Here's a sample of what you can do:

WebDriverWait wait = new WebDriverWait(driver, 10); // how many seconds
wait.until(ExpectedConditions.elementToBeClickable(myPage.getButton()));

For more sophisticated things you can provide your own Function for WebDriverWait , ie:

wait.until(o -> {
    return driver.getWindowHandles().stream().collect(Collectors.toList()).get(tabNo);
});

Answer 3

Selenium doesn't support events, so you probably should move to another tool like puppetter which seems to support events. That said, it's still possible to record events with a script injection by storing all the events in a variable in the page:

jse.executeScript(
  "var window.__events = [];" +
  "new MutationObserver(function(mutations) {" +
  "    mutations.forEach(function(mutation) {" +
  "        window.__events.push(mutation);" +
  "    });" +
  "})).takeRecords();");

Then simply return the list:

Object events = jse.executeScript("return window.__events;");