[FIXED] Click not going through but says it is Selenium js

Issue

With Selenium, I'm filling in a form, clicking on a button that takes me to a new page on the same tab, then I want to be able to click on a button in the new page. however I'm getting

no such element: Unable to locate element: {"method":"css selector","selector":"*[id="widget_5052246"]"}

I figured out that it's not waiting for my page to load fully, before trying to click on the next button. So I looked around and found this. added

driver.wait(function() {
  return driver.executeScript('return document.readyState').then(function(readyState) {
    return readyState === 'complete';
  });
}); 

However, it didn't work...

Found that I could do

await driver.wait(until.elementLocated(By.id("widget_5052246")), 20000)

then after click on the element.

But I'm getting

Error: Timeout of 30000ms exceeded. For async tests and hooks, ensure "done()" is called; if returning a Promise, ensure it resolves.

So yeah I'm not sure how I can wait for the page to load correctly...

HTML code of button :

<button id="widget_5052246" class="adbx-widget btn btn-default" data-action="play" ng-style="vm.style" ng-click="vm.click($event);" ng-mouseover="vm.onMouseOver()" ng-mouseleave="vm.onMouseLeave()" ng-mousedown="vm.onMouseDown()" ng-mouseup="vm.onMouseUp()" ng-touchstart="vm.onTouchStart()" ng-touchend="vm.onTouchEnd()" ng-hide="vm.hide" identifier="5052246" aria-hidden="false" style="visibility: visible; width: auto; height: auto; left: 260px; top: 253px; z-index: 1; transform: rotate(0deg); cursor: pointer; outline: none;"><!-- ngIf: vm.styleClass === '' --> <!-- ngIf: vm.styleClass !== '' --><span ng-if="vm.styleClass !== ''" disabled="disabled" style="opacity: 1; cursor: pointer" translate="Cliquez pour découvrir si vous avez gagné" class="ng-scope ng-binding">Cliquez pour découvrir si vous avez gagné</span><!-- end ngIf: vm.styleClass !== '' --></button>

Found that the problem wasn't that the load time wasn't happening but that the click wasn't going through. That click usually lead to a new page yet it never would go to that next page.

Edit : Added code of button

Solution

Based on the HTML shared by OP, I have constructed this xpath

//button[starts-with(@id,'widget') and starts-with(@class,'adbx-widget') and @identifier]

first you should check whether we have unique matching node in HTMLDOM or not.

PS : Please check in the dev tools (Google chrome) if we have unique entry in HTML DOM or not.

Steps to check:

Press F12 in Chrome -> go to element section -> do a CTRL + F -> then paste the xpath and see, if your desired element is getting highlighted with 1/1 matching node.

If we have unique entry we can proceed further to how to click on this element.

let ele = await driver.wait(until.elementLocated(By.xpath("//button[starts-with(@id,'widget') and starts-with(@class,'adbx-widget') and @identifier]")),10000);
ele.click();

Please refer here for more on explicit waits.

Update :

In python, I would have this script :

driver = webdriver.Chrome(driver_path)
driver.maximize_window()
driver.implicitly_wait(30)
wait = WebDriverWait(driver, 30)
driver.get("https://adbx.io/click-win-gujx1tfvdf/0/o4R2a/")

wait.until(EC.element_to_be_clickable((By.ID, "cookies-banner-confirmation-button"))).click()  #to click on Accepter button.
wait.until(EC.element_to_be_clickable((By.ID, "lastname"))).send_keys('fakelastname') # to send Nom*
wait.until(EC.element_to_be_clickable((By.ID, "firstname"))).send_keys('fakeFirstName') # to send Prenom*
wait.until(EC.element_to_be_clickable((By.ID, "email"))).send_keys('[email protected]') # to send Email*
wait.until(EC.element_to_be_clickable((By.CSS_SELECTOR, "div.md-container.md-ink-ripple"))).click()  # to click the J'accepte le règlement*

wait.until(EC.element_to_be_clickable((By.CSS_SELECTOR, "button[ng-click='vm.click($event);']"))).click()  # to click on Valider

wait.until(EC.element_to_be_clickable((By.XPATH, "//button[@data-action]"))).click()  # to click on Cliquez pour découvrir si vous avez gagné

ele = wait.until(EC.element_to_be_clickable((By.CSS_SELECTOR, "div[ng-bind-html='vm.text']")))
print(ele.text)

Answered By - cruisepandey