Chrome mobile emulation. Window size is different via Selenium and Devtools - selenium

Need to test web site responsibility.
Code example taken from here (in the bottom of page)
Faced, that selenium opens chrome window in different size/resolution, than i expect. Looks like that pixelRatio is not accepted or accepted incorrectly.
Also, faced, that in devtools, devices size from default device list is already divided on pixelRatio. e.g. Iphone 6 has 750 x 1334 and pixelRatio 2.0, but in devtools it is 375 x 667 which perfectly fits original resolution divided on pixelRatio. But if I manually add custom device 750 x 1334 with pixelRatio 2.0, it still shows me 750 x 1334
In source code Iphone 6 already defined with 'divided' size and pixelRatio 2.0
"title": "Apple iPhone 6",
"screen": {
"horizontal": {
"width": 667,
"height": 375
},
"device-pixel-ratio": 2,
"vertical": {
"width": 375,
"height": 667
}
Here is sample of my enum for mobile devices.
public enum ChromeMobileDevice {
IPHONE_8(1334, 750, 2.0, "Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.34 (KHTML, like Gecko) Version/11.0 Mobile/15A5341f Safari/604.1"),
IPHONE_XS_MAX(2688, 1242, 3.0, "Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/69.0.3497.105 Mobile/15E148 Safari/605.1"),
GALAXY_S8(2960, 1440, 4.0, "Mozilla/5.0 (Linux; Android 7.0; SM-G892A Build/NRD90M; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/60.0.3112.107 Mobile Safari/537.36"),
IPAD_MINI(2048, 1536, 2.0, "Mozilla/5.0 (iPad; CPU OS 12_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1"),
GALAXY_TAB_10_1(1920, 1200, 1.0, "Mozilla/5.0 (Linux; Android 8.1.0; SM-T580) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.157 Safari/537.36");
private int height;
private int width;
private double pixelRatio;
private String userAgent;
private boolean touch = false;
private ChromeMobileDevice(int height, int width, double pixelRatio, String userAgent) {
this.height = height;
this.width = width;
this.pixelRatio = pixelRatio;
this.userAgent = userAgent;
}
public static ChromeMobileDevice getByName(final String chromeMobileDeviceName) {
return Stream.of(ChromeMobileDevice.values()).filter(b -> b.name().equalsIgnoreCase(chromeMobileDeviceName)).findAny()
.orElseThrow(() -> new IllegalArgumentException(String.format("Unsupported chrome emulator name: %s", chromeMobileDeviceName)));
}
public HashMap<String, Object> getPortraitDeviceMetrics() {
return Maps.newHashMap(ImmutableMap.of(
"height", height,
"width", width,
"pixelRatio", pixelRatio,
"touch", touch));
}
public HashMap<String, Object> getLandscapeDeviceMetrics() {
return Maps.newHashMap(ImmutableMap.of(
"width", height,
"height", width,
"pixelRatio", pixelRatio,
"touch", touch));
}
}
UPD
Sample of chromedriver creation
ChromeOptions capabilities = new ChromeOptions();
capabilities.setCapability("chrome.switches", "disable-extensions");
capabilities.setCapability(SUPPORTS_JAVASCRIPT, true);
capabilities.addArguments("--hide-scrollbars");
capabilities.addArguments("--allow-running-insecure-content");
capabilities.addArguments("--start-maximized");
capabilities.addArguments("--disable-infobars");
Map<String, Object> mobileEmulation = new HashMap<>();
ChromeMobileDevice chromeMobileDevice = ChromeMobileDevice.getByName(chromeMobileEmulation.get());
mobileEmulation.put("userAgent", chromeMobileDevice.getUserAgent());
mobileEmulation.put("deviceMetrics", chromeMobileDevice.getPortraitDeviceMetrics());
capabilities.setExperimentalOption("mobileEmulation", mobileEmulation);
WebDriver driver = new ChromeDriver(capabilities );

Related

Make Selenide undetectable using firefox (Kotlin)

while trying to use Selenide with Firefox driver in order to pull data out of HTML its being detected by websites.
I've tried many things across the internet but still no luck.
This is my code so far:
companion object {
#JvmStatic
#BeforeAll
fun setUpAll() {
val options = FirefoxOptions()
val profile = options.profile
profile.setPreference("dom.webdriver.enabled", false)
profile.setPreference("useAutomationExtension", false)
profile.setPreference("general.useragent.override", "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:103.0) Gecko/20100101 Firefox/103.0")
options.addArguments("--disable-blink-features=AutomationControlled")
profile.setPreference("excludeSwitches", "enable-automation")
Configuration.browser = "firefox"
Configuration.browserSize = "1280x800"
Configuration.browserCapabilities = options
SelenideLogger.addListener("allure", AllureSelenide())
}
}
#BeforeEach
fun setUp() {
open("https://www.gmail.com/")
`$`(By.xpath("//input[#id='identifierId']")).setValue("someemail").pressEnter()
}
Please advice, thanks in advance

OpenLayers - No touch events on WebKit browsers

Unfortunately, the events do not work for some WebKit browsers on mobile devices.
There seems to be a problem with the touch-event.
OpenLayers versions: 6.4.3 and 6.5.0
Browsers it does not work with:
Miui Browser 71:
Mozilla/5.0 (Linux; U; Android 10; de-de; Redmi Note 8 Pro Build/QP1A.190711.020) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/71.0.3578.141 Mobile Safari/537.36 XiaoMi/MiuiBrowser/12.8.3-gn
Miui Browser 79:
Mozilla/5.0 (Linux; U; Android 10; de-de; Redmi Note 8 Pro Build/QP1A.190711.020) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/79.0.3945.147 Mobile Safari/537.36 XiaoMi/MiuiBrowser/12.10.8-gn
Safari 12:
Mozilla/5.0 (iPad; CPU OS 12_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.1.2 Mobile/15E148 Safari/604.1
You can try it on this website: https://wp-osm-plugin.hyumika.com/map-with-one-html-popup-marker-in-wordpress/ (you cannot click on the marker, drag or pinch)
With Chrome and Firefox it works, but with the WebKit browsers, I get no console output:
a_MapObj.on('singleclick', function(e) {
console.log('singleclick');
});
a_MapObj.on('click', function(e) {
console.log('click');
});
a_MapObj.on('dblclick', function(e) {
console.log('dblclick');
});
a_MapObj.on('error', function(e) {
console.log('error :' + e);
});
a_MapObj.on('moveend', function(e) {
console.log('moveend');
});
a_MapObj.on('movestart', function(e) {
console.log('movestart');
});
a_MapObj.on('pointermove', function(e) {
console.log('pointermove');
});
a_MapObj.on('pointerdrag', function(e) {
console.log('pointerdrag');
});
Could you please help me to fix this?
Thanks a lot & regards,
Mark

Getting a 403 Forbidden when going to a URL with PhantomJS

If I go to the following web page in Chrome, it loads fine: https://www.cruisemapper.com/?poi=39
However, when I run the following PhantomJS script, which simply goes to the same URL and outputs the entire DOM string to the console, I get a 403 Forbidden message:
var page = require('webpage').create(),
url = 'https://www.cruisemapper.com/?poi=39';
page.open(url, function (status) {
if (status === 'success') {
console.log(page.evaluate(function () {
return document.documentElement.outerHTML;
}));
phantom.exit();
}
});
Here's the exact output to the console:
<html><head>
<title>403 Forbidden</title>
</head><body>
<h1>Forbidden</h1>
<p>You don't have permission to access /
on this server.<br>
</p>
</body></html>
I thought that if I added some sort of user agent string, it might work. As such, I added the following above the console.log line:
page.settings.userAgent = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36';
But that didn't work. So then I tried the following instead:
page.customHeaders = {
'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36'
};
But that didn't work either. Does anyone have any advice on how I can possibly hit up the URL above and not get a 403 Forbidden message? Thank you.
Your code works for me fine (I's suggest viewport size emulation though, see code). If you still get a 403, try changing your IP, it's possible that the site is on to you now (you probably visited that page lots of times).
var page = require('webpage').create(),
url = 'https://www.cruisemapper.com/?poi=39';
page.settings.userAgent = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36';
page.viewportSize = { width: 1440, height: 900 }; // <-- otherwise it's 400x300 by default
// It's good to watch for errors on the page
page.onError = function (msg, trace)
{
console.log(msg);
trace.forEach(function(item) {
console.log(' ', item.file, ':', item.line);
})
}
page.open(url, function (status) {
console.log(status);
page.render("page.png"); // Also useful to check if you get what you expect
if (status === 'success') {
console.log(page.evaluate(function () {
return document.documentElement.outerHTML;
}));
phantom.exit();
}
});

CasperJS fetchText() function echoing blank output

I'm trying to use fetchText() to print out the URL of a google search result to the terminal. Here's the image of what exactly I'm trying to print.
It's only prints out blank though! I don't see anything I'm doing wrong?
Code:
phantom.casperPath = "/usr/local/Cellar/casperjs/1.0.3/libexec/";
phantom.injectJs(phantom.casperPath + '/bootstrap.js');
var utils = require('utils');
var casper = require('casper').create();
casper.start('https://www.google.com/search?q=amazon+shoes');
casper.wait(3000, function () {
this.echo(this.fetchText('#rso > div:nth-child(1) > li:nth-child(1) > div > div > div > div.f.kv._TD > cite'));
}).run();
Google will change the page depending on the useragent string. So you need to set a string during creation (with example string)
var casper = require("casper").create({
pageSettings: {
userAgent: "Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.131 Safari/537.36"
}
});
or with specific function
casper.userAgent("Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.131 Safari/537.36");
Sometimes it is also necessary to set the viewport to something desktop-like, because PhantomJS' default viewport is 400x300 and Google might render a different site based on the viewport.

In winston for Node.js is there a way to suppress log level from message?

I'm using winston to stream log messages from Express based on various comments elsewhere, my setup is essentially:
var express = require("express"),
winston = require("winston");
// enable web server logging; pipe those log messages through winston
var requestLogger = new (winston.Logger)(
{
transports: [
new (winston.transports.File)(
{
filename: "logs/request.log",
json: false,
timestamp: false
}
)
]
}
),
winstonStream = {
write: function(message, encoding) {
requestLogger.info(message.replace(/(\r?\n)$/, ''));
}
};
this.use(express.logger({stream: winstonStream}));
But I'd like a way to suppress the output of the log level because I know for this particular logger it will always be "info". So rather than:
info: 127.0.0.1 - - [Fri, 20 Sep 2013 13:48:02 GMT] "POST /v1/submission HTTP/1.1" 200 261 "http://localhost:8887/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.65 Safari/537.36"
I would get:
127.0.0.1 - - [Fri, 20 Sep 2013 13:48:02 GMT] "POST /v1/submission HTTP/1.1" 200 261 "http://localhost:8887/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.65 Safari/537.36"