如何通过JavaScript或jQuery为匹配指定CSS类的按钮设置聚焦

你在Cypress环境下可以直接用内置的API完成元素匹配+聚焦操作，不需要额外写复杂的JS/jQuery逻辑，两种常用实现方式如下： #

1. 直接使用Cypress选择器匹配目标类名，链式调用聚焦方法
   不需要在then回调里手动判断类名，直接用类选择器匹配元素，同时可附加可见性判断避免报错，代码如下：

it('Add new group', () => {
  cy.waitForInitLoad();
  // 匹配同时带有指定4个类名的#dxToolbarMenu元素，校验可见后触发聚焦
  cy.get('#dxToolbarMenu.dx-item.dx-menu-item.dx-menu-item-has-text.dx-menu-item-has-icon')
    .should('be.visible')
    .focus()
})

如果目标元素是#dxToolbarMenu的子元素，调整选择器为#dxToolbarMenu .dx-item.dx-menu-item.dx-menu-item-has-text.dx-menu-item-has-icon即可。

2. 沿用现有then回调逻辑，用jQuery触发聚焦
   如果需要保留你原有的类名校验逻辑，直接在回调里调用jQuery的focus()方法即可：

it('Add new group', () => {
  cy.waitForInitLoad();
  cy.get('#dxToolbarMenu').then(($el) => {
    expect($el[0].className).to.equal(
      'dx-item dx-menu-item dx-menu-item-has-text dx-menu-item-has-icon',
    )
    // 直接调用jQuery封装的focus方法触发聚焦
    $el.focus()
  })
})

注意事项 #

如果目标元素是默认不可聚焦的普通容器元素（比如div、span），需要先给元素添加tabindex属性才能正常触发聚焦，示例如下：

cy.get('目标选择器')
  .invoke('attr', 'tabindex', '-1')
  .focus()

网页原始CSS样式参考下图：

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