赛普拉斯：如何处理在不同视口上运行的移动和桌面上具有不同名称的选择器？

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 eg 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()