Cypress如何实现下拉列表随机选择国家及对应所属州/区域

核心实现逻辑有两种，可根据自己的页面场景选择：

方案1：提前维护国家-区域映射表 #

适合页面区域选项是前端写死、不会动态变更的场景，执行效率更高。

• 不要单独存储国家数组，直接用对象结构存储国家和对应下辖区域的映射关系，避免国家数组和区域数据不同步：

// 注意：对象的key、数组内的区域值需要和页面下拉选项的value/显示文本完全一致
const countryRegionMap = {
  "印度": ["马哈拉施特拉邦", "泰米尔纳德邦", "卡纳塔克邦", "古吉拉特邦", "北方邦"],
  "中国": ["北京市", "上海市", "广东省", "浙江省"],
  "美国": ["加利福尼亚州", "纽约州", "德克萨斯州"]
  // 按页面实际选项补全其余国家数据即可
}

• 从映射表中提取国家列表，随机选择国家后操作下拉框选中：

// 提取所有国家选项
const countryList = Object.keys(countryRegionMap)
// 生成随机国家
const randomCountry = countryList[Math.floor(Math.random() * countryList.length)]
// 选中国家，选择器替换为你页面中国家下拉的实际定位，自定义下拉替换为点击展开+点选选项的逻辑即可
cy.get('#country-dropdown').select(randomCountry)

• 从映射表中取当前国家对应的区域列表，随机选择区域即可：

// 取当前选中国家的所有下辖区域
const matchedRegions = countryRegionMap[randomCountry]
// 生成随机区域
const randomRegion = matchedRegions[Math.floor(Math.random() * matchedRegions.length)]
// 选中区域，若选完国家有加载动画/接口请求，可加等待逻辑确保选项渲染完成
cy.get('#region-dropdown').should('be.enabled').select(randomRegion)

方案2：选完国家后动态抓取页面区域选项 #

适合区域选项是接口动态返回、不想手动维护映射表的场景，适配性更强。
不需要提前准备任何国家、区域的静态数据，选完随机国家后，直接从页面渲染完成的区域下拉中抓取所有有效选项，再随机选择即可，示例代码：

// 先获取国家下拉所有有效选项，随机选一个
cy.get('#country-dropdown option').then($countryOptions => {
  // 过滤掉"请选择国家"这类占位选项
  const countryList = Array.from($countryOptions)
    .map(opt => opt.value || opt.innerText.trim())
    .filter(val => val !== '' && val !== '请选择国家')
  
  const randomCountry = countryList[Math.floor(Math.random() * countryList.length)]
  cy.get('#country-dropdown').select(randomCountry)
})

// 若选国家后区域下拉走接口加载，可先拦截接口等加载完成，避免选到旧数据
cy.intercept('GET', '/api/get-region-list*').as('loadRegion')
cy.wait('@loadRegion')

// 抓取区域下拉所有有效选项，随机选一个
cy.get('#region-dropdown option').then($regionOptions => {
  const regionList = Array.from($regionOptions)
    .map(opt => opt.value || opt.innerText.trim())
    .filter(val => val !== '' && val !== '请选择州/区域')
  
  const randomRegion = regionList[Math.floor(Math.random() * regionList.length)]
  cy.get('#region-dropdown').select(randomRegion)
})

注意事项 #

• 如果页面用的是自定义下拉组件（非原生<select>标签），把代码里的.select()方法替换为对应组件的操作逻辑即可，一般是先点击下拉触发框展开选项，再通过文本定位到对应选项点击。
• 不要用硬编码的cy.wait(3000)这类固定等待，优先用接口拦截等待、或者选项可见断言的方式判断加载完成，稳定性更高。
• 随机选取时注意过滤掉下拉里的占位提示项（比如“请选择”“--”这类无业务含义的选项），避免选中无效值导致用例失败。

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