for循环中向iframe传入对象索引值时遇undefined错误的解决

问题原因 #

核心问题是**var的作用域特性**：var声明的变量是函数级作用域，循环会在所有Cypress异步命令执行前完成，此时i的值已经变成galleryItems。当后续异步回调触发时，访问galleryObj["Lightbox Text"][i]会超出数组索引范围，最终得到undefined。而固定索引（如[1]）能成功，是因为索引值固定，不受异步执行顺序的影响。

解决方案1：将var改为let #

let是块级作用域，每个循环迭代都会创建独立的i变量，保存当前迭代的索引值，异步回调能正确获取对应的值。修改后的代码如下：

for (let i=0 ; i<galleryItems; i++){
    cy.get(galleryPages.elements.addContent).last().click();
    cy.get(galleryPages.elements.galleryItems['staggeredGalleryImage']).click();
    cy.get(galleryPages.elements.galleryItems['thumbnailImage']).click();
    cy.get(galleryPages.elements.galleryItems['addThumbnailImage']).click();
    cy.wait(1000);
    cy.get(galleryPages.elements.galleryItems['txtSearch']).type(galleryObj['Thumbnail Image'][i])
    cy.get(".media-list-grid div[data-element='media-grid-item-0']").click();
    cy.get("umb-button[button-style='success'][label-key='buttons_select'][type='button']").click();
    cy.get(galleryPages.elements.galleryItems['txtLightboxTitle']).type(galleryObj["Lightbox Title"][i])
    cy.wait(1000);
    cy.log("DEBUG " + galleryObj["Lightbox Text"][i])
    cy.get(galleryPages.elements.galleryItems['txtLightboxText'])
      .should('be.visible')
      .then(() => {
          cy.get(galleryPages.elements.galleryItems['txtLightboxText']).then($iframe => {
              cy.wrap($iframe)
                .its('0.contentDocument.body')
                .should('be.visible')
                .then($body => {
                    cy.wrap($body).clear().type(galleryObj["Lightbox Text"][i]);
                });
          });
      });
}

解决方案2：使用Cypress的.each()遍历数组（更推荐） #

直接遍历目标数组，避免手动管理索引，同时更贴合Cypress的异步执行模式：

// 假设galleryObj下的几个数组长度一致，以Lightbox Text数组为准遍历
cy.wrap(galleryObj["Lightbox Text"]).each((text, index) => {
    cy.get(galleryPages.elements.addContent).last().click();
    cy.get(galleryPages.elements.galleryItems['staggeredGalleryImage']).click();
    cy.get(galleryPages.elements.galleryItems['thumbnailImage']).click();
    cy.get(galleryPages.elements.galleryItems['addThumbnailImage']).click();
    cy.wait(1000);
    cy.get(galleryPages.elements.galleryItems['txtSearch']).type(galleryObj['Thumbnail Image'][index])
    cy.get(".media-list-grid div[data-element='media-grid-item-0']").click();
    cy.get("umb-button[button-style='success'][label-key='buttons_select'][type='button']").click();
    cy.get(galleryPages.elements.galleryItems['txtLightboxTitle']).type(galleryObj["Lightbox Title"][index])
    cy.wait(1000);
    cy.log("DEBUG " + text)
    cy.get(galleryPages.elements.galleryItems['txtLightboxText'])
      .should('be.visible')
      .then(() => {
          cy.get(galleryPages.elements.galleryItems['txtLightboxText']).then($iframe => {
              cy.wrap($iframe)
                .its('0.contentDocument.body')
                .should('be.visible')
                .then($body => {
                    cy.wrap($body).clear().type(text);
                });
          });
      });
})

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