Cypress多视口测试优化：移动端与桌面端选择器差异化处理方案

核心优化思路 #

• 把视口判断逻辑从测试用例移到Page Object中，让测试用例更简洁
• 提取重复执行的步骤，避免代码冗余
• 简化视口设置的逻辑

具体优化步骤 #

1. 改造Header组件的Page Object，添加通用搜索方法 #

在Header.js里新增一个自动适配视口的universalSearch方法，内部判断当前视口类型，调用对应的选择器：

class Header {
  // 原有的移动端搜索方法
  searchMobile(searchText) {
    cy.get('[data-testid="mobile-search-input"]').type(searchText).type('{enter}')
  }

  // 原有的桌面端搜索方法
  search(searchText) {
    cy.get('[data-testid="desktop-search-input"]').type(searchText).type('{enter}')
  }

  // 新增通用搜索方法，自动适配视口
  universalSearch(searchText) {
    cy.viewport().then(viewport => {
      // 可根据项目实际情况调整移动端宽度阈值
      if (viewport.width < 768) {
        this.searchMobile(searchText)
      } else {
        this.search(searchText)
      }
    })
  }
}

export default new Header()

2. 简化视口设置逻辑 #

Cypress 12+版本中，cy.viewport()支持直接传入字符串（预设设备名）或数组（宽高），无需额外判断类型：

// 直接传入视口参数即可，Cypress会自动处理
cy.viewport(viewport)

3. 优化测试用例，去除冗余代码 #

改造后的测试用例无需再写if-else分支，直接调用通用方法，重复步骤统一提取：

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 viewports = [
  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()
    })

    viewports.forEach((viewport) => {
        it(`Add random products - ${viewport}`, () => {
            cy.currencyPopup()
            // 直接设置视口
            cy.viewport(viewport)
            // 调用通用搜索方法，自动适配视口
            Header.universalSearch(testData.validSearchTxt)
            // 提取重复步骤，统一执行
            PLPPage.clickARandomProduct()
        })
    })
})

4. 进阶优化：统一管理视口分界规则 #

可以在BasePage中定义视口分界常量，让整个项目的判断逻辑统一：

class BasePage {
  static MOBILE_BREAKPOINT = 768

  static setiPhoneViewport() {
    return 'iphone-6'
  }

  static setAndriodViewport() {
    return 'galaxy-s5'
  }

  static setTabletViewport() {
    return 'ipad-2'
  }

  // 判断当前是否为移动端视口
  static isMobileViewport() {
    return cy.viewport().then(viewport => viewport.width < this.MOBILE_BREAKPOINT)
  }
}

export default BasePage

然后在Header的通用方法里调用这个统一判断：

universalSearch(searchText) {
  BasePage.isMobileViewport().then(isMobile => {
    if (isMobile) {
      this.searchMobile(searchText)
    } else {
      this.search(searchText)
    }
  })
}

额外建议 #

• 尽量避免在测试用例中写大量条件判断，把这类逻辑封装到Page Object或自定义命令中，保持测试用例的可读性
• 对于更复杂的多端页面结构差异，可以考虑拆分测试用例，但如果只是选择器差异，优先用通用方法适配
• 可以在cypress.config.js中配置常用视口预设，减少重复定义

内容的提问来源于stack exchange，提问作者Tina