Mobile web API showcase

mobileWebAPIExamples.md

Examples

via Configuration

The examples use @applitools/eyes-selenium but are relevant also for webdriver.io and protractor SDK's.

using single iOS device via addBrowser

const {IosDeviceName, ScreenOrientation} = require('@applitools/eyes-selenium')
// ...
configuration.addBrowser({
  iosDeviceInfo: {
    deviceName: IosDeviceName.iPhone_11,
    screenOrientation: ScreenOrientation.LANDSCAPE,
  },
})

multiple devices via addBrowsers

const {IosDeviceName, ScreenOrientation} = require('@applitools/eyes-selenium')
// ...
configuration.addBrowsers(
    {
      iosDeviceInfo: {
        deviceName: IosDeviceName.iPhone_11,
        screenOrientation: ScreenOrientation.LANDSCAPE,
      },
    },
    {
      iosDeviceInfo: {
        deviceName: IosDeviceName.iPhone_7,
        screenOrientation: ScreenOrientation.PORTRAIT,
      },
    },
  )

chrome emulation - existing

const {ScreenOrientation, DeviceName} = require('@applitools/eyes-selenium')
// ...
configuration.addBrowser({
    deviceName: DeviceName.iPhone_XS,
    screenOrientation: ScreenOrientation.PORTRAIT,
  })

chrome emulation - new (like iosDeviceInfo)

const {ScreenOrientation, DeviceName} = require('@applitools/eyes-selenium')
// ...
configuration.addBrowser({
      chromeEmulationInfo: {
        deviceName: DeviceName.iPhone_6_7_8,
        screenOrientation: ScreenOrientation.PORTRAIT,
      },
    })

desktop - existing

const {BrowserType} = require('@applitools/eyes-selenium')
// ...
configuration.addBrowser({
  name: BrowserType.EDGE_CHROMIUM_TWO_VERSIONS_BACK,
  width: 768,
  height: 1024,
})

via Cypress cy

cy.eyesOpen({
      appName: 'Play Cypress',
      browser: [
        // Desktop
        {
          name: 'edgechromium-two-versions-back',
          width: 768,
          height: 1024,
        },
        // Device emulation
        {
          deviceName: 'iPhone X',
          screenOrientation: 'landscape',
        },
        // Mobile Web API
        {
          iosDeviceInfo: {
            deviceName: 'iPhone XR',
            screenOrientation: 'landscape',
          },
        },
      ],
    });
    
    // Or one browser only method
    cy.eyesOpen({
      appName: 'Play Cypress',
      browser: {
          iosDeviceInfo: {
            deviceName: 'iPhone XR',
            screenOrientation: 'landscape',
          },
        },
    });

via Storybook applitools.config.js

module.exports = {
  browser: [
        // Desktop
        {
          name: 'edgechromium-two-versions-back',
          width: 768,
          height: 1024,
        },
        // Device emulation
        {
          deviceName: 'iPhone X',
          screenOrientation: 'landscape',
        },
        // Mobile Web API
        {
          iosDeviceInfo: {
            deviceName: 'iPhone XR',
            screenOrientation: 'landscape',
          },
        },
      ],
}

via Testcafe (VG) open

await eyes.open({
      appName: 'Hello World!',
      testName: 'My first JavaScript test!',
      t,
      browser: [
        // Desktop
        {
          name: 'edgechromium-two-versions-back',
          width: 768,
          height: 1024,
        },
        // Device emulation
        {
          deviceName: 'iPhone X',
          screenOrientation: 'landscape',
        },
        // Mobile Web API
        {
          iosDeviceInfo: {
            deviceName: 'iPhone XR',
            screenOrientation: 'landscape',
          },
        },
      ],
  });