Develop Reference

Python Selenium - move vue slider on exchange

Im working on a crypto trading system, I don't have an access to the exchange API at the moment so I decided to try the solution using Selenium automation.
What I cannot figure out is how to move vue slider in exchange (to set a buying amount to 100%).
This is my code:
from selenium.webdriver import ActionChains
from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from time import sleep
import time
from selenium.webdriver.common.keys import Keys
import io
import subprocess
#proc = subprocess.Popen("./ChannelMessages.py", stdout=subprocess.PIPE)
chrome_options = Options()
#chrome_options.add_argument('--no-sandbox')
chrome_options.add_experimental_option("debuggerAddress", "127.0.0.1:9222")
driver = webdriver.Chrome(options=chrome_options)
executor_url = driver.command_executor._url
session_id = driver.session_id
print(session_id)
print(executor_url)
driver.get("https://www.hotbit.io/exchange?symbol=XRP_USDT")
time.sleep(10)
en = driver.find_element('xpath', '//*[#id="app"]/div[1]/div[2]/div/div/div/div[1]/div[1]/div[4]/ul/li/form[1]/section[1]/div[4]/div/div/div[1]')
move = ActionChains(driver)
move.click_and_hold(en).move_by_offset(50, 0).release().perform()
This is a slider code:
<div data-v-33e6e6c8="" class="percent-box"><div class="vue-slider vue-slider-ltr v-left-slider" style="padding: 7px 0px; width: auto; height: 4px;"><div class="vue-slider-rail"><div class="vue-slider-process" style="height: 100%; top: 0px; left: 0%; width: 0%; transition-property: width, left; transition-duration: 0.5s;"></div><div class="vue-slider-marks"><div class="vue-slider-mark vue-slider-mark-active" style="height: 100%; width: 4px; left: 0%;"><div class="vue-slider-mark-step vue-slider-mark-step-active"></div></div><div class="vue-slider-mark" style="height: 100%; width: 4px; left: 25%;"><div class="vue-slider-mark-step"></div></div><div class="vue-slider-mark" style="height: 100%; width: 4px; left: 50%;"><div class="vue-slider-mark-step"></div></div><div class="vue-slider-mark" style="height: 100%; width: 4px; left: 75%;"><div class="vue-slider-mark-step"></div></div><div class="vue-slider-mark" style="height: 100%; width: 4px; left: 100%;"><div class="vue-slider-mark-step"></div></div></div><div aria-valuetext="0%" class="vue-slider-dot vue-slider-dot-hover" role="slider" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" tabindex="0" style="width: 14px; height: 14px; transform: translate(-50%, -50%); top: 50%; left: 0%; transition: left 0.5s ease 0s;"><div class="vue-slider-dot-handle"></div><div class="vue-slider-dot-tooltip vue-slider-dot-tooltip-top"><div class="vue-slider-dot-tooltip-inner vue-slider-dot-tooltip-inner-top"><span class="vue-slider-dot-tooltip-text">0%</span></div></div></div></div></div></div>
Maybe I'm looking for the wrong element in "driver.find_element", tried different elements thought, not sure.
P.S. I tried to locate elements using "name" and "xpath", tried basically all levels of classes to use, but still I couldn't move it, or even select it.
Any help will be much appreciated!
P.P.S: Resolved!
Needed to add a line:
from selenium.webdriver.common.by import By
and to modify "driver.find_element" line:
en = driver.find_element(By.CLASS_NAME, 'v-left-slider')

Needed to add a line:
from selenium.webdriver.common.by import By
and to modify "driver.find_element" line:
en = driver.find_element(By.CLASS_NAME, 'v-left-slider')

How do I get a word through Selenium?

I'd like to extract and use the red alphabet of the code below through 'Selenium', so please give me some advice on how to do it
The alphabet changes randomly on every try
<td>
<input type="text" name="WKey" id="As_wkey" value="" maxlength="10" class="inputType" style="width: 300px;" title="password" />
<span id="myspam" style="padding: 2px;">
<span style="font-size: 12pt; font-weight: bold; color: red;">H</span>123
<span style="font-size: 12pt; font-weight: bold; color: red;">R</span>
<span style="font-size: 12pt; font-weight: bold; color: red;">8</span>6789
</span>
(type red word.)
</td>
here is my code
red_characters_element = driver.find_element(By.ID, 'myspam')
red_characters_elements = red_characters_element.find_elements(by = By.CSS_SELECTOR, value="span[style='font-size: 12pt; font-weight: bold; color: red;']")
print(red_characters_elements)
result []

Given all the Red colored alphabets are inside of the <span> tag. You can retrieve it using tag.
red_characters_element = driver.find_element(By.ID, 'myspam')
red_characters_elements = red_characters_element.find_elements(By.TAG_NAME, 'span')
for red_character in red_characters_elements:
print(red_character.text)
Results :
H
R
8

If you need only red letters, you can try using the java script inside the selenium:
driver.execute_script('return document.querySelectorAll("[style*=red]")')
You get an array of objects where the style has the attribute "red", with the for loop you can get the values or anything else

How to pass a variable from Python back to HTML and display it

I am trying to control a motor using PWM, using Flask and Python on a Raspberry Pi. I have tried the solution in How to display a variable in HTML and it doesn't work for me.
How do I return the value back from the python, and how can I display it in the html.
The Html is using a grid to display the options that I can select in the python.
I have tried a few things, possibly the value is being returned, but I haven't been able to display it.
A python segment is here:
app.route('/up_15/')
def up_15():
global PWM_value
PWM_value = PWM_value + PWM_increment
duty_cycle_percentage = PWM_value * 100 / ms_per_cycle
print("Duty Cycle[F]: " + str(duty_cycle_percentage))
pwm.start(duty_cycle_percentage)
time.sleep(.5)
pwm.ChangeDutyCycle(0)
return (render_template('index.html'), PWM_value)
and the HTML that passes the value and gets the return is here.
Setup:
css
.grid-container {
display: grid;
grid-template-columns: 350px 350px 350px;
background-color: #ffffff;
padding: 10px;
grid-column-gap: 40px;
grid-row-gap: 30px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 3px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 80px;
text-align: center;
}
HTML:
<div class="grid-item">
UP +15%
</div>
<div class="grid-item"></div> / display PWM_Value here
<div class="grid-item"></div>
<div class="grid-item">
Down -15%
</div>
Ideally I would like the value of PWM_value displayed in the grid as marked above

This is a question about Flask, not HTML.
You should pass the value into your render_template call:
return render_template('index.html', PWM_value=PWM_value)
and use Jinja2 syntax in the template to display it:
<div class="grid-item">{{ PWM_value }}</div>

I cannot click the Admin button nested inside the iFrame

I am automating our Web application using Python with Selenium Webdriver.
I log into the application and I want to click the Administration button.
When i run my code it cannot find the Administration button by my Xpath. I have tried a few different ways.
If i enter //div[7]/div/div in selenium IDE and click Find it highlights the Administration button. I do not know why it won't find it when i run the code.
I would prefer to use CSS as that is faster than Xpath.
I need some help please.
I get the following error:
selenium.common.exceptions.NoSuchElementException: Message: Unable to locate element: {"method":"xpath","selector":"html/body/div[2]/div[2]/div/div[2]/div/div[2]/div/div[7]/div/div"}
I inspect the HTML element. The full HTML is as follows:
<html style="overflow: hidden;">
<head>
<body style="margin: 0px;">
<html style="overflow: hidden;">
<head>
<body style="margin: 0px;">
<iframe id="__gwt_historyFrame" style="position: absolute; width: 0; height: 0; border: 0;" tabindex="-1" src="javascript:''">
<html>
</iframe>
<noscript> <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif;"> Your web browser must have JavaScript enabled in order for this application to display correctly.</div> </noscript>
<script src="spinner.js" type="text/javascript">
<script type="text/javascript">
<script src="ClearCore/ClearCore.nocache.js" type="text/javascript">
<script defer="defer">
<iframe id="ClearCore" src="javascript:''" style="position: absolute; width: 0px; height: 0px; border: medium none;" tabindex="-1">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
<script type="text/javascript">
<script type="text/javascript">
</head>
<body>
</html>
</iframe>
<div style="position: absolute; z-index: -32767; top: -20cm; width: 10cm; height: 10cm; visibility: hidden;" aria-hidden="true"> </div>
<div style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;">
<div style="position: absolute; z-index: -32767; top: -20ex; width: 10em; height: 10ex; visibility: hidden;" aria-hidden="true"> </div>
<div style="position: absolute; overflow: hidden; left: 0px; top: 0px; right: 0px; bottom: 0px;">
<div style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;">
<div style="position: absolute; z-index: -32767; top: -20ex; width: 10em; height: 10ex; visibility: hidden;" aria-hidden="true"> </div>
<div style="position: absolute; overflow: hidden; left: 1px; top: 1px; right: 1px; bottom: 1px;">
<div class="gwt-TabLayoutPanel" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;">
<div style="position: absolute; z-index: -32767; top: -20ex; width: 10em; height: 10ex; visibility: hidden;" aria-hidden="true"> </div>
<div style="position: absolute; overflow: hidden; left: 0px; top: 0px; right: 0px; height: 30px;">
<div class="gwt-TabLayoutPanelTabs" style="position: absolute; left: 0px; right: 0px; bottom: 0px; width: 16384px;">
<div class="gwt-TabLayoutPanelTab GEGQEWXCK gwt-TabLayoutPanelTab-selected" style="background-color: rgb(254, 255, 238);">
<div class="gwt-TabLayoutPanelTab GEGQEWXCK" style="background-color: rgb(254, 255, 238);">
<div class="gwt-TabLayoutPanelTab GEGQEWXCK" style="background-color: rgb(254, 255, 238);">
<div class="gwt-TabLayoutPanelTab GEGQEWXCK" style="background-color: rgb(254, 255, 238);">
<div class="gwt-TabLayoutPanelTab GEGQEWXCK" style="background-color: rgb(254, 255, 238);">
<div class="gwt-TabLayoutPanelTab GEGQEWXCK" style="background-color: rgb(254, 255, 238);">
<div class="gwt-TabLayoutPanelTab GEGQEWXCK" style="background-color: rgb(254, 255, 238);">
<div class="gwt-TabLayoutPanelTabInner">
<div class="gwt-HTML">Administration</div>
</div>
</div>
</div>
</div>
<div style="position: absolute; overflow: hidden; left: 0px; top: 30px; right: 0px; bottom: 0px;">
</div>
</div>
<div style="position: absolute; overflow: hidden; top: 1px; right: 1px; width: 30px; height: 25px;">
<div style="position: absolute; overflow: hidden; left: 0px; top: -25px; right: 0px; height: 25px;">
</div>
</div>
</div>
<div style="display: none;" aria-hidden="true"></div>
</body>
</html>
My code is as follows:
element.py
from selenium.webdriver.support.ui import WebDriverWait
class BasePageElement(object):
def __set__(self, obj, value):
driver = obj.driver
WebDriverWait(driver, 100).until(
lambda driver: driver.find_element_by_name(self.locator))
driver.find_element_by_name(self.locator).send_keys(value)
def __get__(self, obj, owner):
driver = obj.driver
WebDriverWait(driver, 100).until(
lambda driver: driver.find_element_by_name(self.locator))
element = driver.find_element_by_name(self.locator)
return element.get_attribute("value")
locators.py
from selenium.webdriver.common.by import By
class MainPageLocators(object):
Submit_button = (By.ID, 'submit')
usernameTxtBox = (By.ID, 'unid')
passwordTxtBox = (By.ID, 'pwid')
submitButton = (By.ID, 'button')
AdministrationButton = (By.CSS_SELECTOR, 'div.gwt-HTML.firepath-matching-node')
AdministrationButtonXpath = (By.XPATH, '//html/body/div[2]/div[2]/div/div[2]/div/div[2]/div/div[7]/div/div')
AdministrationButtonCSS = (By.CSS_SELECTOR, '/body/div[2]/div[2]/div/div[2]/div/div[2]/div/div[7]/div/div')
AdministrationButtonXpath2 = (By.XPATH, 'html/body/div[2]/div[2]/div/div[2]/div/div[2]/div/div[7]/div/div/text()')
AdministrationButtonXpath3 = (By.XPATH, '//div[7]/div/div')
contentFrame = (By.ID, 'ClearCore')
Page.py
from element import BasePageElement
from locators import MainPageLocators
from selenium.common.exceptions import NoSuchElementException
from selenium.common.exceptions import NoAlertPresentException
class SearchTextElement(BasePageElement):
class BasePage(object):
def __init__(self, driver):
self.driver = driver
class LoginPage(BasePage):
search_text_element = SearchTextElement()
def userLogin_valid(self):
userName_textbox = self.driver.find_element(*MainPageLocators.usernameTxtBox)
userName_textbox.clear()
userName_textbox.send_keys("riaz.ladhani")
password_textbox = self.driver.find_element(*MainPageLocators.passwordTxtBox)
password_textbox.clear()
password_textbox.send_keys("test123")
submitButton = self.driver.find_element(*MainPageLocators.submitButton)
submitButton.click()
#mydriver.find_element_by_xpath(xpaths['usernameTxtBox']).clear()
def clickAdministration_button(self):
#administrationButton = self.driver.find_element(*MainPageLocators.AdministrationButton)
content_frame = self.driver.find_element(*MainPageLocators.contentFrame)
self.driver.switch_to.frame(content_frame)
#self.driver.switch_to.frame(*MainPageLocators.contentFrame)
#self.driver.Switch_to().Frame(*MainPageLocators.contentFrame)
#administrationButtonCSS = self.driver.find_element(*MainPageLocators.AdministrationButtonCSS)
#administrationButtonXpath= self.driver.find_element(*MainPageLocators.AdministrationButtonXpath)
#administrationButtonXpath= self.driver.find_element(*MainPageLocators.AdministrationButton_CSS_regex)
#administrationButtonCSS2 = self.driver.find_element(*MainPageLocators.AdministrationButtonCSS2)
adminButton = self.driver.find_element(*MainPageLocators.AdministrationButtonXpath3)
adminButton.click()
LoginPage_TestCase.py
import unittest
from selenium import webdriver
import page
class LoginPage_TestCase(unittest.TestCase):
def setUp(self):
self.driver = webdriver.Firefox()
self.driver.get("http://my-pc.company.local:8080/clearcore")
def test_login_valid_user(self):
login_page = page.LoginPage(self.driver)
login_page.userLogin_valid()
login_page.ClickAdministration_button()
def tearDown(self):
self.driver.close()
if __name__ == "__main__":
unittest.main()

As the “Administration button” is located under the frame whose id is “ClearCore” and it is not in the webpage. That is the reason why the element is unable to locate while executing the code.
So before clicking that button you need to switch to that frame either by using
1. driver.switch_to_window("windowName")
2. driver.switch_to_frame("frameName")
Once we are done with working on frames, we will have to come back to the parent frame which can be done using:
driver.switch_to_default_content()

I Have finally managed to solve my issue. The dev said I had to wait for the page to have fully completed loading. The page was still loading the JavaScript functions when all the elements were displayed on the screen.
I first tried time.sleep(30) then click the button. It worked. Waiting for 30 secs every time is not efficient. I then used WebDriverWait and this is more efficient.
Here is the code i used:
WebDriverWait(mydriver, 10).until(lambda d: mydriver.find_element_by_xpath("//div[. = 'Administration']").click())

You have to use
driver.switch_to_frame("__gwt_historyFrame");
before you Administration button click code. This code will take WebDriver into frame, then only WebDriver able to find button inside the frame,
if you want to come out of the frame to navigate outside,
use
driver.switch_to_default_content()
*"__gwt_historyFrame" this is your frame name

How to print a tooltip message using selenium in python

`
How to write code to print a tooltip message in python?
I am using the following code to move my pointer to the element on the web page:
element = driver.find_element_by_css_selector("locator")
webdriver.ActionChains(driver).move_to_element(element).perform()
time.sleep(3)
Also, our developer is using the same class for all the tool tip messages on that page so I don't know how to print that particular tooltip message.
HTML code:
<div class="d3-tip n" style="position: absolute; opacity: 0; pointer-events: none; top: 1108px; left: 116px;"><div><strong>Table Name:</strong> <span style="color:#1F77B4">lineitem</span></div><div><strong>Number of Queries:</strong> <span style="color:#1F77B4">13</span></div></div>
I want to print the "lineitem" and "13" from the above div tag
But as I mentioned this is another div tag with the same class that has a different tool tip message:
<div class="d3-tip n" style="position: absolute; opacity: 0; pointer-events: none; top: 469px; left: -180.23684692382813px;">select s_suppkey, s_name, s_address, s_phone, total_revenue from supplier s join revenue r on s.s_suppkey = r.supplier_no join (select max(total_revenue) as m from revenue) mr on r.total_revenue = mr.m order by s_suppkey </div>

According to the info you've provided, you can get the desired div by the text inside.
For example, you can check for Table Name: text using the xpath:
element = driver.find_element_by_xpath("//div[./div/strong, 'Table Name:']")