无法让移动版网站在 WebdriverIO 中呈现

Question

我正在尝试让我的网页的移动版本在 WebdriverIO 中呈现，但加载的是桌面版本。

我在测试脚本中使用了以下语句：browser.setWindowSize(width, height);。浏览器以给定的 width 和 height 打开，但加载的是桌面网页而不是移动网页

我在测试脚本中使用了以下语句 browser.setWindowSize(411, 823);

❯ 预期结果： 应呈现移动版网站

❯实际结果：桌面版网站呈现

Answer 1

因此，据我了解，您想运行移动测试并且您假设通过调整浏览器 window 大小，它会以某种方式触发移动视图？！它不是这样工作的。

我看到两种直接的方法：

1. 我们在Chrome 中模拟移动设备。我们通过 Chrome DevTools 启用 Mobile Emulation 功能来管理这一点。您将必须指定 自定义 user-agent & 设备类型 在你的 chromeOptions 通过 mobileEmulation 属性:

❒ wdio.conf.js:

capabilities: [{
    maxInstances: 1,
    //
    browserName: 'chrome',
    chromeOptions: {
        mobileEmulation: {'deviceName': 'Nexus 5'},
        args: [ '--no-sandbox',
                '--disable-gpu',
                '--start-fullscreen',
                '--disable-notifications',
                //
                '--user-agent=Mozilla/5.0 (Windows NT 10.0; Win64; x64)
                 AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36'
        ]
    }
}],

这将在您的 Chrome 实例中创建移动仿真，使移动逻辑生效。然后，您可以继续进行 mobile-specific 检查。

!备注:

如果你运行ning wdio-v5 (WebdriverIOv5) => 在 goog:chromeOptions 中添加你的 Chrome 选项对象
如果你运行ning wdio-v4 (WebdriverIOv4) => 在 chromeOptions 中添加你的 Chrome 选项对象
deviceName 示例：'iPhone 7'、'iPhone X'、'iPad Mini'、'Galaxy S5' 等
您可以找到 user-agents here (Chrome), or here (Firefox)

2. 我们使用 Appium 来模拟我们的移动设备。我们必须安装 @wdio/appium-service WebdriverIO 插件。

如果您之前没有使用过 Appium，那么 THIS 是一个非常好的 WebdriverIO/Appium 样板项目，所以你不需要必须从头开始。

无法让移动版网站在 WebdriverIO 中呈现

Cannot get Mobile version of website to render in WebdriverIO

selenium

selenium-webdriver

selenium-chromedriver

appium

webdriver-io