I can't locate this element.. I'm trying to un-check the history box and dl box (they're checked by default)
from selenium import webdriver
import time
chrome_path = r"C:\Users\Skid\Desktop\chromedriver.exe"
driver = webdriver.Chrome(chrome_path)
driver.get("chrome://settings/clearBrowserData")
driver.find_element_by_xpath("""//*[#id=delete-browsing-history-checkbox"]""") #unchecks history
driver.find_element_by_xpath("""//*[#id="delete-download-history-checkbox"]""") #unchecks dl history
This is the page source that someone wanted me to update.
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" id="uber" class="" i18n-values="dir:textdirection;lang:language" dir="ltr" lang="en" i18n-processed=""><head>
<meta charset="utf-8" />
<title i18n-content="pageTitle">Settings - Clear browsing data</title>
<link id="favicon" rel="icon" type="image/png" sizes="16x16" href="chrome://theme/IDR_SETTINGS_FAVICON" />
<link id="favicon2x" rel="icon" type="image/png" sizes="32x32" href="chrome://theme/IDR_SETTINGS_FAVICON#2x" />
<link rel="stylesheet" href="chrome://resources/css/chrome_shared.css" />
<style>/* Copyright (c) 2012 The Chromium Authors. All rights reserved.
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file. */
body {
/* http://crbug.com/129406 --- horizontal scrollbars flicker when changing
* sections. */
overflow-x: hidden;
}
#navigation {
height: 100%;
left: 0;
/* This is a hack to prevent the navigation bar from occluding pointer events
* from the bottom scroll bar (which shows when one needs to horizontally
* scroll). Corresponding padding-top to offset this is in uber_frame.css */
margin-top: -20px;
position: absolute;
/* This value is different from the left value to compensate for the scroll
* bar (which is always on and to the right) in RTL. */
right: 15px;
width: 155px;
z-index: 3;
}
#navigation.background {
z-index: 1;
}
#navigation.changing-content {
-webkit-transition: -webkit-transform 100ms, width 100ms;
}
.iframe-container {
-webkit-margin-start: -20px;
-webkit-transition: margin 100ms, opacity 100ms;
bottom: 0;
left: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
.iframe-container.selected {
-webkit-margin-start: 0;
-webkit-transition: margin 200ms, opacity 200ms;
-webkit-transition-delay: 100ms;
opacity: 1;
z-index: 2;
}
.iframe-container.expanded {
left: 0;
}
iframe {
border: none;
display: block;
height: 100%;
width: 100%;
}
</style>
<script src="chrome://resources/js/cr.js"></script>
<script src="chrome://resources/js/cr/ui/focus_manager.js"></script>
<script src="chrome://resources/js/load_time_data.js"></script>
<script src="chrome://resources/js/util.js"></script>
<script src="chrome://chrome/uber.js"></script>
<script src="chrome://chrome/uber_utils.js"></script>
</head>
<body>
<div id="navigation" data-width="155" class="changing-content background" style="transform: translateX(0px);"><iframe src="chrome://uber-frame/" name="chrome" role="presentation" tabindex="-1" aria-hidden="true"></iframe></div>
<div class="iframe-container" i18n-values="id:historyHost; data-url:historyFrameURL;" data-favicon="IDR_HISTORY_FAVICON" id="history" data-url="chrome://history-frame/" hidden="" aria-hidden="true"></div>
<div class="iframe-container" i18n-values="id:extensionsHost; data-url:extensionsFrameURL;" data-favicon="IDR_EXTENSIONS_FAVICON" id="extensions" data-url="chrome://extensions-frame/" hidden="" aria-hidden="true"></div>
<div class="iframe-container selected" i18n-values="id:settingsHost; data-url:settingsFrameURL;" data-favicon="IDR_SETTINGS_FAVICON" id="settings" data-url="chrome://settings-frame/" aria-hidden="false" data-title="Settings - Clear browsing data"><iframe name="settings" role="presentation" src="chrome://settings-frame/clearBrowserData" data-ready="true"></iframe></div>
<div class="iframe-container" i18n-values="id:helpHost; data-url:helpFrameURL;" data-favicon="IDR_PRODUCT_LOGO_16" id="help" data-url="chrome://help-frame/" hidden="" aria-hidden="true"></div>
<script src="chrome://chrome/strings.js"></script>
<script src="chrome://resources/js/i18n_template.js"></script>
</body></html>
driver.find_element_by_xpath is just looking for the checkbox and returning it as WebElement. You want to click on it to unchecked it
driver.find_element_by_xpath("""//*[#id="delete-browsing-history-checkbox"]""").click()
Also, you forgot apostrophes in the first xpath after #id=. It should be like in the example above.
Edit
You can try locating the checkbox by id
driver.find_element_by_id("delete-browsing-history-checkbox").click()
Edit 2
The checkbox are inside iframe. You need to switch to it first
driver.switch_to.frame("settings") # switch to the iframe by name attribute
# driver.switch_to.frame(driver.find_element_by_name("settings")) # should also work
driver.find_element_by_id("delete-browsing-history-checkbox").click()
driver.switch_to.default_content() # switch back to main window
Can you add to your question what you get as body from selenium?
driver.get("chrome://settings/clearBrowserData")
driver.page_source
If I check the source code in Google Chrome of this page I get:
view-source:chrome://chrome/settings/clearBrowserData
<body>
<div id="navigation"><iframe src="chrome://uber-frame/" name="chrome" role="presentation"></iframe></div>
<div class="iframe-container"
i18n-values="id:historyHost; data-url:historyFrameURL;"
data-favicon="IDR_HISTORY_FAVICON"></div>
<div class="iframe-container"
i18n-values="id:extensionsHost; data-url:extensionsFrameURL;"
data-favicon="IDR_EXTENSIONS_FAVICON"></div>
<div class="iframe-container"
i18n-values="id:settingsHost; data-url:settingsFrameURL;"
data-favicon="IDR_SETTINGS_FAVICON"></div>
<div class="iframe-container"
i18n-values="id:helpHost; data-url:helpFrameURL;"
data-favicon="IDR_PRODUCT_LOGO_16"></div>
<script src="chrome://chrome/strings.js"></script>
<script src="chrome://resources/js/i18n_template.js"></script>
</body>
It might be necessary to find another way to do it, if your driver cannot see this node.
Edit
In the source code you posted as page_source returned from selenium, there isn't the node you are trying to find.
After doing a find_element_by... all you get is the element. You also need to have a .click() on that element.
Either:
elem = driver.find_element_by_xpath("""//*[#id=delete-browsing-history-checkbox"]""")
elem.click()
or:
driver.find_element_by_xpath("""//*[#id=delete-browsing-history-checkbox"]""").click()
Btw, you could just use find_element_by_id("delete-browsing-history-checkbox") in your case.
Also, I don't think selenium works on non-web pages. So chrome settings and Firefox's about:config pages (for example) don't work with selenium.
Related
I am using IronPython 2.7.9.0 on Grasshopper and Rhino to web scrape data from a specific widget on this link: https://vemcount.app/embed/widget/uOCRuLPangWo5fT?locale=en
The code I am using is as follows
import urllib
import os
web = urllib.urlopen(url)
html = web.read()
web.close()
The html output contains all the html code from this link except for the parts I need. When I inspect it on chrome it has a "flex" button next to it such as the following image.
image that summarizes the issue I am facing
Anything that is rooted under the line with a "flex" button does not appear in the scraping result and comes as a blank line.
This is the output html I get:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Central Library - Duhig North & Link</title>
<meta charset="utf-8">
<meta name="google" content="notranslate">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="csrf-token" content="">
<link rel="stylesheet" href="/build/app.css?id=2fefc4f9faa59eebcb4b">
<link rel="stylesheet" href="https://vemcount.app/fonts/hamburg_serial/stylesheet.css">
<style>
#embed, #main {
height: 100vh;
}
.vue-grid-item {
margin-bottom: 0px !important;
}
.powered_by {
position: absolute;
bottom: 0px;
right: 0px;
background-color: rgba(0, 0, 0, 0.18);
color: #fff;
padding: 2px 5px;
font-size: 9px;
}
.powered_by:hover, .powered_by:link, .powered_by:visited {
text-decoration: none;
display: none;
}
.dashboard-widget .relative {
overflow: hidden !important;
}
</style>
<script>
window.App = {"socketAppKey":"eJSkWUHWpwolvjVcT2ZxUJZXnDpxtRljdZl74fKr","socketCluster":null,"socketHost":"websocket.vemcount.com","socketPort":443,"socketSecurePort":443,"socketDisableStats":true,"socketEncrypted":true,"locale":"en","settings":[{"name":"type","value":"{\"count_in\":\"column\"}"},{"name":"period","value":"[\"yesterday\"]"},{"name":"period_step","value":"hour"},{"name":"hide_datalabel","value":"0"},{"name":"currency","value":"AUD"},{"name":"show_days","value":"[0,1,2,3,4,5,6]"},{"name":"show_months","value":"[1,2,3,4,5,6,7,8,9,10,11,12]"},{"name":"show_hours_from","value":"00:00"},{"name":"show_hours_to","value":"23:45"},{"name":"data_heatmap","value":"blue"},{"name":"weather_metrics","value":"0"},{"name":"first_day_of_week","value":"1"},{"name":"time_format24","value":"time_format24"},{"name":"date_time_format","value":"2"},{"name":"number_grouping","value":","},{"name":"number_decimal","value":"."},{"name":"opening_hours_overlap","value":"0"},{"name":"data_output","value":"count_in"}],"sound":null};
</script>
<script src="/build/lang/en.js?v=2022.04.4"></script>
</head>
<body class="bg-transparent">
<main id="main">
<div id="embed" >
<div class="w-full h-full vue-grid-item cssTransforms" style="position: absolute;">
<live-inside :embedded="true" :widget="{"id":81438,"pane_id":4005,"title":"Central Library - Duhig North & Link","description":"Live occupancy \/ Seating capacity","x":0,"y":0,"w":2,"h":1,"bg_color":"red","text_color":"black","type":"live-inside","secret":"uOCRuLPangWo5fT","internal":"VRg4JTIRrtJ7Pwg","embeddable":1,"content":{"target":1100,"bidirectional":true,"target_enable":true,"prettify":false,"target_type":"donut","target_donut_hide_metric":false,"target_donut_target_hide_label":false,"target_visual_inside_text":null,"target_visual_available_text":null,"target_screen_ok_title":null,"target_screen_ok_text":null,"target_screen_ok_color":"#38A169","target_screen_ok_image":-1,"target_screen_warning_title":null,"target_screen_warning_pe</live-inside>
</div>
</div>
</main>
<a title=" Vemco Group A/S " class="powered_by" target="_blank"
href="http://vemcount.com">Powered by
<b>vemcount.com</b>
</a>
<script src="/build/manifest.js?id=7f2e9aa3431c681a4683"></script>
<script src="/build/vendor.js?id=19867aae3b960cda7d79"></script>
<script src="/build/embed.js?id=2ff0173dd78c5c1f99c6"></script>
</body>
</html>
As you can see it is missing some lines, which are the lines that have a flex button next to them. (btw I have shortended the code that is in so I dont reach the 30000 character limit).
I am interested in the number 311 which changes every 2 seconds in the live link and it can be found in the html code between
<span>311</span>
Is there a way I can get this value, as well as any other value, using IronPython?
P.S. I am a noob in actual coding, that's why I might have issues with terminologies, but have a fair background in visual scripting. Your help is much appreciated. Thanks.
Just in case you had the same query or were struggling with dynamic web scraping. You have to use CPython and install a webscraper such as Playwright or BS + Selenium
I used playwright which is far more straightforward and has a very much appreciated inner_html() function which reads straight into the dynamic flex HTML code. Here is the code for reference.
#part of the help to write the script I got from https://stackoverflow.com/questions/64303326/using-playwright-for-python-how-do-i-select-or-find-an-element
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
browser = p.chromium.launch(slow_mo=1000)
page = browser.new_page()
page.goto('https://vemcount.app/embed/widget/uOCRuLPangWo5fT')
central = page.query_selector("p.w-full span");
print({'central': central.inner_html()})
browser.close()
Afterwards I am trying to run the .py script remotely from Grasshopper through a batch file and read the output through a txt or CSV file from within Grasshopper.
If there is a better way I am more than happy to hear your suggestions.
Yours,
A Beginner in Python. :)
I have been trying to get some information of a website with python. I have tried using requests and selenium to get the HTML code of the website but I always get this HTML. I guess the website realizes it is not an actual person doing the search and therefore denies access. Is there any way to solve this issue and get the HTML code of this website?
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Access to this page has been denied.</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
<style>
html, body {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
color: #000;
}
a {
color: #c5c5c5;
text-decoration: none;
}
.container {
align-items: center;
display: flex;
flex: 1;
justify-content: space-between;
flex-direction: column;
height: 100%;
}
.container > div {
width: 100%;
display: flex;
justify-content: center;
}
.container > div > div {
display: flex;
width: 80%;
}
.customer-logo-wrapper {
padding-top: 2rem;
flex-grow: 0;
background-color: #fff;
visibility: visible;
}
.customer-logo {
border-bottom: 1px solid #000;
}
.customer-logo > img {
padding-bottom: 1rem;
max-height: 50px;
max-width: 100%;
}
.page-title-wrapper {
flex-grow: 2;
}
.page-title {
flex-direction: column-reverse;
}
.content-wrapper {
flex-grow: 5;
}
.content {
flex-direction: column;
}
.page-footer-wrapper {
align-items: center;
flex-grow: 0.2;
background-color: #000;
color: #c5c5c5;
font-size: 70%;
}
#media (min-width: 768px) {
html, body {
height: 100%;
}
}
</style>
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="https://d33a4decm84gsn.cloudfront.net/static/partners/perimeterx/perimeterx.css">
<script type="text/javascript" async="" src="https://www.gstatic.com/recaptcha/releases/zItNOfzbrqVGbb4QFYpPpcrw/recaptcha__es.js"></script><script src="/Z5wgH7n9/captcha/captcha.js?a=c&u=ad14b320-8116-11ea-9d99-a1ff7eeb44e0&v=&m=0"></script><script src="https://www.recaptcha.net/recaptcha/api.js?hl=es-ES"></script><script src="/Z5wgH7n9/init.js"></script><a tabindex="-1" aria-hidden="true" href="/colleges/yale-university/?_pxhc=1587174500133" rel="nofollow" target="_blank" style="width: 0px; height: 0px; font-size: 0px; line-height: 0;"></a></head>
<body>
<section class="container">
<div class="customer-logo-wrapper">
<div class="customer-logo">
<img src="https://www.niche.com/about/wp-content/themes/niche-about/images/about-home/stacked-green.svg" alt="Logo">
</div>
</div>
<div class="page-title-wrapper">
<div class="page-title">
<h1>Please verify you are a human</h1>
</div>
</div>
<div class="content-wrapper">
<div class="content">
<div id="px-captcha"><div class="g-recaptcha" data-sitekey="6Lcj-R8TAAAAABs3FrRPuQhLMbp5QrHsHufzLf7b" data-callback="handleCaptcha" data-theme="dark"><div style="width: 304px; height: 78px;"><div><iframe src="https://www.google.com/recaptcha/api2/anchor?ar=1&k=6Lcj-R8TAAAAABs3FrRPuQhLMbp5QrHsHufzLf7b&co=aHR0cHM6Ly93d3cubmljaGUuY29tOjQ0Mw..&hl=es&v=zItNOfzbrqVGbb4QFYpPpcrw&theme=dark&size=normal&cb=19z4nanjwlu" width="304" height="78" role="presentation" name="a-s7me84fdbal4" frameborder="0" scrolling="no" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox"></iframe></div><textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid rgb(193, 193, 193); margin: 10px 25px; padding: 0px; resize: none; display: none;"></textarea></div><iframe style="display: none;"></iframe></div></div>
<p>
Access to this page has been denied because we believe you are using automation tools to browse the
website.
</p>
<p>
This may happen as a result of the following:
</p>
<ul>
<li>
Javascript is disabled or blocked by an extension (ad blockers for example)
</li>
<li>
Your browser does not support cookies
</li>
</ul>
<p>
Please make sure that Javascript and cookies are enabled on your browser and that you are not blocking
them from loading.
</p>
<p>
Reference ID: #ad14b320-8116-11ea-9d99-a1ff7eeb44e0
</p>
</div>
</div>
<div class="page-footer-wrapper">
<div class="page-footer">
<p>
Powered by
PerimeterX
, Inc.
</p>
</div>
</div>
</section>
<!-- Px -->
<script>
window._pxAppId = 'PXZ5wgH7n9';
window._pxJsClientSrc = '/Z5wgH7n9/init.js';
window._pxFirstPartyEnabled = true;
window._pxVid = '';
window._pxUuid = 'ad14b320-8116-11ea-9d99-a1ff7eeb44e0';
window._pxHostUrl = '/Z5wgH7n9/xhr';
</script>
<script>
var s = document.createElement('script');
s.src = '/Z5wgH7n9/captcha/captcha.js?a=c&u=ad14b320-8116-11ea-9d99-a1ff7eeb44e0&v=&m=0';
var p = document.getElementsByTagName('head')[0];
p.insertBefore(s, null);
if (true) {
s.onerror = function () {
s = document.createElement('script');
var suffixIndex = '/Z5wgH7n9/captcha/captcha.js?a=c&u=ad14b320-8116-11ea-9d99-a1ff7eeb44e0&v=&m=0'.indexOf('captcha.js');
var temperedBlockScript = '/Z5wgH7n9/captcha/captcha.js?a=c&u=ad14b320-8116-11ea-9d99-a1ff7eeb44e0&v=&m=0'.substring(suffixIndex);
s.src = '//captcha.px-cdn.net/PXZ5wgH7n9/' + temperedBlockScript;
p.parentNode.insertBefore(s, p);
};
}
</script>
<!-- Custom Script -->
</body></html>
It's clear the website is able to recognize your bot. Since I am not aware of what website you are trying to scrape, I can't tell if this particular method will work.
Try changing the user agent. By default, the user agent of the chromedriver is different from the usual Chrome browser.
from selenium.webdriver.chrome.options import Options
from selenium import webdriver
options = Options()
options.add_argument("user-agent=Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36")
driver = webdriver.Chrome(chromedriver,chrome_options=options)
Can anyone tell me please how I can fix my navbar link problem in the code below? I tried almost everything, and read all related StackOverflow article and sort of things but can't figure it out!
nothing happens when I click on about or contact
I REALLY appreciate if someone has a clue or any idea that could be helpful for me!
thanks in advance
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome</title>
<!-- Bootstrap core CSS -->
{% load staticfiles %}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="{% static 'personal/css/bootstrap.min.css' %}" rel="stylesheet" />
<link href="{% static 'personal/css/navbar-static-top.css' %}" rel="stylesheet">
<link href="{% static 'personal/css/custom.css' %}" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- NAVBAR
================================================== -->
<div class="container">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{% url 'home' %}"><img src="{% static 'personal/img/mvp_landing_logo.png' %}" /></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Tutorial</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
</div>
<!-- Use a container to wrap the slider, the purpose is to enable slider to always fit width of the wrapper while window resize -->
<div class="container">
<!-- Jssor Slider Begin -->
<!-- To move inline styles to css file/block, please specify a class name for each element. -->
<!-- ================================================== -->
<script src="{% static 'personal/js/jquery-1.9.1.min.js' %}"></script>
<script src="{% static 'personal/js/jssor.slider.mini.js' %}"></script>
<script>
jssor_slider1_starter = function (containerId) {
//Reference http://www.jssor.com/development/slider-with-slideshow-no-jquery.html
//Reference http://www.jssor.com/development/tool-slideshow-transition-viewer.html
var _SlideshowTransitions = [
//Fade
{ $Duration: 3200, $Opacity: 2 }
];
var options = {
$SlideDuration: 800, //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
$DragOrientation: 3, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $Cols is greater than 1, or parking position is not 0)
$AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
$Idle: 1500, //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
$SlideshowOptions: { //[Optional] Options to specify and enable slideshow or not
$Class: $JssorSlideshowRunner$, //[Required] Class to create instance of slideshow
$Transitions: _SlideshowTransitions, //[Required] An array of slideshow transitions to play slideshow
$TransitionsOrder: 1, //[Optional] The way to choose transition to play slide, 1 Sequence, 0 Random
$ShowLink: true //[Optional] Whether to bring slide link on top of the slider when slideshow is running, default value is false
}
};
var jssor_slider1 = new $JssorSlider$(containerId, options);
}
</script>
<div id="slider1_container" style="visibility: hidden; position: relative; margin: 0 auto; width: 1140px; height: 442px; overflow: hidden;">
<!-- Loading Screen -->
<div u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
background-color: #000; top: 0px; left: 0px;width: 100%; height:100%;">
</div>
<div style="position: absolute; display: block; background: url(/static/personal/img/loading.gif) no-repeat center center;
top: 0px; left: 0px;width: 100%;height:100%;">
</div>
</div>
<!-- Slides Container -->
<div u="slides" style="position: absolute; left: 0px; top: 0px; width: 1140px; height: 442px;
overflow: hidden;">
<div>
<img u="image" src="{% static 'personal/img/01.jpg' %}" />
<div>
</div>
<img u="image" src="{% static 'personal/img/02.jpg' %}" />
</div>
<div>
<img u="image" src="{% static 'personal/img/03.jpg' %}" />
</div>
<div>
<img u="image" src="{% static 'personal/img/04.jpg' %}" />
</div>
</div>
<a style="display: none" href="http://www.jssor.com">content slider</a>
<!-- Trigger -->
<script>
jssor_slider1_starter('slider1_container');
</script>
<!--#region Bullet Navigator Skin Begin -->
<!-- Help: http://www.jssor.com/tutorial/set-bullet-navigator.html -->
<style>
/* jssor slider bullet navigator skin 05 css */
/*
.jssorb05 div (normal)
.jssorb05 div:hover (normal mouseover)
.jssorb05 .av (active)
.jssorb05 .av:hover (active mouseover)
.jssorb05 .dn (mousedown)
*/
.jssorb05 {
position: absolute;
}
.jssorb05 div, .jssorb05 div:hover, .jssorb05 .av {
position: absolute;
/* size of bullet elment */
width: 16px;
height: 16px;
background: url(static/personal/img/b05.png) no-repeat;
overflow: hidden;
cursor: pointer;
}
.jssorb05 div { background-position: -7px -7px; }
.jssorb05 div:hover, .jssorb05 .av:hover { background-position: -37px -7px; }
.jssorb05 .av { background-position: -67px -7px; }
.jssorb05 .dn, .jssorb05 .dn:hover { background-position: -97px -7px; }
</style>
<!-- bullet navigator container -->
<div u="navigator" class="jssorb05" style="bottom: 16px; right: 6px;">
<!-- bullet navigator item prototype -->
<div u="prototype"></div>
</div>
<!--#endregion Bullet Navigator Skin End -->
<!--#region Arrow Navigator Skin Begin -->
<!-- Help: http://www.jssor.com/tutorial/set-arrow-navigator.html -->
<style>
/* jssor slider arrow navigator skin 11 css */
/*
.jssora11l (normal)
.jssora11r (normal)
.jssora11l:hover (normal mouseover)
.jssora11r:hover (normal mouseover)
.jssora11l.jssora11ldn (mousedown)
.jssora11r.jssora11rdn (mousedown)
*/
.jssora11l, .jssora11r {
display: block;
position: absolute;
/* size of arrow element */
width: 37px;
height: 37px;
cursor: pointer;
background: url(static/personal/img/a11.png) no-repeat;
overflow: hidden;
}
.jssora11l { background-position: -11px -41px; }
.jssora11r { background-position: -71px -41px; }
.jssora11l:hover { background-position: -131px -41px; }
.jssora11r:hover { background-position: -191px -41px; }
.jssora11l.jssora11ldn { background-position: -251px -41px; }
.jssora11r.jssora11rdn { background-position: -311px -41px; }
</style>
<!-- Arrow Left -->
<span u="arrowleft" class="jssora11l" style="top: 123px; left: 8px;">
</span>
<!-- Arrow Right -->
<span u="arrowright" class="jssora11r" style="top: 123px; right: 8px;">
</span>
<!--#endregion Arrow Navigator Skin End -->
<a style="display: none" href="http://www.jssor.com">Bootstrap Carousel</a>
</div>
<!-- Jssor Slider End -->
</div>
<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->
<div class="container marketing">
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading">This page runs Bootstrap with Jssor Slider.</h2>
<p class="lead">Use Jssor Slider as a compoment of Bootstrap is extremly easy. Given a slider you worked out, to integrate it with Bootstrap, you can just copy javascript and html code and paste it into your page. This page is a simple demo, please view source of this page or download Bootstrap Carousel Slider Example.</p>
</div>
<div class="col-md-5">
<img class="featurette-image img-responsive" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div>
</div>
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-5">
<img class="featurette-image img-responsive" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div>
<div class="col-md-7">
<h2 class="featurette-heading">Javascript Code</h2>
<div class="lead" style="background-color:#f0f0f0; border: 1px dashed #000; white-space: nowrap;">
<pre style="margin:0px;">
<script type="text/javascript" src="../js/jssor.slider.mini.js"></script>
<script>
jQuery(document).ready(function ($) {
var options = {
..
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
...
});
</script></pre>
</div>
</div>
</div>
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading">HTML Code</h2>
<div class="lead" style="background-color:#f0f0f0; border: 1px dashed #000; white-space: nowrap;">
<pre style="margin:0px;">
<div class="container">
<!-- Jssor Slider Begin -->
<div id="slider1_container" style="visibility: hidden; position: relative; margin: 0 auto; width: 980px; height: 380px; overflow: hidden;">
...
</div>
<!-- Jssor Slider End -->
</div></pre>
</div>
</div>
<div class="col-md-5">
<img class="featurette-image img-responsive" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div>
</div>
<hr class="featurette-divider">
<!-- /END THE FEATURETTES -->
<!-- FOOTER -->
<footer>
<p class="pull-right">Back to top</p>
<p>© Jssor Slider 2009 - 2016. · Privacy · </p>
</footer>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="{% static 'personal/js/jquery-1.9.1.min.js' %}"></script>
<script src="{% static 'personal/js/bootstrap.min.js' %}"></script>
<script src="{% static 'personal/js/docs.min.js' %}"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="{% static 'personal/js/ie10-viewport-bug-workaround.js' %}"></script>
<!-- jssor slider scripts-->
<!-- use jssor.slider.debug.js for debug -->
<script src="{% static 'personal/js/jssor.slider.mini.js' %}"></script>
<script>
jQuery(document).ready(function ($) {
var options = {
$AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
$AutoPlaySteps: 1, //[Optional] Steps to go for each navigation request (this options applys only when slideshow disabled), the default value is 1
$Idle: 2000, //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
$PauseOnHover: 1, //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, 4 freeze for desktop, 8 freeze for touch device, 12 freeze for desktop and touch device, default value is 1
$ArrowKeyNavigation: true, //[Optional] Allows keyboard (arrow key) navigation or not, default value is false
$SlideEasing: $Jease$.$OutQuint, //[Optional] Specifies easing for right to left animation, default value is $Jease$.$OutQuad
$SlideDuration: 800, //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
$MinDragOffsetToSlide: 20, //[Optional] Minimum drag offset to trigger slide , default value is 20
//$SlideWidth: 600, //[Optional] Width of every slide in pixels, default value is width of 'slides' container
//$SlideHeight: 300, //[Optional] Height of every slide in pixels, default value is height of 'slides' container
$SlideSpacing: 0, //[Optional] Space between each slide in pixels, default value is 0
$Cols: 1, //[Optional] Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
$Align: 0, //[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 0.
$UISearchMode: 1, //[Optional] The way (0 parellel, 1 recursive, default value is 1) to search UI components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc).
$PlayOrientation: 1, //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, 5 horizental reverse, 6 vertical reverse, default value is 1
$DragOrientation: 1, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $Cols is greater than 1, or parking position is not 0)
$ArrowNavigatorOptions: { //[Optional] Options to specify and enable arrow navigator or not
$Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance
$ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
$Steps: 1 //[Optional] Steps to go for each navigation request, default value is 1
},
$BulletNavigatorOptions: { //[Optional] Options to specify and enable navigator or not
$Class: $JssorBulletNavigator$, //[Required] Class to create navigator instance
$ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
$Steps: 1, //[Optional] Steps to go for each navigation request, default value is 1
$Rows: 1, //[Optional] Specify lanes to arrange items, default value is 1
$SpacingX: 12, //[Optional] Horizontal space between each item in pixel, default value is 0
$SpacingY: 4, //[Optional] Vertical space between each item in pixel, default value is 0
$Orientation: 1 //[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1
}
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizing
function ScaleSlider() {
var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
if (parentWidth) {
jssor_slider1.$ScaleWidth(parentWidth - 30);
}
else
window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end
});
</script>
</body>
</html>
<!-- end snippet -->
new added info
my directori looks like:
mysite:
--settings.py
--urls.py
personsl:
--urls.py
--views.py
templates:
--header.html
--about.html
mysite.urls lools like:
from django.conf.urls import url, include
from django.contrib import admin
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^', include('personal.urls')),
url(r'^blog/', include('blog.urls')),
url(r'^about/$', 'personal.views.about', name='about'),
url(r'^contact/$', 'personal.views.contact', name='contact'),
-------------------------
personal.urls looks like:
from django.conf.urls import url, include
from . import views
urlpatterns = [
url(r'^$', views.home, name='home'),
url(r'^$', views.contact, name='contact'),
]
-----------------------------
personal.views looks like:
from django.shortcuts import render
from .forms import ContactForm
from django.core.mail import EmailMessage
from django.shortcuts import redirect
from django.template import Context
from django.template.loader import get_template
def home(request):
return render(request, 'templates/home.html')
def about(request):
return render(request, 'templates/about.html', {})
def contact(request):
form_class = ContactForm
####
hope these help me :)
It seems like you defined 2 different url patterns for the same name ('contact'), and also 2 names could match the same pattern ('home' and 'contact' would match an empty string).
I think your urls should look like this:
mysite.urls
from django.conf.urls import url, include
from django.contrib import admin
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^blog/', include('blog.urls')),
# other urls...
url(r'^', include('personal.urls')) # leave this last, because it matches anything. This way, it's easier for you to make the match
]
personal.urls
from django.conf.urls import url, include
from . import views
urlpatterns = [
url(r'^about/$', views.about, name='about'),
url(r'^contact/$', views.contact, name='contact'),
url(r'^$', views.home, name='home')
]
I'm trying to login in to a jsp form with selenium webdriver in python. I'm trying to login by posting the parameters but I cannot reach the form or anything beyond the body tag for that matter. What am i doing wrong? Below is my code and below that is the page source - since it is a non-public web page:
from selenium import webdriver
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC
def my_method():
driver = webdriver.PhantomJS()
driver.get("https://<URL>.se:20443/snl/login.jsp")
password = driver.find_element_by_xpath("//input[#id='j_password']")
driver.close()
my_method()
Page source:
<!DOCTYPE html>
<!-- WARNING : modifying login.jsp may affect the login layout for Mobile, Embedded and Desktop Version. -->
<html>
<head>
<!-- Import header for script/style ... -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta http-equiv="Expires" content="-1" />
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<link type="image/x-icon" rel="shortcut icon" href="resources/images/favicon.ico">
<link type="text/css" rel="stylesheet" href="resources/style/login.css">
<style type="text/css">
body{
background: url(resources/images/gradient_body_login.png) repeat-x;
background-color: #d3d3d3;
}
#container{
background: url(resources/images/background_body.png) no-repeat top;
width:1090px;
min-height:770px;
height:auto;
}
#container{
margin:auto;
margin-top:0;
}
#login input[type="submit"],#login input[type="button"]{
margin:10px 5px 10px 0;
}
#mask{
opacity: 0.5;
filter: alpha(opacity = 50);
}
</style>
<script type="text/javascript" src="resources/script/live.js"></script>
<script type="text/javascript">
<!-- Against XFS attack -->
if(top != self)
{top.location=self.location;}
<!-- Against XFS attack -->
function Start(){
DisplayContent();
GiveFocus("j_username");
<!-- Check login failed -->
var vars = getUrlParameters();
var loginLabel = document.getElementById("failureIndication");
var authFailed = vars["authfailed"];
if (authFailed === "true")
loginLabel.innerHTML = "Login Failed";
<!-- Check login failed -->
}
function DisplayContent() {
var mainFrame = document.getElementById("hasJavascript");
mainFrame.style.display = 'block';
}
function GiveFocus(id){
document.getElementById(id).focus();
}
function setSubmitUrl(form){
var hash = getUrlHash();
if((hash != null) && (hash != "")) {
form.action = "j_spring_security_check#" + hash;
}else {
form.action = "j_spring_security_check";
}
return true;
}
</script>
<!-- Sample of custom logo -->
<style type="text/css">
h2 {
background: url("resources/large.png") no-repeat 20px 0 transparent;
line-height: 20px;
padding-left: 170px;
background-size: 75px 33px !important;
background-position: 35px 0px !important;
}
body {
font-family:Verdana;font-size:12px;color:#444;margin:0;padding:0;width:100%;height:100%;
background-color: #5BBF19 !important;
background-attachment: fixed !important;
background-repeat: no-repeat !important}
}
#mask {
display: none !important;
}
#login{
border:4px solid #008800 !important
}
</style>
<title>
Portal Login
</title>
</head>
<body OnLoad="Start();">
<noscript>
<div class="noJavascriptBox">
Your web browser must have JavaScript enabled
in order for this application to display correctly.
</div>
</noscript>
<div id="hasJavascript" class="hidden contentContainer">
<div id="container">
<div id="mask"></div>
<div id="login">
<h2>Portal Live Login</h2>
<form id="login_form" method="POST" onSubmit="return setSubmitUrl(this);">
<label for="j_username">Username:</label>
<input type="text" id="j_username" name="j_username" autocapitalize="off" autocorrect="off"/>
<label for="j_password">Password:</label>
<input type="password" id="j_password" name="j_password" autocapitalize="off" autocorrect="off"/>
<label id="failureIndication"> </label>
<input type="submit" value="OK"/>
</form>
</div>
</div>
</div>
</body>
I think you need to wait for the page to load or, to be more specific, wait for the visibility of the password field:
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
wait = WebDriverWait(driver, 10)
password = wait.until(EC.visibility_of_element_located((By.ID, "j_password")))
password.send_keys("password")
I solved the problem by passing a service argument to ignore ssl errors (service_args=['--ignore-ssl-errors=true']) like this:
driver = webdriver.PhantomJS(desired_capabilities=dcap,service_args=['--ignore-ssl-errors=true'])
Then it worked!
I am using django-easy_pdf to reder pdf for my reports and would like to know how to display a page footer.
In the django-easy_pdf's source code this piece of code is used to display the page number
<div id="footerContent">
{%block page_foot%}
<pdf:pagenumber />
{%endblock%}
</div>
What I would like to know is:
How to display the footer properly
Start with page number 1
As I have copied the code, it does not display as a footer and the page starts with 0
What am I missing?
UPDATE
I tried this code from here but I can't make it work, seems useful though
<html>
<head>
<style>
.footer { position: fixed; bottom: 0px; }
.pagenum:before { content: counter(page); }
</style>
</head>
<body>
<div class="footer">Page: <span class="pagenum"></span></div>
</body>
</html>
UPDATE 2
I now know what I did wrong, I was missing the #page css and that is why It's not working, I only have the #frame footer
The correct CSS:
#page {
size: {{ pagesize }};
margin: 1cm;
#frame footer {
-pdf-frame-content: footerContent;
bottom: 0cm;
margin-left: 18cm;
margin-right: 0cm;
height: 1cm;
}
}
Then just call it normally(the first snippet)
To display footer correctly make sure that in your template in css styles you have:
#frame footer {
-pdf-frame-content: footerContent;
}
-pdf-frame-content should be pointig to id of your footer container.
You can add the next code in your tempate:
{%block page_foot%}
<div style="display: block;margin: 0 auto;text-align: center;">
page: <pdf:pagenumber />
</div>
{%endblock%}