Python + Selenium:如何切换到overlay

时间:2018-03-08 15:34:32

标签: python html selenium iframe overlay

driver.find_element_by_class_name("lnkClassInfo").click()
time.sleep(2)
element = driver.find_element_by_css_selector("#popup input[value='BOOK THIS CLASS NOW']")
driver.execute_script("arguments[0].click();", element)

错误:selenium.common.exceptions.NoSuchElementException:消息:没有这样的元素:无法找到元素:{"方法":" css选择器","选择器&# 34;:" #popup输入[value ='现在预订此课程']"}

Main Page

Overlay

我的代码的第1行允许我点击主页面上面的上述时间段,这会触发弹出的叠加层。我的目标是点击叠加层上的班级预订按钮。根据我的理解,Python需要切换到overlay / iframe。请告知如何对此进行编码,因为到目前为止我的尝试都没有成功。

相关主页HTML:

 <script type="text/javascript">

    $(document).ready(function () {

        setPageScroll('dashboard');

        $(".club-selections a").click(function () {
            $("#ctl00_cphContents_ddlClub").val($(this).attr('rel'));
            $("form:first").submit();
        });

        $(".schedule-selection a").click(function () {
            $("#ctl00_cphContents_ddlSchedule").val($(this).attr('rel'));
            $("form:first").submit();
        });

        $(".club-selections a[rel=" + $("#ctl00_cphContents_ddlClub").val() + "]").addClass('selected');
        $(".schedule-selection a[rel=" + $("#ctl00_cphContents_ddlSchedule").val() + "]").addClass('selected');

        $(".lnkClassInfo").click(function () {
            $.colorbox({
                href: $(this).attr("href"),
                title: $(this).attr("title"),
                transition: 'fade', iframe: true,
                width: 566, height: 600,
                fixed: true
            });
            return false;
        });

        var FIREFOX = /Firefox/i.test(navigator.userAgent);

        if (FIREFOX) {
            $('.tbl-wrapper .tbl-container').scroll(function () {
                $('title').html($(this).scrollLeft());
                $(this).find('a.lnkClassInfo').css('margin-right', $(this).scrollLeft() + "px");
            });
        }

    });
</script>


<a href='popup/class-info.aspx?tcl_id=307632'     title='Class Info.'     style='line-height:74px; height:74px; top:413px;'     class='lnkClassInfo'><span class='class-name'>ICE II</span><span>- Zaf -<br />11:30 - 12:30 PM<br /><img src='https://trueclassbooking.com.sg/userfiles/class-tags/cover.jpg' alt='Cover' title='Cover' style='height:16px;' /></span></a>

重叠HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="theme-color" content="#592954" /><meta name="viewport" content="width=1024, user-scalable=yes" /><title>
CBSS System - Class Info.
</title>
<link href="https://trueclassbooking.com.sg/member/css/style.all.css?v=2.22.03" rel="stylesheet" type="text/css" />
<!--[if IE]>
    <link href="https://trueclassbooking.com.sg/member/css/ie.css?v=2.22.03" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE 8]>
    <link href="https://trueclassbooking.com.sg/member/css/ie8.css?v=2.22.03" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>

<form name="aspnetForm" method="post" action="class-info.aspx?tcl_id=307632" id="aspnetForm">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['aspnetForm'];
if (!theForm) {
theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
    theForm.__EVENTTARGET.value = eventTarget;
    theForm.__EVENTARGUMENT.value = eventArgument;
    theForm.submit();
}
}
//]]>
</script>


<div>

<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="4B353318" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgKm0IbODAKt8aSHB8YJdcVegLzMqZZLYYPUOKYp+jf1" />
</div>

    <!-- MESSENGER -->
    <div id="message-wrapper" class="popup-message-wrapper" title="Click to hide."></div>

    <!-- CONTENTS -->
    <div id="popup">


<div class="class-info">

    <div class="header">
        <div class="left al">
            <div class="time">11:30 - 12:30 PM</div>
        </div>
        <div class="right ar" style='display:none;'>
            <span style="color:#b91be0"></span> SLOTS
            &nbsp; <span style="color:#999999;">|</span> &nbsp;
            <span style="color:#cc0066"></span> SLOTS AVAILABLE
        </div>
    </div>
    <div class="header">
        <div class="left al">
            <div class="class-name">ICE II - Zaf</div>
        </div>
        <div class="right ar">
            <a id="ctl00_cphContents_btnBook" class="btn-gradient" href="javascript:__doPostBack('ctl00$cphContents$btnBook','')">BOOK THIS CLASS NOW</a>


        </div>
    </div>

    <hr />

    <div class="description">
        <div class="header">
            <div class="left">
                ICE II
            </div>
            <div class="right">
                <img src='https://trueclassbooking.com.sg/userfiles/class-tags/cover.jpg' alt='Cover' title='Cover' style='height:16px;' />
            </div>
        </div>
        <p><span style="font-size:24px"><strong>Indoor Cycling Experience (I.C.E.) I</strong></span><br />
Highly recommended for those who want a solid foundation in bike set-up &amp; cycling technique. A high energy workout, this indoor cycling workout is paced with light and music settings to create a vibrant atmosphere.<br />
&nbsp;<br />
Push your limits and get intense through warm-up, sprints, climbs and cool-down segments , with changing body positions, pedal speed and resistance.<br />
&nbsp;<br />
<span style="font-size:24px"><strong>Indoor Cycling Experience (I.C.E.) II</strong></span><br />
This programme has proven to be one of the most well-received fat-loss programmes thus far! Simple yet hyper-challenging!<br />
&nbsp;<br />
<span style="font-size:24px"><strong>Indoor Cycling Experience (I.C.E.) III</strong></span><br />
Expectations from participants as well as instructors alike are astronomical! Must have had regular training with Spin II to attempt this class.        
</p>
    </div>
</div>


    </div>

</form>

<script type="text/javascript" src="https://trueclassbooking.com.sg/member/js/script.all.js?v=2.22.03"></script>
<!-- JAVSCRIPTS -->


<script>
    (function (i, s, o, g, r, a, m) {
        i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
            (i[r].q = i[r].q || []).push(arguments)
        }, i[r].l = 1 * new Date(); a = s.createElement(o),
m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g;         
m.parentNode.insertBefore(a, m)
    })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

    ga('create', 'UA-45242383-1', 'trueclassbooking.com.sg');
    ga('send', 'pageview');

</script>

<!-- EXCEPTIONS -->

</body>
</html>

1 个答案:

答案 0 :(得分:1)

您不应该切换到叠加层,因为它只是一个简单的模态窗口(div节点)。并且目标元素看起来不像input,而是链接

<a id="ctl00_cphContents_btnBook" class="btn-gradient" href="javascript:__doPostBack('ctl00$cphContents$btnBook','')">BOOK THIS CLASS NOW</a>

请尝试以下等待链接显示并单击它:

from selenium.webdriver.support.ui import WebDriverWait as wait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC

driver.find_element_by_class_name("lnkClassInfo").click()
wait(driver, 5).until(EC.element_to_be_clickable((By.LINK_TEXT, "BOOK THIS CLASS NOW"))).click()

Here您可以找到有关iframe以及它的外观的更多信息......