'Using selenium python how do i locate element within vue router-view

I have been trying to switch to an iframe for days now but I keep getting the NoSuchElementException I tried using different locators (By.XPATH, By.CSS_SELECTOR, By.ID) but still no success, selenium just doesn't seem to be able to locate the element. Here is what the code looks like within the chrome Devtool(inspect element)

<div id="maincontent">
<div id="router_app"><div id="sports_page" class="account-page" d=""><div class="ap-left"><div class="ap-left__user"><p class="ap-left__welcome">
    Welcome
</p> <div class="ap-left__name">
    John
</div> <div class="ap-left__extra"><div class="ap-left__extra-item"><p>Main account (NGN)</p> <div>0</div></div> <!----> <!----> <!----></div></div> <nav class="ap-left-nav"><div class="ap-left-nav__item ap-left-nav__item_account"><!---->
    Personal profile
    <!----></div><div class="ap-left-nav__item ap-left-nav__item_account-security"><!---->
    Security
    <i class="ap-left-nav-item-warning ap-left-nav-item-warning--bad"></i></div><div class="ap-left-nav__item ap-left-nav__item_partner"><!---->
    Invite friends
    <!----></div><div class="ap-left-nav__item ap-left-nav__item_settings"><!---->
    Account settings
    <!----></div><div class="ap-left-nav__item ap-left-nav__item_recharge active"><!---->
    Deposit
    <!----></div><div class="ap-left-nav__item ap-left-nav__item_achievements"><!---->
    Promotions 
    <!----></div><div class="ap-left-nav__item ap-left-nav__item_deduce"><!---->
    Withdraw funds
    <!----></div><div class="ap-left-nav__item ap-left-nav__item_history"><!---->
    Bet history
    <!----></div><div class="ap-left-nav__item ap-left-nav__item_transactions "><!---->
    Transaction history
    <!----></div><div class="ap-left-nav__item ap-left-nav__item_casino"><!---->
    Casino
    <!----></div><div class="ap-left-nav__item ap-left-nav__item_casino-sub"><!---->
    VIP cashback
    <!----></div><div class="ap-left-nav__item ap-left-nav__item_bonuses"><!---->
    Bonuses and gifts
    <!----></div><div class="ap-left-nav__item ap-left-nav__item_admin"><!---->
    Query for Administrator
    <!----></div> <a class="ap-left-nav__item_exit"><!---->
    Log out
</a></nav></div> <div class="ap__center">
 <div class="ap__content"><div class="ap__maincontent">
 <div>
 <iframe id="payments_frame" src="/paysystems/deposit/?host=https%3A%2F%2F1xbet.com%2F&amp;lng=en&amp;h_token=eyJhbGciOiJFUzI1NiIsImtpZCI6IjEiLCJ0eXAiOiJKV1QifQ.eyJzdWIiOiI1MC80MDgxODMyODMiLCJwaWQiOiIxIiwianRpIjoiMC8wVWZqSklqOGlrRjcyd3VTN2tJZGhJS0lpcUFMWFFQZ09LcjlyV0FCbTA4IiwiYXBwIjoiTkEiLCJpbm5lciI6InRydWUiLCJuYmYiOjE2NDg2OTY2MDIsImV4cCI6MTY0ODcxMTAwMiwiaWF0IjoxNjQ4Njk2NjAyfQ.lCXexy6lBvlfmxL426-k9OJjKlnYeDM1PMYLMCKl0q7k78iHR-cyjR9N-ypY0ybcvFkaFChxdwABExDY1r85aw" name="16486966021509854477" height="500" width="100%" frameborder="0" scrolling="no" seamless="seamless" style="height: 1968px; min-height: 600px;"></iframe> <!----></div></div></div> <!----> <!----></div> </div></div>
<div class="footer">
    <div class="clear"></div>

i tried adding all kinds of wait but still no success

driver.implicitly_wait(5)

WebDriverWait(driver, 15).until(
             EC.frame_to_be_available_and_switch_to_it(
                 (By.XPATH, '/html/body/div[2]/div[1]/div/div[2]/div/div/div/iframe')
            )
        )
 deposit_frame = driver.find_element(By.XPATH,'/html/body/div[2]/div[1]/div/div[2]/div/div/div/iframe')
 driver.switch_to.frame(deposit_frame)

and keep getting this error

selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"xpath","selector":"/html/body/div[2]/div[1]/div/div[2]/div/div/div/iframe"}

So I decided to check the view-page source, then I discovered the iframe wasn't directly in the code, here is what it looks like

<div id="maincontent">
<div id="router_app">
    <router-view :d="[]"></router-view>    </div>
<div class="footer">
    <div class="clear"></div>

Please note that I am fairly new to coding and I have no prior knowledge about Vue.js I just did a little research into what a router-view was and discovered it has to do with vue.js routing

Please how do I access the iframe element



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source