Skip to main content
Cypress应用

get

通过选择器或别名获取一个或多个DOM元素。

info

该命令的查询行为类似于jQuery中的$(...)工作原理。

语法​

cy.get(selector)
cy.get(alias)
cy.get(selector, options)
cy.get(alias, options)

用法​

正确用法

cy.get('.list > li') // 获取.list中的<li>元素

参数​

selector (字符串选择器)

用于过滤匹配DOM元素的选择器。

alias (字符串)

使用.as()命令定义的别名，并通过@字符和别名名称引用。

你可以使用cy.get()获取基本类型、常规对象甚至DOM元素的别名。

当使用DOM元素的别名时，如果之前别名的DOM元素已失效，Cypress会重新查询DOM。

info
核心概念

你可以在我们的核心概念指南中阅读更多关于对象和元素别名的内容。

options (对象)

传入一个选项对象以更改cy.get()的默认行为。

选项默认值描述
logtrue在命令日志中显示该命令
timeoutdefaultCommandTimeout在超时前等待cy.get()解析的时间
withinSubjectnull在其中搜索子元素的元素。如果为null，则从根级DOM元素开始搜索
includeShadowDomincludeShadowDom配置选项值是否跨越shadow DOM边界并在返回结果中包含shadow DOM中的元素

生成结果 了解主题管理​

  • cy.get()返回找到的DOM元素或别名查找的结果。
  • cy.get()是一个查询命令，可以安全地链式调用其他命令。

示例​

选择器​

获取输入元素​

cy.get('input').should('be.disabled')

查找ul内的第一个li后代元素​

cy.get('ul li:first').should('have.class', 'active')

查找下拉菜单并点击它​

cy.get('.dropdown-menu').click()

查找5个具有指定data属性的元素​

cy.get('[data-test-id="test-example"]').should('have.length', 5)

查找href属性包含"questions"的链接并点击它​

cy.get('a[href*="questions"]').click()

查找id以"local-"开头的元素​

cy.get('[id^=local-]')

查找id以"-remote"结尾的元素​

cy.get('[id$=-remote]')

查找id以"local-"开头且以"-remote"结尾的元素​

cy.get('[id^=local-][id$=-remote]')

查找id包含CSS特殊字符如".", ":"的元素​

cy.get('#id\\.\\.\\.1234') // 使用\\转义字符

在.within()命令中使用cy.get()​

由于cy.get()是从cy链式调用的，它总是在整个document中查找选择器。唯一的例外是在.within()命令内部使用时。

cy.get('form').within(() => {
  cy.get('input').type('Pamela') // 仅获取表单内的输入框
  cy.get('textarea').type('is a developer') // 仅获取表单内的文本域
})

Get与Find的区别​

cy.get命令总是从cy.root元素开始搜索。在大多数情况下，这是document元素，除非在.within()命令内部使用。.find命令则从当前主题开始搜索。

<div class="test-title">cy.get vs .find</div>
<section id="comparison">
  <div class="feature">两者都是查询命令</div>
</section>
cy.get('#comparison')
  .get('div')
  // 会找到#comparison外部的div.test-title
  // 和内部的div.feature
  .should('have.class', 'test-title')
  .and('have.class', 'feature')
cy.get('#comparison')
  .find('div')
  // 搜索范围仅限于#comparison元素树
  // 所以只找到div.feature
  .should('have.length', 1)
  .and('have.class', 'feature')

别名​

关于别名的详细解释，请阅读更多关于别名的内容。

获取别名为'todos'的元素​

cy.get('ul#todos').as('todos')

//...进行一些操作...

//稍后获取todos
cy.get('@todos')

获取别名为'submitBtn'的元素​

beforeEach(() => {
  cy.get('button[type=submit]').as('submitBtn')
})

it('点击后禁用', () => {
  cy.get('@submitBtn').should('be.disabled')
})

获取别名为'users'的fixture数据​

beforeEach(() => {
  cy.fixture('users.json').as('users')
})

it('点击后禁用', () => {
  // 访问用户数组
  cy.get('@users').then((users) => {
    // 获取第一个用户
    const user = users[0]

    cy.get('header').contains(user.name)
  })
})

规则​

要求 了解命令链​

  • cy.get()需要链式调用一个返回DOM元素的命令。

断言 了解断言​

超时设置 了解超时机制​

  • cy.get()可能会因等待元素存在于DOM中而超时。
  • cy.get()可能会因等待添加的断言通过而超时。

命令日志​

获取输入框并断言其值

cy.get('input[name="firstName"]').should('have.value', 'Homer')

上述命令将在命令日志中显示为：

命令日志get

当点击命令日志中的get命令时，控制台会输出以下内容：

控制台日志get

历史​

版本变更
5.2.0添加了includeShadowDom选项。

另请参阅​

目录