Resolution of the screen is not setting properly - browser

I m trying to set my browser screen with resolution of (360,640) but when i m reading, it is changed in value and there is a difference in set values and get values
resolution(){
browser.manage().window().setSize(360,640);
browser.manage().window().getSize().then((getSize) => {
console.log('Value of Height', getSize.height);
console.log('Value of width', getSize.width);
});
}
NOTE :: tried with different resolution and their result as below:
1.Width :: 360 and Height :: 640
Result is coming as Width:: 516 and Height :: 640
2.Width ::768 and Height :: 1024
Result is coming as Width :: 768 and Height :: 788
Using Protractor Version :: Version 5.4.3
npm :: 6.14.5
Please help me out to solve this problem

Can you try setting the resolution on capabilities instead of creating a resolution function for it. Like this:
capabilities: {
'browserName': 'chrome',
chromeOptions: {
args: [ "--headless", "--disable-gpu", "--window-size=1440,960"]
},
}
Also alternately you can add the browser.window setSize inside your onPrepare function like this:
onPrepare: async() => {
browser.baseUrl = 'https://app.thegaas.com';
await browser.driver.manage().window().setPosition(0,0);
await browser.driver.manage().window().setSize(1440,960);
let getSize = await browser.driver.manage().window().getSize();
console.log('Value of Height', getSize.height);
console.log('Value of width', getSize.width);
}
You can remove the async await and resolve the promises using .then instead.

Related

Why would a function called from another not show in the profile output of a node app?

I have a NodeJS program. This is a trimmed down version of a much larger program with a lot of complexity that's irrelevant to this question removed. It goes through lists looking for matching objects:
/**
* Checks that the given attributes are defined in the given dictionaries
* and have the same value
*/
function areDefinedAndEqual(a, b, keys) {
return (
a &&
b &&
keys
.map(function (k) {
return a[k] && b[k] && a[k] === b[k]
})
.reduce(function (a, b) {
return a && b
}, true)
)
}
function calculateOrder() {
const matchingRules = [
{
desc: 'stuff, more stuff and different stuff',
find: (po, dp) => areDefinedAndEqual(po, dp, ['stuff', 'more_stuff', 'different_stuff'])
},
{
desc: 'stuff and different stuff',
find: (po, dp) => areDefinedAndEqual(po, dp, ['stuff', 'different_stuff'])
},
{
desc: 'just stuff',
find: (po, dp) => areDefinedAndEqual(po, dp, ['stuff'])
}
]
let listOfStuff = []
listOfStuff[999] = { stuff: 'Hello' }
listOfStuff[9999] = { stuff: 'World' }
listOfStuff[99999] = { stuff: 'Hello World' }
// Run through lots of objects running through different rules to
// find things that look similar to what we're searching for
for (let i = 0; i < 100000000; i++) {
for (let j = 0; j < matchingRules.length; j++) {
if (matchingRules[j].find({ stuff: 'Hello World' }, listOfStuff[i])) {
console.log(`Found match at position ${i} on ${matchingRules[j].desc}`)
}
}
}
}
calculateOrder()
Now all calculateOrder does is repeatedly call functions listed under matchingRules which in turn call areDefinedAndEqual which does some actual checking.
Now if I run this as follows:
richard#sophia:~/cc/sheetbuilder (main) $ node --prof fred.js
Found match at position 99999 on just stuff
richard#sophia:~/cc/sheetbuilder (main) $
I get just what I'd expect. So far so good.
I can then run the profile output through prof-process to get something more readable.
node --prof-process isolate-0x57087f0-56563-v8.log
However if I look at the output, I see this:
[JavaScript]:
ticks total nonlib name
4197 46.0% 89.0% LazyCompile: *calculateOrder /home/richard/cogcred/eng-data_pipeline_misc/sheetbuilder/fred.js:19:24
All the time is being spent in calculateOrder. I'd expect to see a large %age of the time spent in the various "find" functions and in areDefinedAndEqual but I don't. There's no mention of any of them at all. Why? Are they potentially being optimized out / inlined in some way? If so, how do I begin to debug that? Or is there some restrictions on certain functions not showing in the output? In which case, where are those retrictions defined? Any pointers would be much appreciated.
I'm running Node v16.5.0
Functions show up in the profile when tick samples have been collected for them. Since sample-based profiling is a statistical affair, it could happen that a very short-running function just wasn't sampled.
In the case at hand, inlining is the more likely answer. Running node with --trace-turbo-inlining spits out a bunch of information about inlining decisions.
If I run the example you posted, I see areDefinedEqual getting inlined into find, and accordingly find (and calculateOrder) are showing up high on the profile. Looking closely, in the particular run I profiled, areDefinedEqual was caught by a single profiler tick -- before it got inlined.

PhaserJS: After Rotation of camera dragging a Sprite gives strange coords

Basically the problem is that after you rotate the camera, the points that are given as arguments in the callback for dragging are not what I expected. I'm guessing I have to Rotate the given points also but I just couldn't.
Can Someone explain what is going on, is this some kind of bug or what should I do in order the sprite to follow the mouse cursor?
Easiest way to explain the problem is to reproduce it:
1) Go to Phaser Example Runner
2) Copy- Paste this code:
var config = {
type: Phaser.WEBGL,
parent: 'phaser-example',
scene: {
preload: preload,
create: create
}
};
var game = new Phaser.Game(config);
function preload ()
{
this.load.image('eye', 'assets/pics/lance-overdose-loader-eye.png');
}
function create ()
{
var image = this.add.sprite(200, 300, 'eye').setInteractive();
this.cameras.main.setRotation(Math.PI);
image.on('pointerover', function () {
this.setTint(0x00ff00);
});
image.on('pointerout', function () {
this.clearTint();
});
this.input.setDraggable(image);
this.input.on('dragstart', function (pointer, gameObject) {
gameObject.setTint(0xff0000);
});
this.input.on('drag', function (pointer, gameObject, dragX, dragY) {
console.log(`x: ${dragX}, y: ${dragY}`);
gameObject.x = dragX;
gameObject.y = dragY;
});
this.input.on('dragend', function (pointer, gameObject) {
gameObject.clearTint();
});
}
3) Open the console, drag around the Eye and look at what coordinates are given.
4) If you remove line 24 (the rotation of the camera) Everything works as expected.
(The example is taken from Phaser 3 Official examples and a bit changed for the bug)
According to Phaser's API Documentation on the setRotation() method, the rotation given in radians applies to everything rendered by the camera. Unfortunately, your pointer isn't rendered by the camera so it doesn't get the same rotated coordinates. Not sure if this is a bug with the library or just a poorly documented exception, but I believe there is a workaround.
Create 2 variables to hold an initial position and a final position:
var image = this.add.sprite(200, 300, 'eye').setInteractive();
var initial = [];
var final = [];
Populate the initial position in your .on('dragstart') method:
this.input.on('dragstart', function (pointer, gameObject) {
initial = [
gameObject.x,
gameObject.y,
pointer.x,
pointer.y
];
gameObject.setTint(0xff0000);
});
Then, populate the final variable in your .on('drag') method:
this.input.on('drag', function (pointer, gameObject, dragX, dragY) {
final = [
gameObject.x, // not necessary but keeping for variable shape consistency
gameObject.y, // not necessary but keeping for variable shape consistency
pointer.x,
pointer.y
];
gameObject.x = initial[0] + (initial[2] - final[2]);
gameObject.y = initial[1] + (initial[3] - final[3]);
});
All we're doing here is keeping track of the change in pointer position and mimicking that change in our gameObject.

Is it possible to morph SVG's paths using Velocity.js?

Is it possible to morph SVG's paths using Velocity.js?
FROM
"M292,129c55.2,0,193,125.8,193,181S365.7,506,310.5,506S136,355.2,136,300S236.8,129,292,129z"
TO
"M230,38c55.2,0,348,57.8,348,113S391.2,569,336,569S55,456.2,55,401S174.8,38,230,38z"
var path = document.querySelectorAll('svg path');
Velocity(path[0], {
tween: 1000
}, {
duration: 6000,
easing: 'easeOutBounce',
progress: function (el, c, r, s, t) {
el[0].setAttribute('d', ??????);
}
});
EDIT: Please note I am the author of the code that enabled this in 2016, so it is the official supported way to do it!
Almost, should be something like this:
var path = document.querySelectorAll('svg path'),
from = "M292,129c55.2,0,193,125.8,193,181S365.7,506,310.5,506S136,355.2,136,300S236.8,129,292,129z",
to = "M230,38c55.2,0,348,57.8,348,113S391.2,569,336,569S55,456.2,55,401S174.8,38,230,38z";
Velocity(path[0], {
tween: [to, from]
}, {
duration: 6000,
easing: 'easeOutBounce',
progress: function(elements, complete, remaining, start, tweenValue) {
elements[0].setAttribute('d', tweenValue);
}
});
Edit: Velocity has some string animation support built in, see Rycochets answer below.
If not you could try doing that yourself, by breaking down the path string into an array.
One way could be to use the path data polyfill (as Chrome has deprecated that feature to give easy access to the array points) at polyfill. Then you could loop similar to below through the path points and interpolate.
You could also try using some regex to split and then build back up, a quick example could be something like the following. It's probably not complete (I haven't really tested the regex, and you may get varying number of elements if there are some characters that I haven't thought of).
$velocity=$("#mypath");
var fromPath = "M292,129c55.2,0,193,125.8,193,181S365.7,506,310.5,506S136,355.2,136,300S236.8,129,292,129z";
var toPath = "M230,38c55.2,0,348,57.8,348,113S391.2,569,336,569S55,456.2,55,401S174.8,38,230,38z";
var re = /(([+-]?[0-9\.]+)|[a-z]|\s+)([eE][-+]?[0-9]+)?/gi
var fromMatch = fromPath.match(re)
var toMatch = toPath.match(re)
$velocity.velocity(
{ opacity: 0.5, tween: [0,1] },
{ progress: function( el, complete, remaining, start, tweenValue) {
var interpPath = '';
for( c=0; c<fromMatch.length; c++) {
if( !isNaN( fromMatch[c]) ) {
interpPath += ( toMatch[c] - fromMatch[c] ) * tweenValue + +fromMatch[c]
} else {
interpPath += toMatch[c]
}
}
el[0].setAttribute('d', interpPath)
} }
)
jsfiddle

Create a file for each defined block with puppet

I have a running manifest, where I create a folder and a file from a setting (exerpt):
define ffnord::mesh(
$mesh_if_id = "low",
$mesh_mtu_low = 1280,
$fastd_low_port = 11280, # fastd port
) {
ffnord::fastd { "fastd_${mesh_code}":
mesh_if_id => $mesh_if_id,
mesh_mtu_low => $mesh_mtu_low,
fastd_low_port => $fastd_low_port,
}
}
and
define ffnord::fastd( $mesh_if_id
, $mesh_code
, $mesh_mtu_low = 1280
, $fastd_low_port
) {
file {
"/etc/fastd/${mesh_code}-mesh-low-vpn/":
ensure =>directory,
require => Package[ffnord::resources::fastd];
"/etc/fastd/${mesh_code}-mesh-low-vpn/fastd.conf":
ensure => file,
notify => Service[ffnord::resources::fastd],
content => template('ffnord/etc/fastd/fastd-low.conf.erb');
}
}
How can I define a variable amount of those configs:
$mesh_if_id = "low",
$mesh_mtu_low = 1280,
$fastd_low_port = 11280, # fastd port
$mesh_if_id = "something",
$mesh_mtu_low = 12345,
$fastd_low_port = 112345, # fastd port
...
and loop through those blocks to create a folder and file inside ffnord/etc/fastd/ for each block automatically?
(I want to solve this problem: https://github.com/ffnord/ffnord-puppet-gateway/pull/116#issuecomment-100619610 )
In Puppet 3.x there is no "looping", but there are a few tricks. You can pass a Hash of data that represents N number of ffnord::fastd instances:
define define ffnord::mesh($fastd_hash) {
create_resources('ffnord::fastd', $fastd_hash)
}
define ffnord::fastd($mesh_code, $fastd_low_port, $mesh_mtu_low = 1280) {
file {
"/etc/fastd/${mesh_code}-mesh-low-vpn/":
ensure =>directory,
require => Package[ffnord::resources::fastd];
"/etc/fastd/${mesh_code}-mesh-low-vpn/fastd.conf":
ensure => file,
notify => Service[ffnord::resources::fastd],
content => template('ffnord/etc/fastd/fastd-low.conf.erb');
}
}
$hash_of_fastds = {
"low_id" => {
mesh_code => 'low,
mesh_mtu_low => 1280,
fastd_low_port => 11280,
},
"some_id" => {
mesh_code => 'something',
mesh_mtu_low => 12345,
fastd_low_port => 112345,
},
}
ffnord::mesh { 'foo': fastd_hash => $hash_of_fastds, }
Note I've modified define ffnord::fastd slightly, where you had a $mesh_if_id parameter I've turned this into the $namevar of ffnord::fastd.
The first level of $hash_of_fastds translates to the names of the ffnord::fastd instances, the second level of the hash are the parameters for each ffnord::fastd.
See the documentation on the create_resources function for more information.
In Puppet 4 you could use the each function to achieve a similar result.

Set window width in jsDom?

Should be a simple question. How do I set the width in a jsDom object?
jsdom.env({
url:'http://testdatalocation',
scripts: ['http://code.jquery.com/jquery.js'],
done: function(errors, tstWindow) {
console.log(tstWindow.innerWidth);
};
}
});
I can't figure out how to get the "innerWidth" to be anything but 1024
The resizeTo and resizeBy methods are not implemented. You can see that by searching through the code base of jsdom:
$ grep -P 'resize(To|By)' `find . -type f`
./lib/jsdom/browser/index.js: resizeBy: NOT_IMPLEMENTED(null, 'window.resizeBy'),
./lib/jsdom/browser/index.js: resizeTo: NOT_IMPLEMENTED(null, 'window.resizeTo'),
If you just want to set the window size once and for all at initialization time, you could just set the innerWidth value to whatever you want. In a real browser, this is not the right way to do it, but in jsdom it would work.
However, if you have code that depends on resizeTo being present, you can add your own polyfill to the constructor that builds windows:
var jsdom = require("jsdom");
var document = jsdom.env({
html: "<html></html>",
done: function (error, w) {
console.log(w.innerWidth, w.innerHeight);
w.constructor.prototype.resizeTo = function (width, height) {
this.innerWidth = this.outerWidth = width;
this.innerHeight = this.outerHeight = height;
};
w.resizeTo(100, 200);
console.log(w.innerWidth, w.innerHeight);
}
});
This displays:
1024 768
100 200
The code above is for illustration purposes. I've not thought about all the ins and outs of writing a polyfill for resizeTo. resizeBy would be handled similarly but would add deltas to the size of the window.
There isn't currently a formal option or API for doing so.
The values of innerWidth and similar properties are simply set to literal values:
DOMWindow.prototype = createFrom(dom || null, {
// ...
name: 'nodejs',
innerWidth: 1024,
innerHeight: 768,
outerWidth: 1024,
outerHeight: 768,
// ...
});
Beyond test cases and documentation, outerWidth isn't referenced elsewhere else in jsdom, so you could probably assign a new value within the created event, updating outerWidth as well.
The primary use-case for created is to modify the window object (e.g. add new functions on built-in prototypes) before any scripts execute.
created: function (errors, tstWindow) {
tstWindow.outerWidth = tstWindow.innerWidth = 1440;
},
done: function(errors, tstWindow) {
console.log(tstWindow.innerWidth);
}

Resources