如何用Node.js模拟移动环境?

I want to simulate a mobile browser using Node.js, meaning that all mobile browser features should be available in the JavaScript side (on the client), even if they are mocked.

我想用节点来模拟一个移动浏览器。这意味着所有移动浏览器特性都应该在JavaScript端(在客户端)可用，即使它们被嘲笑。

The webpages should think that they are loaded in a mobile environment. For instance, if we have a webpage which says:

网页应该认为它们是在移动环境中加载的。例如，如果我们有一个网页说:

if ('ontouchstart' in window) {
  document.body.innerHTML = "Mobile";
} else {
  document.body.innerHTML = "Not mobile";
}

...then when the page is loaded in the simulation, the body content should be Mobile.

…然后，在模拟中加载页面时，主体内容应该是可移动的。

What's the right way to do that? I'd avoid simply using PhantomJS (or anything similar) and executing a script which will do:

正确的做法是什么?我不会简单地使用PhantomJS(或任何类似的东西)，然后执行一个脚本:

window.ontouchstart = function () {};

I was thinking to use JSDom, but it looks there's no easy way to just say mobile:true which would add all these properties.

我一直在考虑使用JSDom，但是似乎没有简单的方法可以直接说mobile:true，它将添加所有这些属性。

What's the best way to create a browser which would have these APIs exposed, simulating a mobile browser?

创建一个浏览器，让这些api公开，模拟移动浏览器，最好的方法是什么?

A better example

From the Node.js side I want to communicate with the browser emulation and get some results back. Let's assume we have an index.html page like this:

从节点。我想与浏览器仿真进行通信，并得到一些结果。假设我们有一个指数。html页面如下:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
    </head>
    <body>
        <script>
        if ('ontouchstart' in window && window.orientation) {
          document.body.innerHTML = "Mobile";
        } else {
          document.body.innerHTML = "Not mobile";
        }
        </script>
    </body>
</html>

Using node-horseman (which uses Phantomjs), we can do the following:

使用node-horseman(使用Phantomjs)，我们可以做以下事情:

const Horseman = require('node-horseman');
const horseman = new Horseman();

const iPhone6 = "Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A5376e Safari/8536.25";    

horseman
  .userAgent(iPhone6)
  .open('index.html')
  .evaluate(function () {
    return document.body.innerHTML;
  })
  .then(html => {
      console.log(html);
  })
  .evaluate(function () {
    return navigator.userAgent;
  })
  .then(ua => {
      console.log(ua);
  })
  .close();

This outputs Not mobile, while the user agent is the one I've provided (iPhone 6). Expected would be Mobile.

这个输出不是移动的，而用户代理是我提供的(iPhone 6)。

It simply shows that the window.orientation is not available, since it's not a mobile browser.

它只是显示窗口。定向是不可用的，因为它不是移动浏览器。

1 个解决方案

#1

As you mentioned Phantom and Horseman I believe you want a browser automation framework with mobile support. You can use selenium with chrome (ChromeDriver) instead of Phantom, and chrome supports mobile emulation.

正如你提到的Phantom和Horseman我相信你想要一个带有移动支持的浏览器自动化框架。您可以使用硒与铬(铬edriver)而不是幽灵，和铬支持移动仿真。

Here you can find selenium client for NodeJS: https://www.npmjs.com/package/selenium-webdriver chrome driver fo selenium: https://sites.google.com/a/chromium.org/chromedriver/

在这里，您可以找到NodeJS的selenium客户机:https://www.npmjs.com/package/selenium-webdriver fo selenium: https://sites.google.com/a/chromium.org/chromedriver/

Starting chrome in mobile emulation mode:

移动仿真模式启动chrome:

var webdriver = require('selenium-webdriver');
var capabilities = {
    browserName: 'chrome',
    chromeOptions: {
        mobileEmulation: {
            deviceName: 'Apple iPhone 6'
        }
    }
};

var driver = new webdriver
    .Builder()
    .withCapabilities(capabilities)
    .build();

Here you can find list of available devices: https://*.com/a/41104964/893432

在这里，您可以找到可用设备列表:https://*.com/a/41104964/893432

you can also define your custom device: https://sites.google.com/a/chromium.org/chromedriver/mobile-emulation

您还可以定义自定义设备:https://sites.google.com/a/chromium.org/chromedriver/mobile-emulation

if you want it headless the latest chrome build supports it: https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md

如果你想让它无头，最新的chrome版本支持它:https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md

You can also run your test on a real android device or emulator using selenium: https://sites.google.com/a/chromium.org/chromedriver/getting-started/getting-started---android

您还可以使用selenium在真正的android设备或模拟器上运行测试:https://sites.google.com/a/chromium.org/chromedriver/getting-started/gettingstarted - star-android

#1