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
Yes, it is possible, you have approximately two options:
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.
You can set the viewport’s width and height globally by defining viewportWidth and viewportHeight or alternative function .viewport which supports below strings:
Example:
Pre-requisite:
-Install NodeJS version 8 or above along with JAVA in your laptop
Clone Repository:
https://github.com/narayananpalani/cypress-test-techniques
Install using commands below:
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:
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