Cannot get Mobile version of website to render in WebdriverIO

Question

I am trying to get the Mobile version of my web page to render in WebdriverIO, but instead, the desktop version is loaded.

I have used the following statement in the test script: browser.setWindowSize(width, height);. The browser opens with the given width and height, but the desktop web page is loaded instead mobile web page

I have used the below statement in test script browser.setWindowSize(411, 823);

❯ Expected results: Mobile version of the website should be rendered

❯ Actual results: Desktop version of the website is rendered

Answer 1

So, from what I understand, you want to run mobile tests and you assumed that by resizing the browser window, it will somehow trigger the mobile view?! That's not how it works.

I see two straightforward approaches:

1. We emulate the mobiles device in Chrome. We manage this by enabling the Mobile Emulation feature via Chrome DevTools. You will have to specify a custom user-agent & the device type in your chromeOptions via the mobileEmulation property:

---

❒ 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'
        ]
    }
}],

This will create a mobile emulation in your Chrome instance, enabling the mobile logic to take effect. Then, you can proceed with your mobile-specific checks.

!Notes:

• if you're running wdio-v5 (WebdriverIOv5) => add your Chrome options inside the goog:chromeOptions object
• if you're running wdio-v4 (WebdriverIOv4) => add your Chrome options inside the chromeOptions object
• deviceName examples: 'iPhone 7', 'iPhone X', 'iPad Mini', 'Galaxy S5', etc.
• you can find a complete list of user-agents here (Chrome), or here (Firefox)

---

2. We use Appium to simulate our mobile devices. We will have to install the @wdio/appium-service WebdriverIO plugin.

If you haven't worked with Appium before, then THIS is a really nice WebdriverIO/Appium boilerplate project, so you don't have to start from scratch.