my previous code looks like this, but I cannot upload an image. The script breaks off at this point, I already have several options and try unfortunately without success
I work with VS Code on Ubuntu
myvariable1 = browser.find_element_by_xpath("/html/body/div[1]/div[5]/div/div[2]/div/form/ul[9]/div/li[2]/div/div[1]/div/div[2]")
myvariable1.send_keys("/home/username/Schreibtisch/myfolder/1.png")
The html code looks like this ----
<div class="fileuploader fileuploader-theme-dragdrop">
<input
class="gallery_media"
type="file"
name="files[]"
tabindex="-1"
accept="image/*"
multiple="multiple"
style="position: absolute; z-index: -9999; height: 0px; width: 0px; padding: 0px; margin: 0px; line-height: 0; outline: 0px; border: 0px; opacity: 0;"
/>
<div class="fileuploader-input-inner">
<div class="fileuploader-main-icon"></div>
<h3 class="fileuploader-input-caption onDesktop"><span class="onDesktop">Bilder hierher ziehen und ablegen</span></h3>
<p class="onDesktop">oder</p>
<div class="fileuploader-input-button"><span>Datei auswählen</span></div>
</div>
</div>
<div class="fileuploader-items"><ul class="fileuploader-items-list"></ul></div>
myvariable1 = browser.find_element_by_xpath("/html/body/div[1]/div[5]/div/div[2]/div/form/ul[9]/div/li[2]/div/div[1]/div/div[2]/input")
myvariable1.send_keys("C:/home/username/Schreibtisch/myfolder/1.png")
Go down into input otherwise you'll get a Noninteractable exception and then send the absolute file path to your file.
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-imageModel" style="display: block; z-index: 1002; outline: 0px; height: auto; width: 700px; top: 225.5px; left: 278.5px;"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span class="ui-dialog-title" id="ui-dialog-title-imageModel">ATTENTION TAX PAYERS!!!!!</span><span class="ui-icon ui-icon-closethick">close</span></div><div id="imageModel" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 0px; height: 92.4px;" scrolltop="0" scrollleft="0">
<ul><li class="redFont"> Please insist on getting Form 16/16A from your Deductor downloaded only from Traces.Valid form 16/16A.<i><u> click here.</u></i></li></ul>
<div class="floatLeft margintop20"><input type="checkbox" id="Details" name="Details" onclick="checkModal('modalPagee')"> I agree to the usage and acceptance of Form 16 / 16A generated from TRACES</div>
<div class="floatLeft margintop20">
<input value="Proceed" type="button" class="button" id="btn" disabled="disabled" onclick="goCancel()">
</div>
</div></div>
This is the HTML code on which I am working, Here I want to select the input element of type checkbox, when I was trying it as
check_box = find_element_by_id("Details").click() I was failing to select it .
if need of more details in
"https://www.incometax.gov.in/iec/foportal" please visit this site,
when after login, goto -> e-file -> income_tax_returns -> view for 26as and continue, Then we will get another window opened and will get a popup here in pop up we need to select the checkbox.
That details is in new tab, you need to switch the focus like below :
wait = WebDriverWait(driver, 10)
new_handle = driver.window_handles
print(len(new_handle))
driver.switch_to.window(new_handle[1])
wait.until(EC.element_to_be_clickable((By.ID, "Details"))).click()
Try:
check_box = find_element_by_xpath('//*[#id="Details"]').click()
I'm using Selenium Python to do something like a Robotic Process Automation. However, I am facing problems clicking in a button...
When I click the Search button manually nothing happens, but through Selenium the alert appears:
The code I'm using is:
try:
driver.find_element(By.CSS_SELECTOR, '#WIN_3_1002 > div:nth-child(1)').click()
except Exception as e:
print(e)
The html section of the button is:
<fieldset class="PageBodyHorizontal" arbwidth="0" arbw="0,0,0,0" aropacity="1.0" arcolor="c0c0c0" arbcolor="#c0c0c0" style="width: 970px;">
<legend class="hidden acc">Form Control Right Panel</legend>
<div class="PageBody pbChrome" style="border-radius: 0px 0px 0px 0px ;-moz-border-radius: 0px 0px 0px 0px ;-webkit-border-radius: 0px 0px 0px 0px ;background: -moz-linear-gradient(top, rgba(192,192,192,1.0), rgba(192,192,192,1.0));background: -webkit-gradient(linear, center center, center center, from(rgba(192,192,192,1.0)),to(rgba(192,192,192,1.0)));background: linear-gradient(rgba(192,192,192,1.0), rgba(192,192,192,1.0));background-color:#c0c0c0;">
<a href="javascript:" id="WIN_3_1002" arid="1002" artype="Control" ardbn="Query" artcolor="null" class="btn btn3d arfid1002 ardbnQuery" style="top: 5px; left: 10px; width: 50px; height: 21px; visibility: inherit; z-index: 997;" arwindowid="3">
<div class="btntextdiv" style="top:0px; left:0px; width:50px; height:21px;">
<div class="f1" style=";width:50px">Search</div>
</div>
</a>
</div>
</fieldset>
It's strange because I have a similar code that works on other pages, for the same button.
The html of a similar button:
<fieldset class="PageBodyHorizontal" arbwidth="0" arbw="0,0,0,0" aropacity="1.0" arcolor="c0c0c0" arbcolor="#c0c0c0" style="width: 1654px;">
<legend class="hidden acc">Panel2</legend>
<div class="PageBody pbChrome" style="border-radius: 0px 0px 0px 0px ;-moz-border-radius: 0px 0px 0px 0px ;-webkit-border-radius: 0px 0px 0px 0px ;background: -moz-linear-gradient(top, rgba(192,192,192,1.0), rgba(192,192,192,1.0));background: -webkit-gradient(linear, center center, center center, from(rgba(192,192,192,1.0)),to(rgba(192,192,192,1.0)));background: linear-gradient(rgba(192,192,192,1.0), rgba(192,192,192,1.0));background-color:#c0c0c0;">
<a href="javascript:" id="WIN_2_1000005683" arid="1000005683" artype="Control" ardbn="z3Btn Function Print Preview" artcolor="#" class="btn btn3d btnd arfid1000005683 ardbnz3BtnFunctionPrintPreview" style="top:5px; left:149px; width:50px; height:21px;color:#;z-index:999;" arwindowid="2">
<div class="btntextdiv" style="top:0px; left:0px; width:50px; height:21px;">
<div class="f1" style=";width:50px">Print</div>
</div>
</a>
<a href="javascript:" id="WIN_2_1002" arid="1002" artype="Control" ardbn="Query" artcolor="null" class="btn btn3d arfid1002 ardbnQuery" style="top: 5px; left: 10px; width: 50px; height: 21px; visibility: inherit; z-index: 997;" arwindowid="2">
<div class="btntextdiv" style="top:0px; left:0px; width:50px; height:21px;">
<div class="f1" style=";width:50px">Search</div>
</div>
</a>
<a href="javascript:" id="WIN_2_303060100" arid="303060100" artype="Control" ardbn="z3Btn_NextStage" artcolor="null" class="btn btn3d arfid303060100 ardbnz3Btn_NextStage" style="top:5px; left:64px; width:82px; height:21px;z-index:998;" arwindowid="2">
<div class="btntextdiv" style="top:0px; left:0px; width:82px; height:21px;">
<div class="f7" style=";width:82px">Next Stage</div>
</div>
</a>
</div>
</fieldset>
If you have advices on the quality of my code and how to fix this problem, I would be grateful.
Click on the a tag instead of div as the href to trigger some javascript code is on the a tag and not div.
driver.find_element(By.CSS_SELECTOR, '#WIN_3_1002').click()
Or try with action class
elem = driver.find_element(By.CSS_SELECTOR, '#WIN_3_1002 > div:nth-child(1)')
Webdriver.ActionChain(driver).move_to_element(elem).click()
try javascript executor:
driver.execute_script("arguments[0].click()",elem)
Generally <div> tags are not interactable unless contenteditable="true" is set.
Some more details about the usecase would have helped us to analyze the observations in a canonical way. However to click on an element ideally you need to induce WebDriverWait for the element_to_be_clickable() and you can use the following Locator Strategies:
Using CSS_SELECTOR I:
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "a#WIN_3_1002 > div.btntextdiv > div.f1"))).click()
Using CSS_SELECTOR II:
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "a.btn.btn3d.ardbnQuery[artype='Control'][ardbn='Query']"))).click()
Note: You have to add the following imports :
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC
the cards goes horizontally i want it to go down vertically when the card goes off screen.
This is a project of django so im looping over a div but the card is going off the screen horizontally i want it to go vertically when the card goes off the screen.
PYTHON CODE [HTML]
`
<div class="container">
{% for project in projects %}
<div class="items">
<h2>{{project}}</h2>
<div class="purl">
<p>{{project.description}}</p>
</div>
<div class="purl1">
<a href='{{project.url}}'>{{project.url}}</a>
</div>
<div class='buttons'>
<a class='btn' href='{% url "update" project.id %}'>Edit</a>
<a style='background-color:#f25042' class='btn' href='{% url "delete" project.id %}'>Delete</a>
</div>
</div>
{% endfor %}
</div>
`
CSS
`
.container{
display:flex;
}
.purl{
text-overflow: hidden;
padding-right:.1em;
}
.purl1{
max-width:20em;
margin-right:14px;
}
.items{
border-radius: 8px;
padding:1em 1.5em .5em 1.4em;
box-shadow: 0px 0px 17px 0px black;
margin:5% 1em 2em .5em;
width:100%;
}
.items h2{
color:#fffffe;
}
.items p{
color:#94a1b2;
}
a{
text-decoration: none;
color:#7f5af0;
}
a:hover{
text-decoration: none;
color:#fffffe;
}
.buttons{
display:flex;
}
.btn{
float:left;
text-align: center;
font-size:17px;
font-weight:bold;
padding:.5em;
margin:2em 1em .5em 1em ;
width:3.5em;
border:none;
border-radius: 8px;
background-color: #2cb67d;
color:#fffffe;
font-family: 'Noto Sans', sans-serif;
}
.btn:hover{
background-color: #3dd696;
cursor: pointer;
}
#media only screen and (max-width: 800px) {
.container{
margin-left:10%;
display:block;
}
.items{
width:60%;
}
}
`
this is the html and css of the code.
I'm looping over html by python [ django ]
so i want to make cards responsive
It is very simple, just use flex-wrap: wrap; to make the flexible items wrap if necessary:
Please add flex-wrap style to your container element in your CSS:
.container{
display:flex;
flex-wrap: wrap;
}
This has nothing to do with Django or Python, you will be able to achieve that only in CSS, whatever the backend is.
You should use CSS flexbox layout, even in your CSS media queries, by keeping your display:flex whatever the media query.
Then use different flex-direction property in CSS depending on your media query / device, in order to order the inside elements horizontally or vertically.
More info: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I've the following code in my webpage (Python/Django framework) to enable a video to play in the background.
HTML
<div class="video-container">
<div class="video-container-bg">
<video playsinline autoplay muted loop poster="{{page.image.url}}" id="bgvid">
<source src="{{page.video.url}}" type="video/mp4">
<source src="{{page.mac_video.url}}" type="video/webm">
</video>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-8">
<div class="animation-element bounce-up">
<h1 class="page-title">{{page.page_title}}</h1>
<p class="strapeline">{{page.strapline}}</p>
<a class="butt" href="#about-us">Learn More</a>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
video#bgvid {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height:100%;
overflow: hidden !important;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url() no-repeat;
background-size: 100%;
}
.video-container {
min-height: calc(100vh - 75px);
overflow: hidden !important;
position: relative;
}
.video-container-bg {
padding-top: 25vh;
color: #fff;
}
It works fine on everything except Safari where nothing plays. Why not? Is it something Apple have set to prevent? In fact, when I run Safari on Windows it's telling me it cannot play HTML5 video. Is that right?
I've solved this by saving the mp4 files in a lossless state. It now seems to work. I have no idea why