I want to load the page https://game.ultimate-bridge.com/table/ in PhantomJS, choose tournament or 4-hand, populate table and board and then click the load hand.
I have mainly tried to click the button "Load Hand" but not even that is going well.
if ("complete" === readyState) {
console.log("if " + readyState);
var x = document.getElementById("root").querySelectorAll(".jss7.jss46.jss51");
x.click();
console.log("klick");
} // if-statement
The button do not get clicked
page.evaluate(function() {
var ev = document.createEvent("MouseEvents");
ev.initEvent("click", true, true);
document.querySelector("div.jss7.jss46.jss51 button[type='submit']").dispatchEvent(ev);
});
Related
I'm using canvas (phaser.io game framework) to make games and would like to do selenium tests. Sadly I can't replay recorded actions on a canvas.
For example I can't replay the click on the button here https://phaser.io/examples/v2/input/button-open-popup
I get this in the log:
1.Trying to execute open on /examples/v2/input/button-open-popup... Success
2.Trying to execute selectFrame on index=0... Success
3.Trying to execute clickAt on css=canvas with value 422,502... Success
But nothing happens on the screen and the popup is not poping up.
Is there a problem with clicking on canvas through Selenium IDE or maybe I'm doing something wrong?
I did some automated tests for Phaser games.
Let's take an example, I have to click on a menu button.
The way I managed to click on the button precisely every time is that I created a html page, with the same width and height as my canvas ( first, I decided the size of the chrome window, for me I used 800x900, and then get the canvas size), and in my html page I only put javascript to output me the positions where I click.
So basically I created a html, with the same dimension as my canvas, and clicked on it at the approximate position of my canvas button.
Here is the code I've used for my tests:
var mainState ={
preload: function(){
},
create: function(){
game.stage.backgroundColor = '#71c5cf';
game.scale.pageAlignHorizontally = true;
game.scale.pageAlignVertically = true;
},
update: function(){
getcoordinates();
}
};
function getcoordinates(){
if (game.input.mousePointer.isDown){
var x = game.input.activePointer.position.x;
var y = game.input.activePointer.position.y;
console.log("x" + x, "y" + y);
var worldx = game.world.centerX;
var worldy = game.world.centerY;
console.log("world x" + worldx, "world y"+ worldy);
}
};
var game = new Phaser.Game(384,683, Phaser.CANVAS);
game.state.add('mainState', mainState);
game.state.start('mainState');
As for checking if my action was succesfull, I used JavascriptExecutor. And in Selenium I've created some functions that do just that, navigate to coordinates and execute click.
I have two window :
window1 : have an option_dialog width 3 option : 'Video','Image','Document'
var optionsDialogOpts = {
options:['Video','Image','Document'],
title:'Type'
};
var dialog_search_click = Titanium.UI.createOptionDialog(optionsDialogOpts);
dialog_search_click.addEventListener('click',function(e){
//spinner_search_click.setTitle(e.index);
if(e.index==0)
{
//save option select All
Ti.App.Properties.setString('option_dialog','0');
}
if(e.index==1)
{
Ti.App.Properties.setString('option_dialog','1');
}
if(e.index==2)
{
Ti.App.Properties.setString('option_dialog','2');
}
})
window2 : display option that selected in window1..
var option=Ti.App.Properties.getString('option_dialog');
Ti.API.info(option);
In the first time, option is displayed in window2 is true but when click back to window1 and select other option in option_dialog and go to window 2,it also only display option as the first time ,not change.Can you help me.
This code is right but, I thought one error with this.
your window1 and window2 both code in one .JS file. so this problem is ocurring.
var option=Ti.App.Properties.getString('option_dialog');
This line is not update always, it store information once.
You try this type,
add a new Button on Second window and check on Click Event this is working properly.
button.addeventListener('click',function(){
var option=Ti.App.Properties.getString('option_dialog');
alert("Option :- " + option);
});
If, this is working then. I think you can understand, What i want to say.
Cheers.....!
Can anyone help me with a link where I find Dojo sliding panel ? I have been searching for it but still didn't got it. I have sliding panel for jQuery, I got it from this link : http://web-kreation.com/all/implement-a-nice-clean-jquery-sliding-panel-in-wordpress-27/
You could make use of the dojo.fx.wipeIn functionality.
http://dojotoolkit.org/reference-guide/1.7/dojo/fx/wipeIn.html
So if you create two divs, one above the other, have the top one with display: none, and the other as the bit that you click to slide the panel down. Then use dojo.connect to link the clicking of the bottom panel to a wipe in of your top panel.
e.g.
// Have your main body content
var mainBody;
// Create top panel
var myPanel = document.createElement("div");
// Set visibility to none
dojo.style(myPanel, "display", "none");
// Create tab to expand your panel (or slide it down)
var expand = document.createElement("div");
expand.innerHTML = "click here to slide down";
mainBody.appendChild(myPanel);
mainBody.appendChild(expand);
var self = this;
dojo.connect(expand, "onclick", this, slidePanel);
Then you'd have your slidePanel function do something like:
// Get reference to your panel
var myPanel;
var wipeArgs = {
node: myPanel
};
// Then just wipe the panel in or out respectively
if (myPanel.style.display == "none") {
dojo.fx.wipeIn(wipeArgs).play();
} else {
dojo.fx.wipeOut(wipeArgs).play();
}
My problem is whenever I left click a dynatree node then right click another dynatree node to display my context menu the node which was left clicked remains highlighted in blue so I end up with two nodes in blue. If I then right click successive nodes the highlighting works correctly but the left clicked node remains highlighted.
The left click processing clears the previous node on mouseup. I initiate context menu processing via
document.oncontextmenu=contextMenu
which is also called on mouse up.
I have tried to capture the right button mouseup event and make the context menu node active thinking that would change the state of the left clickked node but not so.
$("#tree").mouseup(function(e){
if(e.button == 2){
e.target.setActive();// right mouse up
}
});
How should I get the last left clicked node to unhighlight when another node is right clicked ? It does not look right to have two nodes highlighted at once. I have noticed the dynatree context menu demo does not unhighlight the previously left clicked node when another node is right clicked so is this by design ?? Can you get around it ?
Thanks,
Al
OK this works
In my myfile.js after I create the dynatree I added:
var dtnode; //dynatree node Global <--ADDED
var elem; //DOM node Global <--ADDED
Function BuildTree()
//ADDED following code after the dynatree was loaded
$("#tree").mouseup(function(e){
if(e.button == 2){ //RIGHT MOUSE UP
if(!(elem == null)){
var elem2 = e.currentTarget.document.activeElement;
dtnode = tree.getDtNodeFromElement2(elem);
dtnode.deactivate();
elem = null;
}
}else{//LEFT MOUSE UP
if(!(elem == null)){
elem = null;
}
elem = e.currentTarget.document.activeElement;
}
});
//In jquery.dynatree.js
//$Version: 1.1.1$
//$Revision: 481, 2011-03-02 07:25:35$
//The following changes were made:
getSelectedNodes: function() {
return this.tree.getSelectedNodes();
},
// AFTER THE ABOVE FUNCTION THE FOLLOWING FUNCTION WAS ADDED
getDtNodeFromElement2: function() {
return this.tree.getDtNodeFromElement2();
},
//********************************************************
getSelectedNodes: function(stopOnParents) {
var nodeList = [];
this.tnRoot.visit(function(node){
if( node.bSelected ) {
nodeList.push(node);
if( stopOnParents === true ){
return "skip"; // stop processing this branch
}
}
});
return nodeList;
},
// AFTER THE ABOVE FUNCTION THE FOLLOWING FUNCTION WAS ADDED
getDtNodeFromElement2: function(elem) {
var sourceNode = getDtNodeFromElement(elem);
return sourceNode;
},
Summary:
By keeping track of the last element to be left clicked and exposing the dynatree getDtNodeFromElement method through getDtNodeFromElement2 it is possible to call the deactivate method on the last left clicked node whenever the first right click of a node occurs. This eliminates simultaneous highlighting of tree nodes.
I need to add a short method I added to jquery.dynatree.js to make it work.
//--- Class members ------------------------------------------------------------
DynaTree.prototype = {
// Constructor
// member functions
getDtNodeFromElement2: function(elem) {
var sourceNode = getDtNodeFromElement(elem);
return sourceNode;
},
I know this is old, but I just ran into the same problem. When manually trying to manage 'dynatree-active' classes on nodes to force highlighting, I was having issues with multiple nodes being selected. By using a left click along with the right click, dynatree managed all of the selecting and deselecting active nodes.
$("#tree").mouseup(function(e){
if(e.button == 2) e.target.click();
});
I struggled with this one for a bit, I hope it can save someone some pain.
One more change I found while clicking around the display
Instead of
}else{//LEFT MOUSE UP
if(!(elem == null)){
elem = null;
}
elem = e.currentTarget.document.activeElement;
}
use
}else{//LEFT MOUSE UP
if(!(elem == null)){
elem = null;
}
elem = e.currentTarget.document.activeElement;
if(elem.tagName != 'A'){
elem = e.target;
}
}
This corrects a issue where the old highlighting problem reappears of a non A element is clicked.
Al
I have 2 buttons next to a textbox and another textbox after the 2 buttons. The tabindex for the first textbox is 1000, the first button is 1001 and the second button is 1002. The second textbox has a tabindex of 1003.
When I press tab, the tabindex works fine in all browsers except for Safari, where it immediately moves from the first textbox to the second textbox although the tabindex has been set properly. Any ideas on how to prevent this issue?
By default tab-access is disabled in safari(!). To enable it, check "Preferences > Advanced > Press tab to highlight each item on a page".
Solution for iOS will be holding Option Key + Tab key.
Making Safari and a Mac accessible:
Testing on a Mac:
System Preferences -> Keyboard -> ShortCuts (tab) -> Full Keyboard Access -> All Controls
For Tabbing to work on Safari:
Preferences -> Advanced -> Press tab to highlight each item on a page (check this)
If you're writing your own webpage, I'd fix write something with a bit of jquery/javascript. This is what I've used on mine.
The drawback is that you prevent the default tab-key behavior on the page, which may be a bigger problem for accessibility in some situations. But I doubt it.
var Tab = {};
Tab.i = 1,
Tab.items = 0;
function fixTabulation () {
/* This can be used to auto-assign tab-indexes, or
# commented out if it manual tab-indexes have
# already been assigned.
*/
$('input, select, textarea').each(function(){
$(this).attr('tabindex', Tab.i);
Tab.i++;
Tab.items++;
});
Tab.i = 0;
/* We need to listen for any forward or backward Tab
# key event tell the page where to focus next.
*/
$(document).on({
'keydown' : function(e) {
if (navigator.appVersion.match("Safari")) {
if (e.keyCode == 9 && !e.shiftKey) { //Tab key pressed
e.preventDefault();
Tab.i != Tab.items ? Tab.i++ : Tab.i = 1;
$('input[tabindex="' + Tab.i + '"], select[tabindex="' + Tab.i + '"], textarea[tabindex="' + Tab.i + '"]').not('input[type="hidden"]').focus();
}
if (e.shiftKey && e.keyCode == 9) { //Tab key pressed
e.preventDefault();
Tab.i != 1 ? Tab.i-- : Tab.i = Tab.items;
$('input[tabindex="' + Tab.i + '"], select[tabindex="' + Tab.i + '"], textarea[tabindex="' + Tab.i + '"]').not('input[type="hidden"]').focus();
}
}
}
});
/* We need to update Tab.i if someone clicks into
# a different part of the form. This allows us
# to keep tabbing from the newly clicked input
*/
$('input[tabindex], select[tabindex], textarea[tabindex]').not('input[type="hidden"]').focus(function(e) {
Tab.i = $(this).attr('tabindex');
console.log(Tab.i);
});
}
$(document).ready(function() {
fixTabulation();
});
This is no perfect solution, but it's quite better than telling all your users to go change their Safari settings in System Prefs, lol.
I tried the following with Safari 5.1.5. I don't know how it works with older versions:
When "highlighting each item on a page" (see answer by graphicdivine) is disabled, you can use that function by pressing Option(alt) + tab.
If you don't (and the option is disabled), Safari will by default tab through all form-fields (like input, textarea, select...). For this fields, it will also accept/regard a tabindex. It will first tab through all form elements with a tabindex (in the order of the given indices) and then through the rest of the form elements in the order of their definition in HTML.
So if you define a tabindex="1" (or 1001) and "3" (or 1003) for two input-elements Safari will first focus this fields and then the others.
For those like me also looking how to enable this in browserstack: simply click the word "Safari" in the top left button of the screen, then you can select Preferences > Advanced > Press tab (as mentioned in https://stackoverflow.com/a/1914496/11339541)
Encountered the same issue and had to implement tab navigation programatically. Luckily found this jquery tabbable plugin https://github.com/marklagendijk/jQuery.tabbable and put it to good use, here's
require('../../node_modules/jquery.tabbable/jquery.tabbable');
$(document).ready(() => {
$(document).keydown((event) => {
if (event.keyCode === 9) {
window.$.tabNext();
event.preventDefault();
}
});
});