求助：Cypress无法点击Highlight Options展开图标问题

问题说明 #

我已尝试所有可能的定位方式，所有元素均能被正确识别，但唯一的问题是无法点击Expand Icon。我未进行任何鼠标悬停操作，相关方法可参考配图。

PageElements.json 定位配置 #

{
  "HighlightOptionsIconLocaters": {
    "highlightOptionsIcon": "//*[@id='chase-metadata']/ul/li[3]/ul[1]/li/div[1]/div/figure",
    "highlightOptionsTooltip1": "//figure[@tooltip='Highlight Options']",
    "highlightOptionsTooltip": "//div[text()='Highlight Options']",
    "highlightOptionsExpanIcon": "//*[@id='document-toolbar']/ul[2]/li[5]/div/div/figure",
    "highlightOptionsExpanIcon_SVG": "//*[@id='document-toolbar']/ul[2]/li[5]/div/div/figure/svg",
    "highlightOptionsExpanIcon_class": "(//figure[contains(@class,'expand icon')])[1]",
    "highlightOptionsExpanIcon_css": "header#document-toolbar > ul:nth-of-type(2) > li:nth-of-type(5) > div > div > figure",
    "highlightOptionsExpanIcon_dataState": "(//div[@data-state='closed']//figure)[3]",
    "highlightOptionsExpanIcon_type": "(//div[@type='button']//figure)[3]",
    "highlightOptionsExpanIcon_parentClass": "//div[contains(@class,'component-menupopup highlights-menu')]//figure[1]",
    "highlightOptionsExpanIcon_tooltip": "//figure[@tooltip='Highlight Options']"
  }
}

已尝试的点击方法 #

方法1：多种定位器结合强制点击 #

// 验证点击高亮选项展开图标的方法
clickOnHighlightOptionsExpandIcon() {
    // 基于类的XPath示例
    cy.xpath(highlightOptionsPageLocators.HighlightOptionsIconLocaters.highlightOptionsExpanIcon_class)
        .eq(0) // 第一个元素用.eq(0)，第二个用.eq(1)以此类推
        .should('exist')
        .should('be.visible')
        .click({ force: true });    // 点击高亮选项展开图标

    // CSS选择器示例
    cy.get(highlightOptionsPageLocators.HighlightOptionsIconLocaters.highlightOptionsExpanIcon_css)
        .should('exist')
        .should('be.visible')
        .click({ force: true });

    // 使用data-state属性的XPath（第三个匹配的figure元素）
    cy.xpath(highlightOptionsPageLocators.HighlightOptionsIconLocaters.highlightOptionsExpanIcon_dataState)
        .should('exist')
        .should('be.visible')
        .scrollIntoView()
        .click({ force: true }); 

    // 使用type属性的XPath（第三个匹配的figure元素）
    cy.xpath(highlightOptionsPageLocators.HighlightOptionsIconLocaters.highlightOptionsExpanIcon_type)
        .should('exist')
        .should('be.visible')
        .scrollIntoView()
        .click({ force: true }); 

    // 使用父类的XPath（菜单弹窗内的第一个figure元素）
    cy.xpath(highlightOptionsPageLocators.HighlightOptionsIconLocaters.highlightOptionsExpanIcon_parentClass)
        .should('exist')
        .should('be.visible')
        .scrollIntoView()
        .click({ force: true }); 

    // 使用tooltip属性的XPath
    cy.xpath(highlightOptionsPageLocators.HighlightOptionsIconLocaters.highlightOptionsExpanIcon_tooltip)
        .should('exist')
        .should('be.visible')
        .scrollIntoView()
        .click({ force: true }); 

    // 直接组合XPath定位
    cy.xpath("//*[@id='document-toolbar']/ul[2]/li[5]//figure[contains(@class,'expand icon')]")
        .should('be.visible')
        .click({ force: true }); 

    // 遍历父元素尝试点击
    cy.get('div > .expand > svg')
        .parentsUntil('#document-toolbar')
        .each(($parent) => {
            cy.wrap($parent)
                .should('be.visible')
                .scrollIntoView()
                .click({ force: true });
        });

    // 直接定位SVG元素点击
    cy.get('#document-toolbar > ul:nth-of-type(2) > li:nth-of-type(5) > div > div > figure > svg')
        .should('exist')
        .should('be.visible')
        .click({ force: true }); // 点击高亮选项展开图标
}
// 结束clickOnHighlightOptionsExpandIcon方法

方法2：模拟鼠标按下+强制点击 #

// 验证点击高亮选项展开图标的方法
clickOnHighlightOptionsExpandIcon() {
    // 根据需要选择.eq(0)或.eq(1)定位目标图标
    cy.xpath("//figure[contains(@class,'expand icon')]")
        .eq(0) // 第一个元素用.eq(0)
        .should('exist')
        .should('be.visible')
        .scrollIntoView()
        .trigger('mousedown', { button: 0 }) // 模拟鼠标按下
        .click({ force: true, position: 'center' });
}

方法3：包裹元素后模拟鼠标按下+延迟点击 #

clickOnHighlightOptionsExpandIcon() {
    cy.xpath("//figure[contains(@class,'expand icon')]")
        .eq(0)
        .should('exist')
        .should('be.visible')
        .then($el => {
            cy.wrap($el)
                .trigger('mousedown', { button: 0, force: true })
                .wait(200) // 给UI响应时间
                .click({ force: true, position: 'center' });
        });
}

方法4：使用真实鼠标事件（注释未启用） #

/* clickOnHighlightOptionsExpandIcon() {
     cy.xpath("//figure[contains(@class,'expand icon')]")
         .eq(0)
         .should('exist')
         .should('be.visible')
         .realMouseDown()
         .wait(200)
         .realClick();
 }*/

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