module.exports = {
"resizeWindow" : function (browser) {
browser
.url("about:blank")
.waitForElementVisible("body", 1)
.resizeWindow(960, 600)
.execute(function(){
alert(document.body.clientWidth);
})
}
};
alert values:
internet explorer: 944
chrome: 944
firfefox: 946
It could at least all be the same
I also opened an issue on github: https://github.com/beatfactor/nightwatch/issues/377
any ideas ? :)
edit:
I found the problem is that selenium sets browser window width which unless maximized, has its frame and browser body width is always narrower than window width.
Any ideas how to set browser body width, not window width ?
If you know the difference between the window width and body width, you could write a custom command which takes the browser as an argument and resizes it based on the current browser environment.
I.e
exports.command = function() {
var browserName = this.options.desiredCapabilities.browserName;
if (browserName === 'firefox') {
this
.resizeWindow(974, 600)
}
// allows command to be chained
return this;
};
It's not the most elegant solution, but it should work. Add whatever other browsers you need, with the correct width + browserWidthOffset, and simply call it at the beginning of each test.
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 want to detect the location of elements on a page using Watir and PhantomJS.
My second approach using Capybara resulted in the same offset.
While the elements on the left side look good, the right side is misaligned:
I made the screenshot before and after I grab the positions for each element with element.wd.location, but the offset is always the same. I used evaluate_script and .getBoundingClientRect() with Capybara.
One thing looks suspicious to me: The search input field is not loaded correctly and not only shows a misalignment, but also a different size and the magnifying glass isn't shown. I don't know if this causes the offset.
I tested it with pure PhantomJS 2.1.1 (phantomjs file.js):
var fs = require('fs');
var page = require('webpage').create();
page.viewportSize = {
width: 1024,
height: 768
};
page.open('http://en.wikipedia.org/', function() {
var positions = page.evaluate(function() {
positions = [];
elements = document.getElementsByTagName('IMG');
for (var i=0, l=elements.length; i<l; i++) {
pos = elements[i].getBoundingClientRect();
positions.push(pos.left + ' ' + pos.top);
};
return positions;
});
fs.write('test.txt', positions.join("\r\n"), 'w');
page.render('test.png');
phantom.exit();
});
Same result: If you open the test.png, you see the an image on the right (left: 952px, top: 259px), but the test.txt shows it shifted to the left (left: 891px).
Do you know what could cause this problem?
Do you know what could cause this offset?
A bug in PhantomJS v2.1.1 or in the embedded Qt WebEngine.
Is there any workaround ?
No.
But I want it to work anyway, how?
Fix it yourself or hire someone to fix it or wait for it to be fixed.
Note that the issue no longer occurs in version 2.5, but it is still in beta :
https://github.com/ariya/phantomjs/milestone/16
https://bitbucket.org/ariya/phantomjs/downloads/
Here's a screenshot taken with phantomjs-2.5.0-beta :
This seems to be an issue in PhantomJS.
On the GitHub thread of the issue, #dantarion seems to have found a solution:
I am running this as well.
My fix is to run the following on the page in an evaluate block to force PhantomJS to render at the right height viewport. It works for my use case, and while I want to see it fixed in 2.2, since its still an issue I thought I'd post here.
document.getElementsByTagName("body")[0].style.overflow = "hidden";
document.getElementsByTagName("body")[0].style.height = "1080px";
document.getElementsByTagName("body")[0].style.maxHeight = "1080px";
document.getElementsByTagName("html")[0].style.overflow = "hidden";
document.getElementsByTagName("html")[0].style.height = "1080px";
document.getElementsByTagName("html")[0].style.maxHeight = "1080px";
It seems to be solving the problem. The only problem being that background-size: cover might still be off (as reported by #Luke-SF).
When we do a browser set size in protractor what exactly are we setting in the browser ->window - innerwidth and height, document width and height or something else?
I have a test where browser size should be 1366*768. But when I set the size to these values in Protractor, browser size launched is different than what is observed when done manually.
The values highlighted in the image below(shown using developer tool) works for me.
How do I set browser size so as to get browser window of this dimension?
Note - I do know how to set browser size in Protractor. Problem is that the size set does not match with required browser size, in this case 1366*768. Refer to image
You can use this for maximum width:
beforeEach(() => {
browser.manage().deleteAllCookies();
browser.driver.manage().window().maximize();
});
Also you can use this: for specific width:
var width = 1366;
var height = 768;
browser.driver.manage().window().setSize(width, height);
I've written a Chrome/Opera extension and am considering porting it to Safari. It needs 2 specific capabilities and the absence of either would veto the whole plan.
Ability to read HTTPS urls - Chrome supports this as part of the "tabs" permission. Firefox (last I checked) does not.
Ability to dynamically change the appearance of the activation button. - In Chrome, this is achieved by having a single canvas on the background page (i.e. the button)...
-body- -canvas id="button_canvas" width="19" height="19"- -/canvas- -/body-
... and then dynamically changing it whenever necessary ...
var canvas = document.getElementById("button_canvas");
var context = canvas.getContext("2d");
var imageData = context.getImageData(0, 0, 19, 19);
// write stuff to the canvas
context.putImageData(imageData, 0, 0);
imageData = context.getImageData(0, 0, 19, 19);
// key element below
chrome.browserAction.setIcon({
imageData: imageData
});
If anyone can answer these two questions definitively before I buy a used Mac on Craigslist, I'd appreciate it. Thanks!
p.s. FWIW, my own Googling suggests that #2 is not possible in Safari. No idea about #1.
I believe both are possible.
For HTTPS URLs: In the Safari extension builder, under Extension Website Access, set Access Level to All and tick the Include Secure Pages checkbox.
To dynamically change the icon displayed on a toolbar icon, first set any icon in the Safari extension builder. Then if you want to change in response to a toolbar button click:
safari.application.addEventListener('command', performCommand, false);
function performCommand(event) {
if (event.command === 'changeIcon') {
event.target.image = safari.extension.baseURI+'othericon.png';
}
}
Under other circumstances, you can iterate your toolbar buttons to modify the one you want:
var toolbarButtons = safari.extension.toolbarItems;
for (var i = 0; i < itemArray.length; ++i) {
var item = toolbarButtons[i];
if (item.identifier === "mybutton") {
item.image = safari.extension.baseURI+'othericon.png';
}
}
I'm creating a seemingly simple dojo 1.8 web page which contains an app layout div containing a tab container and an alarm panel below the tab container. They are separated by a splitter so the user can select how much of the alarms or the tabcontainer they want to see.
Here's the example on jsfiddle:
http://jsfiddle.net/bfW7u/
For the purpose of the demo, there's a timer which grows the table in the alarm panel by an entry every 2 seconds.
The problem(s):
If one doesn't do anything and just lets the table grow, no scroll bar appears in the alarm panel.
If one moves the splitter without having resized the browser window first, the splitter handle ends up in a weird location.
Resizing the browser window makes it behave like I would expect it to begin with.
Questions:
Am I doing something wrong in the way I'm setting things up and that's causing this problem?
How can I catch the splitter has been moved event (name?)
How do I resize the splitter pane to an arbitrary height? I've tried using domStyle.set("alarmPanel", "height", 300) and this indeed sets the height property... but the pane does not resize!
Any help greatly appreciated!
I forked your jsFiddle and made some modifications to it: http://jsfiddle.net/phusick/f7qL6/
Get rid of overflow: hidden in html, body and explicitly set height of alarmPanel:
.claro .demoLayout .edgePanel {
height: 150px;
}
This tricky one. You have two options: to listen to splitter's drag and drop or to listen to ContentPane.resize method invocation. Both via dojo/aspect:
// Drag and Drop
var splitter = registry.byId("appLayout").getSplitter("bottom");
var moveHandle = null;
aspect.after(splitter, "_startDrag", function() {
moveHandle = aspect.after(splitter.domNode, "onmousemove", function() {
var coords = {
x: !splitter.horizontal ? splitter.domNode.style.left : 0,
y: splitter.horizontal ? splitter.domNode.style.top : 0
}
dom.byId("dndOutput").textContent = JSON.stringify(coords);
})
});
aspect.after(splitter, "_stopDrag", function() {
moveHandle && moveHandle.remove();
});
// ContentPane.resize()
aspect.after(registry.byId("alarmPanel"), "resize", function(duno, size) {
dom.byId("resizeOutput").textContent = JSON.stringify(size);
});
Call layout() method after changing the size:
registry.byId("alarmPanel").domNode.style.height = "200px";
registry.byId("appLayout").layout();