1

I want to run my browser tests against tablet versions of a release targeting iOS tablets-how can i script it in cypressio or is it possible in alternation web automation tools?

The objective to write one test for web browser and run in different devices

1
1

Yes, it is possible, you have approximately two options:

  1. set viewport
  2. use real devices with services like Browserstack. Browserstack provides documentation where they explain how to set up everything, you can read it here.

Which option you choose depends on your particular case.

how can i script it in cypress

The script itself has no differences from the one for a desktop browser, all it depends is how you run it, what your config is. Read those links I provided, you should get more idea about how to go about it.

alternation web automation tools

Those 1) and 2) options could be done in many different tools. Chrome and Chromium provide emulations you can use to run your scripts on different devices. It's easy to set up expecially in tools such as Puppeteer and Playwright.

1

You can set the viewport’s width and height globally by defining viewportWidth and viewportHeight or alternative function .viewport which supports below strings:

list of supported width and height of devices

Example:

Pre-requisite: -Install NodeJS version 8 or above along with JAVA in your laptop nodejs

Clone Repository: https://github.com/narayananpalani/cypress-test-techniques Github Repository

Install using commands below:

  • npm install
  • npm link
  • npm link cypress-cucumber-preprocessor
  • npm install through

Navigate to path: .cypress-test-techniques/tree/master/cypress/integration/features/homeOrangehrmCompatibilityTests.feature

Refer the feature files:

Feature: MouseEvents verification in various compatibility models of devices

Scenario: Mouseactions on Dashboard Tab Graph using iPhone6 Mobile
      Given I open OrangeHRM homepage
      When I SignIn as user
      When I see the page in iphone6 version
      When I perform move actions on dashboard graph
      Then text insights displayed below dashboard successfully

Scenario: Mouseactions on Dashboard Tab Graph using iPhonexr Mobile
      Given I open OrangeHRM homepage
      When I SignIn as user
      When I see the page in iphonexr version
      When I perform move actions on dashboard graph
      Then text insights displayed below dashboard successfully


Scenario: Mouseactions on Dashboard Tab Graph using macbook-15 device
      Given I open OrangeHRM homepage
      When I SignIn as user
      When I see the page in macbook-15 version
      When I perform move actions on dashboard graph
      Then text insights displayed below dashboard successfully 

Scenario: Mouseactions on Dashboard Tab Graph using iPad2 device
      Given I open OrangeHRM homepage
      When I SignIn as user
      When I see the page in iPad2 version
      When I perform move actions on dashboard graph
      Then text insights displayed below dashboard successfully

Refer the step definition:

When('I see the page in iPad2 version', () => {
  homeOrangehrmPage.viewPortipad2()
})

After building the project, it gets covered as below:

  viewPortipad2: function viewPortipad2() {
    cy.viewport('ipad-2');
  },

Note: Refer few other presets like ipad-2 available in full list of configurations given above.

Refer the function associated to it:

  viewPortipad2 () {
    cy.viewport('ipad-2')
  },

Reference Configurations and Demo:

https://engineers-hub.teachable.com/p/cypressio

https://docs.cypress.io/api/commands/viewport.html#Arguments

As you mentioned in the question, you can reuse the same tests used for web browser to run in different tablet,mobile versions by reusing the viewport function described in the sample code above.

Alternative: BrowserStack Image

Refer the code configuraiton at .cypress-test-techniques/blob/master/browserstack.json

{
    "auth": {
        "username": "xxxxxxxxxxxx",
        "access_key": "xxxxxxxxxxxxxx"
    },
    "browsers": [
        {
            "browser": "chrome",
            "os": "Windows 10",
            "versions": [
                "78",
                "77"
            ]
        }
    ],
    "run_settings": {
        "cypress_proj_dir": "./",
        "project_name": "cypress-test-techniques",
        "build_name": "silver-1059",
        "parallels": "5",
        "specs": ["./cypress/integration/features/*.*"],
        "npm_dependencies": {
            "mem": "^6.1.0",
            "minimist": "^1.2.5",
            "mochawesome-report-generator": "4.1.0",
            "npm-run-all": "4.1.2",
            "serve": "11.3.0",
            "through": "^2.3.8",
            "@typescript-eslint/eslint-plugin": "2.24.0",
            "@typescript-eslint/parser": "2.24.0",
            "allure-commandline": "2.0.0",
            "colon-names": "1.0.0",
            "cypress": "^4.4.1",
            "cypress-axe": "^0.8.1",
            "cypress-cucumber-preprocessor": "1.11.0",
            "cypress-file-upload": "^4.0.6",
            "cypress-image-snapshot": "3.1.1",
            "cypress-plugin-retries": "1.2.0",
            "cypress-plugin-tab": "^1.0.5",
            "cypress-visual-regression": "1.0.4",
            "cypress-xpath": "1.3.0",
            "eslint": "5.16.0",
            "eslint-plugin-cypress": "2.8.1",
            "eslint-plugin-cypress-dev": "2.1.0",
            "eslint-plugin-mocha": "5.3.0",
            "eslint-plugin-vue": "6.2.2",
            "mocha": "^5.2.0",
            "mocha-allure-reporter": "1.4.0",
            "mocha-gherkin": "0.2.0",
            "mochawesome": "^3.1.2",
            "mochawesome-merge": "^2.1.0",
            "start-server-and-test": "1.10.6",
            "stop-build": "1.1.0",
            "stop-only": "3.1.0",
            "typescript": "3.7.4",
            "yaml-lint": "1.2.4"  
        }      
    },
    "connection_settings": {
        "local": false,
        "local_identifier": null
    },
    "disable_usage_reporting": false
}

In thse configuration change OS, versions to match the tablet needs to run your tests.

For example:

var capabilities = {
"os_version" : "13",
"device" : "iPad 7th",
"browserstack.user" : "USERNAME",
"browserstack.key" : "ACCESS_KEY"
}

Full list of configuration can be updated based on the link below: https://www.browserstack.com/app-automate/capabilities

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.