使用Cypress自动化Flipkart时动态元素加载异常问题求助

问题描述 #

我正尝试使用Cypress自动化Flipkart网站，操作流程为：进入首页后点击「Mobiles」，滚动至Apple Smartphones区域并点击「View All」。当我尝试访问元素#container ._1AtVbE时，DOM中显示包含Apple智能手机在内的30条结果，但Cypress运行器仅返回13条，页面未完全加载。只有手动滚动至页面底部，剩余项才会生成。

我尝试的代码 #

/// <reference types ="cypress"/>

describe('All login test', () =>{

    beforeEach( () =>{
        cy.visit('https://www.flipkart.com/')
    
    })

    it.only("simi", () => {

        cy.get('._1ch8e_').contains('Mobiles').click()
       cy.get('#container [class="_1AtVbE col-12-12').contains('Apple SmartPhones').find('div.Nyt1vx').scrollIntoView().find('._1xCO19')  
       
       ///cy.get('#container ._1AtVbE',{timeout:50000}).should('be.visible')
           
      
    })

})

问题原因 #

Flipkart的商品列表采用滚动懒加载机制：只有当元素进入浏览器视口时，页面才会请求数据并将元素渲染到DOM中。你当前的代码仅滚动到Apple区域，未触发底部的懒加载逻辑，因此只加载了初始的13条商品。

解决方案 #

需要模拟手动滚动到底部的操作，循环触发懒加载直到所有30条商品加载完成。以下是优化后的代码：

方案1：递归滚动（推荐，适配Cypress异步模型） #

/// <reference types="cypress"/>

describe('Flipkart Apple Mobiles Automation', () => {
    beforeEach(() => {
        cy.visit('https://www.flipkart.com/')
        // 关闭可能出现的登录弹窗
        cy.get('button._2KpZ6l._2doB4z').click({ force: true }).catch(() => {})
    })

    it('Load all Apple smartphones successfully', () => {
        // 点击Mobiles分类
        cy.get('._1ch8e_').contains('Mobiles').click()

        // 定位Apple区域并点击View All
        cy.contains('Apple SmartPhones')
          .parents('._1AtVbE.col-12-12')
          .find('._1xCO19') // View All按钮选择器
          .scrollIntoView({ offset: { top: 100 } }) // 偏移量避免被导航栏遮挡
          .click()

        // 递归滚动到底部，直到加载完30条商品
        const scrollUntilFullLoad = (targetCount) => {
            cy.get('#container ._1AtVbE').then(($items) => {
                if ($items.length < targetCount) {
                    cy.scrollTo('bottom', { duration: 1000 }) // 模拟平滑滚动
                    cy.wait(1200) // 等待新商品加载，可根据网络调整
                    scrollUntilFullLoad(targetCount)
                }
            })
        }

        // 调用滚动函数并验证数量
        scrollUntilFullLoad(30)
        cy.get('#container ._1AtVbE').should('have.length', 30)
    })
})

方案2：循环滚动（同步逻辑，需注意异步时机） #

/// <reference types="cypress"/>

describe('Flipkart Apple Mobiles Automation', () => {
    beforeEach(() => {
        cy.visit('https://www.flipkart.com/')
        cy.get('button._2KpZ6l._2doB4z').click({ force: true }).catch(() => {})
    })

    it('Load all Apple smartphones', () => {
        cy.get('._1ch8e_').contains('Mobiles').click()

        cy.contains('Apple SmartPhones')
          .parents('._1AtVbE.col-12-12')
          .find('._1xCO19')
          .scrollIntoView()
          .click()

        // 循环滚动直到元素数量达标
        cy.get('#container ._1AtVbE').then(($initialItems) => {
            let itemCount = $initialItems.length
            while (itemCount < 30) {
                cy.scrollTo('bottom', { duration: 1000 })
                cy.wait(1000)
                // 重新获取当前元素数量
                itemCount = Cypress.$('#container ._1AtVbE').length
            }
        })

        cy.get('#container ._1AtVbE').should('have.length', 30)
    })
})

关键优化点 #

• 登录弹窗处理：提前关闭首页可能出现的登录弹窗，避免阻塞后续操作
• 滚动偏移量：使用offset参数调整滚动位置，避免按钮被顶部导航栏遮挡
• 平滑滚动与等待：设置滚动时长和等待时间，模拟真实用户操作，给页面足够的加载时间
• 递归逻辑适配异步：推荐使用递归方案，更符合Cypress的异步执行特性，避免同步循环的潜在问题

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