// id
cy.get('#main').click();

// class
cy.get('.btn').click();

// attributes
cy.get('button[id="main"]').click();

// :nth-child(n) 选择器
cy.get('li:nth-child(1)').click();

// Cypress.$ = jQuery
Cypress.$('#main');

// get
cy.get(seletor);

cy.get(alias); // 别名 将会在之后的章节介绍

// find
cy.get('ul').find('#main');

cy.find('#main'); // 错误，不能直接由 cy 调用

// contains 用来获取包含文本的DOM元素
.contains(selector, content);
cy.contains('li', 'this is Cypress');

// children
cy.get('ul').children(); // 所有子元素

cy.get('ul').children('#main'); //指定子元素

cy.get('#main').parents(); // 获取所有父元素

cy.get('#main').parent(); // 获取向上一个级别的父元素

cy.get('#main').siblings(); // 获取所有同级元素

cy.get('ul').first(); // 匹配给定DOM对象集的第一个元素

cy.get('ul').last(); // 匹配给定DOM对象集的最后一个元素

cy.get('ul').next(); // 匹配给定DOM对象紧跟着的下一个同级元素

cy.get('ul').prev(); // 匹配给定DOM对象紧跟着的上一个同级元素

cy.get('ul').nextAll(); // 匹配给定DOM对象之后的所有同级元素

cy.get('ul').prevAll(); // 匹配给定DOM对象之前的所有同级元素

// .nextUntil(selector)
cy.get('ul').nextUntil('#main'); // 匹配给定DOM对象之后的所有同级元素知道遇上 Until 里定义的元素为止

cy.get('ul').prevUntil('#main'); // 匹配给定DOM对象之前的所有同级元素知道遇上 Until 里定义的元素为止

// .each() 用来遍历数组及其类似结构
cy.get('ul').each(($li) => {
  cy.log($li.text());
})

// .eq() 用来在元素或者数组中的特定索引处获取DOM元素
cy.get('ul').eq(0); // 获取ul的第一个子元素

cy.get('li').click();

// 强制单击 li 元素
cy.get('li').click({ force: true });

// 单击所有 li 元素
cy.get('li').click({ multiple: true });

// 针对具体位置单击 
// topRight/topLeft/top/left/center/right/bottom/bottomLeft/bottomRight
cy.get('li').click({ 'topRight' })

// 接受键值组合 例如 shift+click
// { release: false } 表明长按 shift 键
cy.get('body').type('{shift}', { release: false });
cy.get('li:first').click();

// 还支持 {alt} {ctrl}

// 双击某个元素
cy.get('li').dbclick();

// 带参数双击 与 click 参数一致
cy.get('li').dbclick(options);

// 在某个位置双击 与 click 一致
cy.get('li').dbclick(position);

// 右击某个元素
cy.get('li').rightclick();

// 带参数右击 与 click 参数一致
cy.get('li').rightclick(options);

// 在某个位置右击 与 click 一致
cy.get('li').rightclick(position);

// 语法
.type(text)
.type(text, options)

cy.get('input').type('Hello, World');

cy.get('input').type('{shift+alt+b}hello')

// 输入特定字符
cy.get('input').type('{{}'); // 输入{

cy.get('input').type('{backspace}'); // 删除光标左侧的字符

cy.get('input').type('{del}'); // 删除光标右侧的字符

cy.get('input').type('{end}'); // 把光标移到行尾

cy.get('input').type('{enter}'); // 按Enter键

cy.get('input').type('{esc}'); // 按ESC键

cy.get('input').type('{home}'); // 把光标移到行首

// 清除输入或文本区域的值
cy.get('input').clear();

// 针对单选框和复选框， 接受的值是 value 属性
cy.get('input[type="radio"]').check();

cy.get('input[type="radio"]').check('EN');

cy.get('input[type="radio"]').check(['EN', 'CN']);

cy.get('input[type="radio"]').uncheck();

cy.get('input[type="radio"]').uncheck('EN');

cy.get('input[type="radio"]').uncheck(['EN', 'CN']);

// 用来在 <select> 中选择一个 <option>
cy.get('select').select('javascript')
cy.get('select').select(['javascript', 'nodejs'])

// 用来在DOM元素上触发事件
cy.get('button').trigger('mousedown');
cy.get('button').trigger('mouseover');
cy.get('button').trigger('mouseleave');

cy.visit('https://www.baidu.com');

// 如果你的 BaseUrl 配置的为 http://wwww.hello.com
cy.visit('/about/api');
// 等同于方位 http://wwww.hello.com/about/api

cy.url();
// 断言
cy.url().should('contain', '/about/api');

// 刷新页面
cy.reload();

// 强刷
cy.reload(true);

cy.viewport(1200, 800);

// 后退
cy.go('back');
cy.go(-1);

// 前进
cy.go('forward');
cy.go(1);

cy.get('.check-box').should('be.visible')

// 判断元素存在
cy.get('.check-box').should('be.exist')

// 判断元素不存在
cy.get('.check-box').should('not.exist')

if (Cypress.$('#btn').length > 0) {
  cy.get('#btn').click();
}

cy.get('#btn').then(($btn) => {
  const btnTxt = $btn.text();
  cy.log(btnTxt);
})

cy.get('iframe')
  .then(($iframe) => {
    const $body = $iframe.contents().find('body')
    cy.wrap($body).find('#btn').click();
  })

// 强制单击 btn 元素，即使被覆盖
cy.get('#btn').click({ force: true})

// 确认提交按钮不在视图中
cy.get('#submit').should('not.be.visible');

// 滚动直到提交按钮出现在视图中
cy.get('#submit').scrollIntoView().should('be.visible');

cy.get('#submit').click();

cy.get('input[type="range"]')
  .invoke('val', 25)
  .trigger('change')
  .get('input[type="range"]').siblings('p')
  .should('have.text', 25)

cy.get('tbody tr')
  .each(($el, index, $table) => {
    if ($el.text().includes('iTesting')) {
      $table.eq(index).find('button').click();
    }
  })