OpenLayers - No touch events on WebKit browsers - webkit

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

Related

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

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 );

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();
}
});

Using Selenium with Phantomjs in node not returning results

I have the following node route using selenium and chrome driver which is working correctly and returning expected html in the console:
app.get('/google', function (req, res) {
var driver = new webdriver
.Builder()
.forBrowser('chrome')
.build();
driver.get('https://www.google.com')
driver
.manage()
.window()
.setSize(1200, 1024);
driver.wait(webdriver.until.elementLocated({xpath: '//*[#id="lst-ib"]'}));
return driver
.findElement({xpath: '//*[#id="lst-ib"]'})
.sendKeys('stackoverflow' + webdriver.Key.RETURN)
.then((html) => {
return driver
.findElement({xpath: '//*[#id="rso"]/div[1]/div/div/div/div'})
.getAttribute("innerHTML")
})
.then((result) => {
console.log(result)
})
.then(() => {
res
.status(200)
.send('ok')
});
I have also installed the phantom js driver and tested that its working by returning the URL title - it works. When I use the above exact route and replace the chrome with phantomjs I get no results returned. There are no errors - just no print out in my console. The status and result are never sent to the browser so it doesn't appear to be stepping through promise chain.
Any suggestions?
The issue was that there was different html being rendered depending on the user agent. By forcing a user agent I was able to retrieve the results i needed.
Here is the code snippet replaced above to get this working.
.Builder()
// .forBrowser('phantomjs')
.withCapabilities(webdriver.Capabilities.phantomjs()
.set("phantomjs.page.settings.userAgent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36"))
.build();

Mink + PhantomJS: How do I set the user agent?

I am using phantomjs with mink:
default:
extensions:
Behat\MinkExtension\Extension:
goutte: ~
selenium2:
browser: phantomjs
wd_host: http://localhost:8643/wd/hub
capabilities:
webStorageEnabled: true
But I need to masquerade as the latest chrome. I have tried this:
/**
* #BeforeStep
*/
public function masqueradeAsLatestChrome(StepEvent $event)
{
$this->getSession()->setRequestHeader('User-Agent', 'Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2049.0 Safari/537.36');
}
But I get the exception:
[Behat\Mink\Exception\UnsupportedDriverActionException]
Exception has been thrown in "beforeStep" hook, defined in FeatureContext::masqueradeAsLatestChrome()
Request header is not supported by Behat\Mink\Driver\Selenium2Driver
The version of chrome isn't critical but the web application must think its talking to a very recent version of chrome.
Selenium does not provide this capability, as it is not something a
user can do. It's recommended you use a proxy to inject additional
headers to the requests generated by the browser.
https://code.google.com/p/selenium/issues/detail?id=2047#c1
Sadly… However, the PhantomJS does provide an interface for setting the headers. Your best shot would be to send a direct command to it using it's REST API. There's also a cool PHP wrap library that would make it 200 times easier.
You should use the new Behat/Mink driver made by Juan Francisco Calderón Zumba
https://github.com/jcalderonzumba
Here is a direct link to the driver https://github.com/jcalderonzumba/MinkPhantomJSDriver
This driver allows you to specify the request headers that you need
(It works with Behat 3.0 but I think it requires at least PHP 5.4)
you can pass additional settings in selenium2driver via
extra_capabilities:
so in your case:
default:
extensions:
Behat\MinkExtension\Extension:
goutte: ~
selenium2:
browser: phantomjs
wd_host: http://localhost:8643/wd/hub
capabilities:
webStorageEnabled: true
extra_capabilities:
phantomjs.page.settings.userAgent: "Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2049.0 Safari/537.36"
For https://github.com/facebook/php-webdriver you can use this case:
$capabilities = [
WebDriverCapabilityType::BROWSER_NAME => 'phantomjs',
WebDriverCapabilityType::PLATFORM => 'ANY',
WebDriverCapabilityType::ACCEPT_SSL_CERTS => false,
WebDriverCapabilityType::JAVASCRIPT_ENABLED => true,
'phantomjs.page.settings.userAgent' => "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.246",
];

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.