Click Interception in a weird place (or missing click) when attempting to click a button

[Jediweirdo]

To be clear, this is probably not a bug more than it is something I'm implementing wrong. For a project I'm working on, I'm currently working on a way to give my users the option of logging in SeleniumBase through Google's login portal. Things go smoothly until Selenium needs to use the user's authenticator code to get passed two-factor authentication. Getting and inputting the MFA code works like a charm, but anytime SB tries to press the "Next" button, something gets in the way:

selenium.common.exceptions.ElementClickInterceptedException: Message: element click intercepted: Element <div jscontroller="f8Gu1e" jsaction="click:cOuCgd;JIbuQc:JIbuQc;" jsname="Njthtb" class="XjS9D TrZEUc" id="totpNext">...</div> is not clickable at point (955, 631). Other element would receive the click: <div class="S7xv8 LZgQXe">...</div>

Google has 90% of their element attributes written in ancient tongue, so it's better if I show you a screenshot of the element in the wild:

I'm not a JS coder and certainly not a website designer so correct me if I'm wrong for saying this, but isn't that element supposed to be behind the next button? The only way I thought that this was possible was if the click was completely off its mark, so I tried different selectors hoping that it would change something (it did not). The ones I've tried so far are...

• #totp (a div a couple layers above the button)
• span:contains("Next") and button:contains("Next") (the text inside the button)
• button.VfPpkd-LgbsSe.VfPpkd-LgbsSe-OWXEXe-k8QpJ.VfPpkd-LgbsSe-OWXEXe-dgl2Hf.nCP5yc.AjY5Oe.DuMIQc.LQeN7.BqKGqe.Jskylb.TrZEUc.lw1w4b (Ancient Google Speak for the button itself)

And here's the heavily-stripped-down code I gave SeleniumBase to fill out the 2fa page:

self.assert_element_not_visible("div[role='progressbar']") # Prevents the code from running while Google is processing previous page information

self.save_screenshot(f"{self._debug_screenshots_path}/Login/2fa Chosen - Authenticator.png")
    
for attempt in range(max_attempts) True:
  current_otp = str(self.get_mfa_code(self._authentication_key)) # Not using enter_mfa_code due to code context I left out
  try:
    self.type('input[type="tel"]', current_otp)
    self.click("#totpNext") # The line here is the one giving the error
  except NoSuchElementException as e:
    locked_out = True
  else:
    locked_out = False
...

One thing to note about the code above is that self.get_mfa_code is not the same as SeleniumBase's get_mfa_code. Since my implementation of SeleniumBase uses syntax format #23 (Direct Import Driver Manager), I had to make my own version using pyotp (which I imagine the original version uses as well). Rest assured though, I've already tested my version of get_mfa_code and it works fine.

With all that said, do you have any idea how the background of a page is intercepting with something in front of it? The code I had of this used to work fine mere hours ago, but if there's one thing code loves doing, it's randomly breaking whenever it feels like it.

[mdmintz]

If you need to click a hidden element (or an obscured element), you can use js_click(selector).
You might also be able to use The Recorder in UC Mode:
sbase recorder --uc (in order to record a script using the correct selectors).
As far as writing scripts goes, anything less than using CDP Mode may get you detected.