专栏首页从零开始学自动化测试Cypress学习12-父子元素定位

Cypress学习12-父子元素定位

前言

先定位父元素,通过父元素定位子元素

.children()

通过父元素,定位子元素

<ol class="traversal-breadcrumb breadcrumb">
            <li><a href="#">Home</a></li>
            <li><a href="#">Library</a></li>
            <li class="active">Data</li>
          </ol>
cy.get('.traversal-breadcrumb')
  .children('.active')
  .should('contain', 'Data')

.closest()

要获取最近的祖先DOM元素,请使用.closest()命令。

<ul class="list-group">
            <li class="list-group-item">
              <span class="badge">14</span>
              Events
            </li>
            <li class="list-group-item">
              <span class="badge traversal-badge">54</span>
              Friends
            </li>
          </ul>
cy.get('.traversal-badge')
  .closest('ul')
  .should('have.class', 'list-group')

.eq()

要在特定索引处获取DOM元素,请使用.eq()命令

<ul class="traversal-list">
            <li>tabby</li>
            <li>siamese</li>
            <li>persian</li>
            <li>sphynx</li>
            <li>burmese</li>
          </ul>
cy.get('.traversal-list>li')
  .eq(1).should('contain', 'siamese')

.filter()

要获取与特定选择器匹配的DOM元素,请使用.filter()命令。

<ul class="traversal-nav nav nav-tabs">
            <li><a href="#">Home</a></li>
            <li class="active"><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
          </ul>
cy.get('.traversal-nav>li')
  .filter('.active').should('contain', 'About')

.find()

要获取选择器的子代DOM元素,通过父子关系层级定位

<ul class="pagination traversal-pagination">
              <li>
                <a href="#">
                  <span>«</span>
                </a>
              </li>
              <li><a href="#">1</a></li>
              <li><a href="#">2</a></li>
              <li><a href="#">3</a></li>
              <li><a href="#">4</a></li>
              <li><a href="#">5</a></li>
              <li>
                <a href="#">
                  <span>»</span>
                </a>
              </li>
            </ul>
cy.get('.traversal-pagination').find('li').find('a').should('have.length', 7)

.first()

要获取元素中的第一个DOM元素,请使用.first()命令。

<table class="table traversal-table">
            <thead>
              <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>Jane</td>
                <td>Lane</td>
              </tr>
              <tr>
                <td>2</td>
                <td>John</td>
                <td>Doe</td>
              </tr>
            </tbody>
          </table>
cy.get('.traversal-table td')
  .first().should('contain', '1')

.last()

要获取元素中的最后一个DOM元素,请使用.last()命令。

<div class="traversal-buttons">
            <a class="btn btn-default" href="#" role="button">Link</a>
            <button class="btn btn-default" type="submit">Button</button>
            <input class="btn btn-default" type="button" value="Input">
            <input class="btn btn-default" type="submit" value="Submit">
          </div>
cy.get('.traversal-buttons .btn')
  .last().should('contain', 'Submit')

.next()

要获取元素中的下一个同级DOM元素,请使用.next()命令。

cy.get('.traversal-ul')
  .contains('apples').next().should('contain', 'oranges')

.nextAll()

要获取元素中的所有下一个同级DOM元素,请使用.next all()命令。

cy.get('.traversal-next-all')
  .contains('oranges')
  .nextAll().should('have.length', 3)

.nextUntil()

若要在元素中获取所有下一个同级DOM元素,直到另一个元素,请使用.next until()命令。

cy.get('#veggies')
  .nextUntil('#nuts').should('have.length', 3)

.not()

要从元素集中删除DOM元素,请使用.not()命令。

cy.get('.traversal-disabled .btn')
  .not('[disabled]').should('not.contain', 'Disabled')

.parent()

要获取元素的父DOM元素,请使用.parent()命令。

cy.get('.traversal-mark')
  .parent().should('contain', 'Morbi leo risus')

.parents()

要获取元素的父DOM元素,请使用.parents()命令。

<blockquote>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <footer>Someone famous in <cite class="traversal-cite">Source Title</cite></footer>
          </blockquote>
cy.get('.traversal-cite')
  .parents().should('match', 'blockquote')

.parentsUntil()

若要在其他元素之前获取元素的父DOM元素,请使用.parents until()命令。

<ul class="nav clothes-nav">
            <li>
              <a href="#">Clothes</a>
              <ul class="menu">
                <li>
                  <a href="/shirts">Shirts</a>
                </li>
                <li class="active">
                  <a href="/pants">Pants</a>
                </li>
              </ul>
            </li>
          </ul>
cy.get('.clothes-nav')
  .find('.active')
  .parentsUntil('.clothes-nav')
  .should('have.length', 2)

.prev()

要在元素中获取上一个同级DOM元素,请使用.prev()命令。

<ul class="birds list-group">
            <li class="list-group-item">Cockatiels</li>
            <li class="list-group-item">Lorikeets</li>
            <li class="list-group-item active">Cockatoos</li>
            <li class="list-group-item">Conures</li>
            <li class="list-group-item">Eclectus</li>
          </ul>
cy.get('.birds').find('.active')
  .prev().should('contain', 'Lorikeets')

.prevAll()

若要获取元素中所有以前的同级DOM元素,请使用.prevAll()命令。

<ul class="fruits-list">
            <li>apples</li>
            <li>oranges</li>
            <li class="third">bananas</li>
            <li>pineapples</li>
            <li>grapes</li>
          </ul>
cy.get('.fruits-list').find('.third')
  .prevAll().should('have.length', 2)

.prevUntil()

若要在元素中获取所有以前的同级DOM元素,直到其他元素,请使用.prevUntil()命令。

cy.get('.foods-list').find('#nuts')
  .prevUntil('#veggies').should('have.length', 3)

.siblings()

要获取元素的所有同级DOM元素,请使用.sibles()命令。

<ul class="nav nav-pills traversal-pills">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Messages</a></li>
          </ul>
cy.get('.traversal-pills .active')
  .siblings().should('have.length', 2)

本文分享自微信公众号 - 从零开始学自动化测试(yoyoketang),作者:上海悠悠

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-05-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jenkins学习9-测试报告发邮件(Email Extension Plugin)

    前面已经实现在jenkins上展示html的测试报告,接下来只差最后一步,把报告发给你的领导,展示你的劳动成果了。

    上海-悠悠
  • python笔记2-冒泡排序

    前言 面试的时候经常有面试官喜欢问如何进行冒泡排序?这个问题相信能难倒一批英雄好汉,本篇就详细讲解如何用python进行冒泡排序。 一、基本原理 1.概念: 冒...

    上海-悠悠
  • docker学习6-docker-compose容器集群编排

    实际工作中我们部署一个应用,一般不仅仅只有一个容器,可能会涉及到多个,比如用到数据库,中间件MQ,web前端和后端服务,等多个容器。 我们如果一个个去启动应用,...

    上海-悠悠
  • Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示例

    本文实例讲述了Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作。分享给大家供大家参考,具体如下:

    砸漏
  • CSS基础--属性选择器、伪类选择器

    eadela
  • jQuery基础--选择器

    jQuery选择器是jQuery为我们提供的一组方法,让我们更加方便的获取到页面中的元素。注意:jQuery选择器返回的是jQuery对象。

    eadela
  • vue 的上拉加载,下拉刷新(基于better-scrol)

    我先吐槽下,这个vue 的上拉刷新前几次都是有现成的框架,来做的,这个better-scroll的我是真的一开始没有看懂,可能是自己太笨了吧,不过 写这个的真的...

    我乃小神神
  • 使用webpack打包js文件(隔行变色案例)

    Dream城堡
  • JS示例15-模运算应用(隔行变色)

    专注APP开发
  • 第21天:京东页面轮播图

    半指温柔乐

扫码关注云+社区

领取腾讯云代金券