Cypress: How to handle selectors with different names on mobile and desktop running on different viewports? - cypress

Question

I am new to Cypress 12.3 and trying to find out the best possible way to run my automation on different viewports. My website in some places uses different css selector on mobile e.g. on Search of a product, Later on checkout.
I was writing the code below where depending on the viewport size being mobile or desktop it will execute those steps. However in this process I realised that some steps would be repetitive in both if and else when the css selectors are same on mobile and desktop.
Please can some one assists in what is the best way to write the tests?
import AllowCookies from "../pagesObjects/components/AllowCookies"
import Header from "../pagesObjects/components/Header"
import PLPPage from "../pagesObjects/pages/PLPPage"
import BasePage from "../pagesObjects/pages/BasePage"
const sizes = [BasePage.setiPhoneViewport(),BasePage.setAndriodViewport(), BasePage.setTabletViewport(), [1280, 768]]
describe('Add random product to bag', () => {
let testData
beforeEach(() => {
cy.fixture('general').then(function (data) {
testData = data
cy.visit(data.baseURL + data.urlHomePath)
})
AllowCookies.clickOnAllowAll()
})
sizes.forEach((size) => {
it(` Add random products ${size} `, () => {
cy.currencyPopup()
if (Cypress._.isArray(size)) {
cy.viewport(size[0], size[1])
} else {
cy.viewport(size)
}
if (size === testData.sizeiPhone || size === testData.sizeAndroid || size === testData.sizeiPad) {
Header.searchMobile(testData.validSearchTxt)
PLPPage.clickARandomProduct()
}
else {
Header.search(testData.validSearchTxt)
PLPPage.clickARandomProduct()
}
})
})
})

Answer 1

Try adding "metadata" to the BasePage return values
// BasePage
setiPhoneViewport() {
return {
device: 'iphone-6',
isMobile: 'mobile'
}
}
// Test
if (Cypress._.isArray(size)) {
cy.viewport(size[0], size[1])
} else {
cy.viewport(size.device)
}
const search = size.isMobile ? Header.searchMobile : Header.search;
search(testData.validSearchTxt)
PLPPage.clickARandomProduct()
If you have a "custom" size that happens to be mobile,
const sizes = [
BasePage.setiPhoneViewport(),
BasePage.setAndriodViewport(),
BasePage.setTabletViewport(),
[1280, 768],
[320, 250], // is mobile
]
then include it in the expression
// Test
function getSearchMethod(size) {
return
}
if (Cypress._.isArray(size)) {
cy.viewport(size[0], size[1])
} else {
cy.viewport(size.device)
}
const search = size.isMobile || (Cypress._.isArray(size) && size[0] < 350) ?
Header.searchMobile : Header.search;
search(testData.validSearchTxt)
PLPPage.clickARandomProduct()