This is site:
https://play.alienworlds.io/
I need to click on the login button.
In HTML I can't find it...
<body>
<div class="webgl-content">
<div id="unityContainer" style="width: 1528px; height: 355px; padding: 0px; margin: 0px; border: 0px; position: relative; background: url("Build/fff2a664dc06d7254246c6bb8d5d0e21.jpg") center center / cover;">
<canvas id="#canvas" style="width: 100%; height: 100%; cursor: default;" width="1528" height="355"></canvas>
<div class="logo " style="display: none;"></div>
<div class="progress Dark" style="display: none;">
<div class="empty" style="width: 0%;"></div>
<div class="full" style="width: 100%;"></div>
</div>
</div>
</div>
<script src="Build/061f463856577255fb5eefaf73e67127.js" type="text/javascript"></script>
<script src="bundle.js" type="text/javascript"></script>
<script src="hashes.js" type="text/javascript"></script>
<script src="message_handler.js" type="text/javascript"></script>
<script type="text/javascript">
// Initial screen setup
unityContainer.style.height = window.innerHeight + "px";
unityInstance = UnityLoader.instantiate(
"unityContainer",
"Build/bd2a2f07495f744fece3ee93c4a56908.json",
{ onProgress: UnityProgress }
);
function Resize() {
document.getElementById('unityContainer').style.width =
window.innerWidth + 'px';
document.getElementById('unityContainer').style.height =
window.innerHeight + 'px';
if (UnityLoader.SystemInfo.mobile) {
if (navigator.userAgent.indexOf('Android') != -1)
{
if (screen.width > screen.height) {
unityInstance.SendMessage("Canvas", "SetScreenModePanel", "false");
}
else
{
unityInstance.SendMessage("Canvas", "SetScreenModePanel", "true");
}
}
else
{
switch (window.orientation) {
case -90:
case 90:
unityInstance.SendMessage('Canvas', 'SetScreenModePanel', 'false');
break;
default:
unityInstance.SendMessage('Canvas', 'SetScreenModePanel', 'true');
break;
}
}
}
}
/*function Fullscreen() {
unityInstance.SetFullscreen(1);
if (navigator.userAgent.indexOf('Android') != -1)
window.screen.orientation.lock('landscape');
}*/
window.addEventListener('orientationchange', Resize);
// Initial execution if needed
//Resize();
</script>
<script src="blob:https://play.alienworlds.io/9ffeac95-ddb2-480b-a75f-a20043229a5b" id="0941210686ad38c201cd5aecd353ebd4"></script>
</body>
The question is tricky.
I've added the answer in Python. It uncovers the concept. If you can't, I will translate the answer to Java. The approach to such tasks is really what you need.
I could click login button with ActionChains class.
Please not that this is not very stable case for few reasons:
1 It depends on screen resolution, so you should set the resolution after your browser is opened
2 You will need to add waits (replace time.sleep() with Selenium's waits)
3 You cannot move your mouse while test is executing because it will break your actions
4 And the biggest problem on my opinion is that after you click the button, you will be dealing with Captcha.
This is my code which I used while debugging. You should set screen resolution because most probably your coordinates will be different.
import time
from selenium import webdriver
from selenium.webdriver import ActionChains
driver = webdriver.Chrome(executable_path='/snap/bin/chromium.chromedriver')
url = "https://play.alienworlds.io/"
driver.get(url)
driver.set_window_size(1522, 754) # setting window size to be sure what resolution you work with
time.sleep(20)
driver.implicitly_wait(25)
canvas = driver.find_element_by_css_selector("canvas[id='#canvas']")
print(driver.get_window_size()) # print to make sure window size is correct
drawing = ActionChains(driver)
print("moving by offset")
drawing.move_by_offset(450, 511)
print("clicking")
drawing.click()
print("clicked")
drawing.perform()
print("performed")
time.sleep(5) # just to check that a new window is opened
driver.close()
driver.quit()
I could improve it, but it is not 5 minutes task.
Good luck!
p.s. move_by_offset moves the cursor from the upper left corner of your screen.
Update:
I've added driver.set_window_size(1522, 754) This is the canvas resolution I get when I inspect canvas element.
I print print(driver.get_window_size()) to make sure the screen resolution is as expected.
I've tried few tools to measure browser window size and found out that My Ruler extension by Leann Pagac works the best for canvas. All other extensions, even they are more commonly used could not measure coordinates on the canvas correctly.
Also, check this post to get more details on how to work with canvas How to perform Mouse Wheel scrolling over HTML5 Canvas in Selenium?
Related
I'm currently building a Vaadin Webapp for getting the path of certain HTML-Elements from a website. Therefore, i want to
load a webpage inside an IFrame / BrowserFrame of a Vaadin Page
let the user visually click on an highlighted HTML-Element (in a way like http://selectorgadget.com/)
generate the Path (XPath seems to be the best choice) and
display it inside a formular of the Vaadin Page (on the same site, as to check the selections)
My questions:
Is the transfer of the path data from the website inside the iFrame to the Vaadin App actually possible?
Is the selection of html elements possible with techniques provided by the Vaadin App (so that i do not need any Javascript inside the IFrame)?
Is there some technology other than iFrames to better accomplish my goal?
Thanks in advance!
I've managed to get a solution:
Full interaction between Javascript inside the iframe and the VaadinUI (As the component to build has to be integrated in an existing VaadinUI) is possbile by:
1. Injecting Scripts, css and other needed Html Content into the loaded Webpage. The selection scripts of the solution were taken and extended from here
var elements = {
top: $('#selector-top'),
left: $('#selector-left'),
right: $('#selector-right'),
bottom: $('#selector-bottom')
};
function registerMouseMove() {
$(document).mousemove(function(event) {
if (event.target.id.indexOf('selector') !== -1 || event.target.tagName === 'BODY' || event.target.tagName === 'HTML') return;
var $target = $(event.target);
targetOffset = $target[0].getBoundingClientRect(),
targetHeight = targetOffset.height,
targetWidth = targetOffset.width;
//console.log(targetOffset);
elements.top.css({
left: (targetOffset.left - 4),
top: (targetOffset.top - 4),
width: (targetWidth + 5)
});
elements.bottom.css({
top: (targetOffset.top + targetHeight + 1),
left: (targetOffset.left - 3),
width: (targetWidth + 4)
});
elements.left.css({
left: (targetOffset.left - 5),
top: (targetOffset.top - 4),
height: (targetHeight + 8)
});
elements.right.css({
left: (targetOffset.left + targetWidth + 1),
top: (targetOffset.top - 4),
height: (targetHeight + 8)
});
});
};
function unregisterMouseMove() {
$(document).unbind();
elements.top.css({
left: 0,
top: 0,
width: 0
});
elements.bottom.css({
top: 0,
left: 0,
width: 0
});
elements.left.css({
left: 0,
top: 0,
height: 0
});
elements.right.css({
left: 0,
top: 0,
height: 0
});
};
function registerClickListener() {
$(document).click(function(event) {
if (event.target.id.indexOf('selector') !== -1 || event.target.tagName === 'BODY' || event.target.tagName === 'HTML')
return;
var target = event.target;
var xpath = Xpath.getElementXPath(target);
$.ajax({
type: "POST",
url: "/rest?text=" + xpath //,
});
console.log(xpath);
});
};
function unregisterClickListener() {
$(document).off("click");
}
function disableLinks() {
$('a').click(function(event) {
event.preventDefault();
});
}
function enableLinks() {
$('a').unbind('click');
}
function startSelecting() {
registerMouseMove();
registerClickListener();
disableLinks();
}
function stopSelecting() {
unregisterClickListener();
unregisterMouseMove();
enableLinks();
}
<!-- only for demonstration, delete! for use in programm call startSelecting by a Javascript call from the UI -->
window.onload = function(event) {
startSelecting();
};
#selector-top,
#selector-bottom {
background: blue;
height: 3px;
position: fixed;
transition: all 300ms ease;
}
#selector-left,
#selector-right {
background: blue;
width: 3px;
position: fixed;
transition: all 300ms ease;
}
<div id="selector">
<div id="selector-top"></div>
<div id="selector-left"></div>
<div id="selector-right"></div>
<div id="selector-bottom"></div>
</div>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js " /></script>
<script type="text/javascript" src="link/to/xpath.js"></script>
</head>
<body>
<span><b>Test</b></span>
<p>trallalalala</p>
</body>
</html>
2. Calling defined Javascripts inside the iframe using Vaadins Javascript calls (see here) and some Javascript path magic:
Page.getCurrent().getJavaScript().execute("window.frames[1].frameElement.contentWindow.startSelecting();");
3. Use Firebugs xpath.js script to get the XPath when clicking on an item (be aware of the license):
var xpath = Xpath.getElementXPath(event.target);
4. Use a ajax rest call to post data to your Vaadin Application:
$.ajax({
type: "POST",
url: "/rest?text="+xpath
});
5. Create a rest interface, thats using a Vaadin Broadcaster to broadcast the xpath value to the UI. For details on how to use the Broadcaster and Push for VaadinUI, see Eric G. post here
#RequestMapping("/rest")
public String sayHello(#RequestParam(value = "text", required = true) String text) {
Broadcaster.broadcast(text);
}
6. Finally: The VaadinUI receives the Broadcast and prints the xpath e.g. to a TextField and processes it further
The only downside of this is, that it can be only used for single user applications, as i not managed to differentiate between different instances of the same UI, i.e. one rest call will start a broadcast to all the instances of the UI and transport the same data to them.
I hope this helps future visitors. :)
I want to pass a variable from HTML to Java. For this, I wrote the following code:
<!doctype html>
<html>
<title>How to create a typewriter or typing effect with jQuery</title>
<div id="example1">fsdfsdfojsdlk sdfj lskdhfk sdf </div>
<style>
body{
background: transparent;
color: #ec5a62;
}
#container{
font-size: 7em;
}
</style>
</head>
<body>
<div id="container"></div>
<!--
We use Google's CDN to serve the jQuery js libs.
To speed up the page load we put these scripts at the bottom of the page
-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
//define text
var text = ("document.getElementById("example1")");
//text is split up to letters
$.each(text.split(''), function(i, letter){
//we add 100*i ms delay to each letter
setTimeout(function(){
//we add the letter to the container
$('#container').html($('#container').html() + letter);
}, 30*i);
});
</script>
</body>
</html>
But it is not working. How can I achieve this?
Please do help me.
I'm using var text =("document.getElementById("example1")");
But its not working.
to get value use var x=document.getElementById("example1").value;
your code should be like this:
var text=document.getElementById("example1").value;
//text is split up to letters
$.each(text.split(''), function(i, letter){
//we add 100*i ms delay to each letter
setTimeout(function(){
//we add the letter to the container
$('#container').html($('#container').html() + letter);
}, 30*i);
});
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I need to implement a custom progressbar in my web application. I'm using Smartgwt to build the app UI.
The progressbar should be similar to (but not exactly):
The progressbar should be dynamic (red and green marks according to a given parameters).
What should be the right technology to implement such a progressbar? should I do it using Smartgwt Composite extension? using javascript?
thank you.
You can do it easily using Javascript and CSS.
I'll assume the following components:
bar_container.png (481x36) - this is the empty grey background
bar_content.png (481x36) - this is the colored bar the starts with red and end with green
red_marker.png (20x36)
green_marker.png (20x36)
What you need to do is this:
<style>
.container {
position: absolute;
width: 481px;
height: 36px;
}
.content {
position: absolute;
left: 0px;
top: 0px;
background-image: url(bar_content.png);
clip:rect(0px, 0px, 36px, 0px); /* modify the second value to adjust width */
}
.translucent {
opacity: 0.5;
}
.marker {
position: absolute;
left: 0px; /* or where-ever it should be to fit */
top: 0px;
width: 20px;
height: 36px;
}
.red {
background-image: url(red_marker.png);
}
.green {
background-image: url(green_marker.png);
}
</style>
<div class="container">
<div class="content">
</div>
<div class="marker red">
</div>
<div class="content translucent">
</div>
<div class="marker green">
</div>
</div>
<script>
function setProgressBar(red, green) { // red and green are values between 0 and 1
document.querySelector(".content").style.clip = "rect(0px, " + (red * 481) + "px, 36px, 0px)";
document.querySelector(".translucent").style.clip = "rect(0px, " + (green * 481) + "px, 36px, 0px)";
document.querySelector(".red").style.left = (red * 481 - 10) + "px";
document.querySelector(".green").style.left = (green * 481 - 10) + "px";
}
</script>
You will need to adjust the values.
A better solution would be to wrap all that in a Javascript function so that it can be reused.
In my project I need to expand my div section,when link is clicked,say "see more".
how can this be done?
Check the one which is in www.facebook.com,where each post has see more,if the div section cant contain the section...
This is the screenshot of what i have done
Code:
<div id="page" >
<div id="page-bgtop">
<div id="page-bgbtm">
<div id="content" style="min-height:400px" >
<div class="post" >
<h2 class="title">UPDATES</h2>
<%
try{
st1=con1.createStatement();
ResultSet rs=st1.executeQuery("select * from article ORDER BY artid DESC");
%>
<div style="width:450px; word-wrap: break-word;">
<%
while(rs.next())
{
String s=rs.getString("article");
out.println("<div>");
out.println("<p align ='justify' >"+s+"</p>");
out.println("<hr style='border:dashed #FFFFFF; border-width:1px 0 0 0; height:0;line-height:0px;font-size:0;margin:0;padding:0;'>");
out.println("</div>");
}
%>
</div>
<%
}catch(Exception e){
//System.out.println("exception is "+e);
e.printStackTrace();
}
%>
</div>
You should be able to expose/hide divs using the .show and .hide methods from JQuery as shown here.
Add a javascript function to onclick event of the link. In that javascript function, set the display property of the relevant div to display:hidden or display:block.
Or
You can set a initial height using CSS height property and set overflow-y:hidden
Then onclick of the relevant link, change the height of the div to see all of the content.
are there any Java script or any sample available for the Link / text / image that stays static even when the webpage is scrolled.
I am looking for something similar to the one on the bottom left side of the webpage borders(Helpful?, "Yes", "No").
http://www.ehow.com/facebook-for-business/
Regards,
Gourav
Try this code this may help you. but this code required lot more css and javascript code to make this same as ehow.
<style>
.mainDiv {
height: 1000px;
border: solid 1px #000000;
}
.fixDiv {
height: 250px;
width: 20px;
border: solid 1px #000000;
position: fixed;
margin-top: 200px;
}
</style>
<html>
<body>
<div class="fixDiv">h e l p f u l l? Yes No</div>
<div class="mainDiv">Gaurav</div>
</body>
</html>
This can be done using simple css
create a style for div with id="poll" and give this style
div#poll {
position: fixed;
left: 0;
top: 100px;
}
<div id="poll">
<img src="image.jpg" alt="image" class="contimage" border="0"/></div>
This div will be shown in the left side of the window