Python print html output together with bootstrap modals - python

I want to do something very specific.
I have an Raspberry Pi2 with Apache2. I control with the raspberry Pi different ultrasonic sensors. The signals from the ultrasonic sensors are processed in a python program.
Depending on the values that I get back from the sensors, I write information in different strings. These strings are used to create my HTML file.
Afterwards, I send the HTML file with the print() command to Apache where my information gets displayed via the browser.
Now starts the confusing part. In these strings I use bootstrap modals. For example:
<button type="button"
class="btn btn-success btn-sm"
style="width: 100%; height:100%; font-size:36px;"
data-toggle="modal" data-target="#modal1">TEST</button>
<div class="modal fade"
id="modal1"
tabindex="-1"
role="dialog"
aria-labelledby="modal1"
aria-hidden="true"
style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Check!</h4>
</div>
<div class="modal-body">
<p>TEST!</p>
</div>
</div>
</div>
</div>
I have already tested if these modals work on the Raspberry, and they do but only when I have pure HTML code. When I want to send exactly the same information to the server with a command, for example:
print ('%s'% test)
And the the test (test ="""....modal...""") strings contains exactly the same information, it doesn't work.
Does anyone know what could be the problem?

Has been solved. The problem was that apache had no access to my bootstrap files. I inserted the bootstrap folder in the var/www/html-folder and adapted the links. Anyway Thanks

Related

My bootstrap(card-deck) is not applied when I open it in browser

I am designing a website but when i tried to wrote code for bootstrap(card-deck class) in codeply.com it was
working properly. But when i wrote the same code in my Py charm code editor and paste the file link in my browser at that time my code wasn't applied..
Can anyone guide me why it is happening??
Here is my code
<div class="card-deck">
<div class="card">
<div class="card-header">
<h3>Chihuahua</h3>
</div>
<div class="card-body">
<h2>Free</h2>
<p>5 Matches Per Day</p>
<p>10 Messages Per Day</p>
<p>Unlimited App Usage</p>
<button type="button">Sign Up</button>
</div>
</div>
<div class="card">
<div class="card-header">
<h3>Labrador</h3>
</div>
<div class="card-body">
<h2>$49 / mo</h2>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<button type="button">Sign Up</button>
</div>
</div>
<div class="card">
<div class="card-header">
<h3>Mastiff</h3>
</div>
<div class="card-body">
<h2>$99 / mo</h2>
<p>Pirority Listing</p>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<button type="button">Sign Up</button>
</div>
</div>
This may not be the answer you are looking for.. but I think the issue is the Bootstrap Version you are running the code on.
I had just about the same issue running a particular line of code that runs well while on Bootstrap version 4.0 but seem not to work at all while running on bootstrap Version 5.1. Turns out the bootstrap changed a particular class attribute from what it used to be in version 4.
Example:
Bootstrap 5 uses class=(data-bs-) instead of its previous class=(data-) attributes in bootstrap 4.
With that little change as seen above, your line of code won't work.. rather the class name used, need to be in the exact way it was written in the bootstrap version you are using.

Selenium WebDriver Exceptions - "element not interact-able"

I am trying to select elements from a drop down box, which loads options once clicked. I can get to the element but not interact with it. The error is NOT due to the page not fully loading as most related questions are.
I've tried selecting element by Id, Xpath, and using the js to make the element not hidden, none have worked so far. the latest i've tried was to send the keys.down to activate the list... still get the "not interactable" error.
Web page with selector--
</div>
</div>
<div class="css-1wy0on6 av__indicators">
<span class="css-bgvzuu-indicatorSeparator av__indicator-separator">
</span>
<div aria-hidden="true" class="css-1u02eyf-indicatorContainer av__indicator av__dropdown-indicator">
<svg aria-hidden="true" class="css-19bqh2r" focusable="false" height="20" viewbox="0 0 20 20" width="20">
<path d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z">
</path>
</svg>
<span class="sr-only">
Toggle Select Options
</span>
</div>
</div>
</div>
<input name="organization" type="hidden" value="" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md-10 col-lg-8">
</div>
</div>
<div class="row">
<div class="col">
<button class="btn btn-primary disabled" disabled="" type="submit">
Continue
</button>
</div>
</div>
</form>
</div>
</div>
Some Python code used so far--
elem = driver.find_element_by_name("organization")
js = "arguments[0].style.height='auto';
arguments[0].style.visibility='visible';"
driver.execute_script(js, elem)
from selenium.webdriver.common.keys import Keys
elem.send_keys(Keys.DOWN)
###not interactable Error
I would expect the item to allow me to select or activate the options list at the least. I have been successful in lists, but not this new type.
The INPUT you are trying to interact with is of type="hidden" so it won't be visible and can't be interacted with using Selenium. My guess is that there's a dropdown that isn't a SELECT that is displayed, the user makes a selection, and then code pushes that value into the hidden INPUT. Just ignore the hidden INPUT and interact with the page as a user would by clicking the dropdown, then clicking your selection. The rest should take care of itself.
We can't make more recommendations on locators, etc. without more of the HTML of the page since you stated that the site is behind an account.

How to click the 2nd text box with smae class name in selenium using python

I have recently started using selenium with python and stuck with the below problem. It may be simple but I have tried a lot while searching through different answers but could not solve it.
I want to click the 2nd text box with class name 'param-text-input text-input numeric-value'
<div class="bet-widget-main-row-right">
<div class="bet-widget-main-content">
<div class="bet-params">
<div class="param-wrapper">
<span class="param-label">Label1</span>
<div class="param-input -desktop">
<div class="param with-error">
<span class="param-input-wrapper">
<span class="param-currency numeric-value">£</span>
<input type="text" class="param-text-input text-input numeric-value" value=".04" tabindex="0" size="3" maxlength="11">
</span>
</div>
<div class="param-input_ticks"></div>
</div>
</div>
<div class="param-wrapper">
<span class="param-label">Label2</span>
<div class="param-input -desktop">
<div class="param">
<span class="param-input-wrapper">
<input type="text" class="param-text-input text-input numeric-value" value="2.18" tabindex="0" size="4" maxlength="8">
</span>
</div>
<div class="param-input_ticks"></div>
</div>
</div>
</div>
</div>
<div class="bet-submit"><button class="confirm-bet-button -accented micro-button" type="submit" disabled="" tabindex="0"><span>Button1</span></button></div></div>
I have tried multiple solutions but none work:
self.driver.find_element_by_xpath("//[#class='param-text-inp‌​ut.text-input.numeri‌​c-value'][2]").clear‌​()
self.driver.find_element_by_css_selector("[input.param-text-‌​input.text-input.num‌​eric-value][2]").cle‌​ar()
self.driver.find_element_by_xpath("//input[#class='param-tex‌​t-input'][2]").clear‌​()
Any pointers/help is appreciated.
In the case that you would prefer to use a CSS selector, the following will choose that second input:
div.param-wrapper:nth-of-type(2) input.param-text-input.text-input.numeric-value
we're looking for the second "param-wrapper" because that is the thing which will correctly count the parameters.
It's pretty easy:
self.driver.find_elements_by_xpath('//input[#Class="param-text-‌​input.text-input.num‌​eric-value"]')[1].clear()
or
from selenium.webdriver.common.keys import Keys
self.driver.find_elements_by_xpath('//input[#Class="param-text-‌​input.text-input.num‌​eric-value"]')[1].send_keys(Keys.BACKSPACE)
You need to make an object list in the first place. So you should find all the placeholders with the same name. Then get said item, which is the second element(list are zero based, so 1 is second)
Cheers
It is possible in XPath to select the n-th object that corresponds to your XPath expression.
To achieve this you use the [n] at the end of of your expression.
What you forgot is to put () around your expression before adding the [n].
So your XPath should be (//input[#class='param-tex‌​t-input'])[2].
To click the 2nd text box with class name 'param-text-input text-input numeric-value' you can use the following code block :
self.driver.find_element_by_xpath("//div[#class='bet-params']//following-sibling::input[2]").clear()

How to use Python Requests to submit radio button form?

I'm trying to learn about web interaction, specifically using Requests.
To that end, I'm interested in using Python with Requests to download a list of car parts from OReillyAuto.com But I'm running into a hiccup.
When I browse to this url, it should show me a list of brake pads and shoes for the type of car I've specified. However, it pops up a set of radio buttons asking if I want to view parts for the left side, right side, or all parts.
I cannot for the life of me figure out how to make that selection and get the HTML that I can see in the Chrome dev tools, which contains a list of brand-names, prices, etc.
I've tried a number of things, but this is what I have now:
#import HTTP libraries
import requests
#import HTML parsing libraries
import bs4
url = 'http://www.oreillyauto.com/site/c/search/Brake+Pads+&+Shoes/C0068/C0009.oap?model=G6&vi=1432754&year=2006&make=Pontiac'
answerURL = 'http://www.oreillyauto.com/site/ConditionSelectServlet?answer=-1'
print("Making request")
session = requests.Session()
session.headers.update({'referer': url})
r = session.get(answerURL)
print(r.status_code)
oreillyList = bs4.BeautifulSoup(r.text, "lxml")
print("Writing response...")
logfile = 'C:/Users/mhurley/Portable_Python/notebooks/' + output + '.log'
with open(logfile, 'w') as file:
file.write(oreillyList.prettify())
print("...done writing "+logfile)
I expect the log file that I write out to have about 5200 lines in it, as I do when I "View Page Source." However, I'm only getting about 3000 lines, and it looks like there are no parts in that list.
Maybe I really am getting what I think I am, but I'm not interpreting it correctly. Any tips for how to get past this dialog request?
EDIT: I suspect this is the HTML relevant to my purposes:
<div id="forcedVehicleQuestions" class="forcedUserInput" style="display: block; position: absolute; left: 50%; top: 40px; z-index: 6000; margin-left: -199px; margin-top: 0px;">
<div class="forcedContents clearfix">
<a class="btn-remove" onclick="closeForced('Search','question');">
<svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#shape-remove"></use></svg>
</a>
<form name="forcedQuestionsForm" id="forcedQuestionsForm">
<h2 class="sans">
More Product Info Required
</h2>
<p id="questionText" class="questionText">
Brake Pads - Position
</p>
<div id="forceQuestionsRadio">
<div class="form-row">
<label class="questionRadio checkbox-radio" id="questionRadio" for="Front">
<input type="radio" id="Front" name="answer" value="10219">
Front
</label>
</div>
<div class="form-row">
<label class="questionRadio checkbox-radio" id="questionRadio" for="Rear">
<input type="radio" id="Rear" name="answer" value="10290">
Rear
</label>
</div>
<div class="form-row">
<label class="questionRadio checkbox-radio" id="questionRadio" for="Show all">
<input type="radio" id="Show all" checked="" name="answer" value="-1">
Show all
</label>
</div>
</div>
<input id="questionSubmit" type="button" class="btn btn-green btn-shadow" value="Continue" onclick="setQuestionAnswer('Brake Pads - Position',document.forms['forcedQuestionsForm'].elements['answer'],'Show all');">
<div id="forcedVehicleQuestionsLoading" class="loading load-sm">
<div class="spinner"></div>
</div>
</form>
</div>
</div>
I'm having a hard time understanding how to interact with this <form> element. How can I make the "onclick=" happen so that the form gets submitted?
You will need to use a combination of Selenium + BeautifulSoup.
First, you'll use selenium to open the webpage in a browser, select the right radio button then submit the form.
After this, use BeautifulSoup to parse the page for the brakes.

Serve a file based on request parameters in tornado

The problem looks simple but everywhere I search it I get results for uploading a file, whereas my use case is, that based on a few params, I in my Handler decide the relevant file and upload it as a link in my View. I am using tornado for this. e.g :
<div class="form-group"> <!-- Date input -->
<label for="actDateFrom" class="control-label">Date</label>
<input ng-model="data.actDateFrom" class="form-control" name="actDateFrom" placeholder="MM/DD/YYY" type="text"/>
</div>
<div class="form-group"> <!-- Date input -->
<label for="actDateTo" class="control-label">Date</label>
<input ng-model="data.actDateTo" class="form-control" name="actDateTo" placeholder="MM/DD/YYY" type="text"/>
</div>
<div class="form-group"> <!-- Submit button -->
<button type="submit" class="btn btn-default" data-ng-disabled="form.$invalid" data-ng-click="sendActRequest()" >Go Fetch !</button>
</div>
Based on the inputs above, I have a handler, that should basically filter a csv file and get that file showing up as a link .
All I am stuck at is the code for uploading that subset file as a link in my view, I can manage the rest. Please not that the file is lying somewhere on the server itself.
Thanks in Advance!
Lol that was so easy, I think the funda is that only a static file can be served, I just put it in my some web/static/files path which is visible to the server and posted a href link to it, something like below:
<div>
Activations Logs for the time period.
</div>
Please dont downvote, actually I am new to Web Dev :P Thanks !

Categories