如何使用Cypress获取并验证元素onclick事件的文本内容？

目标HTML代码：

<li class="test">
    <a href="javascript:void(0);" onclick="getVal('101')"></a>
</li>

需求：验证上述a标签的onclick事件文本是否为getVal('101')，此前尝试两种写法均失败：

第一种失败写法：

cy.get('li.test').each(($el, index) => {
    cy.wrap($el)
    .its('onclick')
    .then(content => {
        console.log(content);
    });
});

第二种失败写法：

cy.get('li.test').each(($el, index) => {
    cy.wrap($el)
    .invoke('attr', 'onclick')
    .then((onclick) => {
        console.log(onclick);
    });
});

问题原因 #

两种写法都错误地针对li.test元素操作，但onclick属性实际存在于它的子元素<a>标签上，自然无法获取到目标属性值。

正确解法 #

直接定位到<a>标签再获取onclick属性即可，以下是两种可行写法：

1. 直接定位并断言

cy.get('li.test a')
  .invoke('attr', 'onclick')
  .should('eq', "getVal('101')");

2. 遍历多个li.test元素时的写法

cy.get('li.test').each(($li) => {
  cy.wrap($li).find('a')
    .invoke('attr', 'onclick')
    .then((onclickText) => {
      console.log(onclickText);
      expect(onclickText).to.eq("getVal('101')");
    });
});

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