精华内容
下载资源
问答
  • Cypress

    2019-06-03 17:11:00
    Cypress 技术雷达 2018 底推的工具:https://www.thoughtworks.com/cn/radar What:  前端网络,cypress是在mocha式API基础上构建的一套开箱可用的E2E(端到端即黑盒测试)测试框架,对比其他测试框架,它提供...

     

    Cypress

     

    技术雷达 2018 底推的工具:https://www.thoughtworks.com/cn/radar

    What:

        前端网络,cypress是在mocha式API基础上构建的一套开箱可用的E2E(端到端即黑盒测试)测试框架,对比其他测试框架,它提供一套自己的最佳实践方案,无需其他测试工具库,配置方便简单但功能异常强大,可以使用webpack项目配置,还提供了一个强大的GUI图形工具。入门简单,上手方便,怎么舒服怎么来呀

    cypressGUI方式的测试使用真实浏览器,非GUI方式使用chrome-headless,不是用模拟方式进行测试,更真实的展现实际环境中的测试过程和结果。

    完整的端到端测试体验。

    Why:

        带GUI工具,想测啥就点啥,还可以查看整个测试过程,想录屏还可以录屏哟

    测试的每一步都有snapshot,可以通过GUI工具查看每个过程的页面状态,不是截图而是真是的页面DOM环境哟!

    自带数据mock和请求拦截机制,还原线上数据引起的bug别提有多轻松了

     

    和wepbakc配置,实现无论修改测试文件还是被测试代码都可以自动重测

    可以给测试用例加上only或者skip来避免重测测试文件里的所有用例: it.only('只测试这个哟); it.skip('不要测这个');

     

    Build:

        先安装node,npm install cypress --save-dev,会安装在选定的路径下

    Use:

        cmd 运行 node_modules\.bin\cypress open npx cypress run 启动

    建测试用例:

       新开cmd

         touch {your_project}/cypress/integration/sample_spec.js

        your_project :C:\Users\yingqinyi\cypress\integration\examples

     

    1. cypress.json 在cypress文件夹外

    2. Package.json 写cypress命令

      1. {“scripts”:{

        "cypress:run": "node_modules/.bin/cypress run",(运行cypress里的js)

        “cypress:open”:“node_modules/.bin/cypress open”(打开cypress)

        }
        }

      2. cmd :npm run cypress:open

        1. npx cypress run

    3. 运行单个spec文件


      1. npm run cy:run -- --record --spec "cypress/integration/my-spec.js"
    4. 编写:


      1. describe('test API',()=>{

        it('MTNY web',()=>{

        cy.visit('/')

        cy.

        })

        })

     

     

     

    6.cypress reporter


    1.运行cypress 在安装路径内运行
    D:\171\Cypress-tools\cypress 在Cypress-tools 路径下运行
    2.获取projectId,key
    1.运行 npx cypress open
    2.打开 runs 获取projectId,key
    3.复制projectId到cypress.json里
    3.运行有reporter的项目
    1.
    运行cmd在cypress路径下:npx cypress run --record --key 1112fd2f-6e74-4bfe-bb69-2b994f3fa8a8
    2.运行结束有网址   https://dashboard.cypress.io/#/projects/pfjcjn/runs/5


     

    7.cypress-docker

     


    1.系统安装docker
    2.建本地images
    git clone https://github.com/mtlynch/hello-world-cypress.git
    cd hello-world-cypress
    docker build --tag sentimentalyzer .
    3.本地项目移植
    将js,package.json,cypress.json移入e2e中
    4.启动脚本
    docker-compose up


     

    转载于:https://www.cnblogs.com/pangdaxingyyy/p/10967767.html

    展开全文
  • Cypress-源码

    2021-03-30 17:11:36
    Cypress
  • 作为初始./cypress npx cypress open命令的一部分,Cypress将在您的项目根目录中添加./cypress目录以及cypress.json配置文件。 您几乎总是想为Cypress测试设置一个baseUrl ,因此现在在cypress.json 。 { " ...
  • CyPress 帮助文件

    2017-12-13 17:19:55
    CyPress 帮助文件 CyPress 帮助文件 CyPress 帮助文件 CyPress 帮助文件
  • Let the world know your project is using Cypress.io to test with this cool badge [![Cypress.io](https://img.shields.io/badge/tested%20with-Cypress-04C38E.svg)](https://www.cypress.io/)
  • cypress.zip

    2019-08-17 20:57:09
    vue cli 3.0工程依赖包,cypress3.4.1 将压缩包内文件直接解压至目录C:\Users\账户名\AppData\Local\Cypress\Cache\3.4.1\Cypress,即可在工程目录node_modules\.bin下,通过cypress open命令使用
  • IntelliJ Cypress集成插件 在常见的Intellij测试框架下集成了Cypress.io 。 兼容性 由于插件依赖于JavaLanguage和插件的NodeJS,所以它需要一个商业版本的IDEA(旗舰版,WebStorm等) 安装 可以从Jetbrains市场安装...
  • Cypress系列-使用npm命令搭建cypress环境.pdf
  • Install Cypress

    2020-05-01 00:06:03
    https://www.toolsqa.com/cypress/install-cypress/ ...In the previous article, we understood the basics of Cypress and how it has created its unique place in the emerging software industr...

    注明本文转载于:https://www.toolsqa.com/cypress/install-cypress/

    Install Cypress

    In the previous article, we understood the basics of Cypress and how it has created its unique place in the emerging software industry. Now, it’s the time for actual action! We will go step by step to understand installation and setup Cypress on a user’s machine.  In this article, we will cover How to Install Cypress:

    • How to create a new Node project?
      • What is the package.json file?
    • How to Install Cypress?

    Pre-requisites

    We have specific pre-requisites before we start Cypress Installation :

    • Install Node JS: As we know that Node.js is a JavaScript runtime environment and Cypress being a Node-based application, the first step in the journey of Cypress will be to install and set up Node.js. So before we rush to Cypress, let’s follow step by step guidelines mentioned in the tutorial “Install Node JS and Setup NPM” to setup Node and NPM successfully on our system.
    • Install Visual Studio Code: After having Node setup successfully, the next thing is to have IDE. In our tutorials, we will be using Visual Studio Code Editor, which is a lightweight but powerful source code editor and comes with inbuilt support for JavaScript. For having IDE setup and getting a brief introduction about the same, please follow step by step guidelines in the tutorial “Install Visual Studio Code Editor” to have a glimpse about the same.

    So after getting both the pre-requisite done, please follow the below steps for the project setup.

     

    How to Create a new Node project?

    When we open Visual Studio Code editor, for the first time, it comes open with Welcome tab information. Our next step is to initiate and create a new node project, and for that, we need first to create our workspace.

     

    As shown in the above figure, under the Start Label, you will see multiple options. Click on the Add workspace folder link to add/select a new folder, which will save all your future projects. Name the new folder as CypressWorkshop.” After that, the Folder hierarchy will look in the left panel of the VS Code as below:

     

    As you can see, it, by default, created a new workspace with “UNTITLED.” You can save the workspace with a proper name by clicking on the “File >> Save Workspace as” menu as shown below:

     

    Note: You can keep the workspace folder as “UNTITLED” if you are just going to create only one project.

     

    Give the workspace a name as “Cypress” and save it. It will create a file “Cypress.code-workspace.” You can add all the project folders under this Workspace, and it will make an entry of the path of the project folder in the “Cypress.code-workspace.” folder.

     

    What is the package.json file?

    All NPM packages contain a file; usually, in the project root, called package.json, this file holds various metadata and libraries relevant to the project. This file gives information to NPM that allows it to identify the project as well as handle the project’s dependencies. It is similar to pom.xml from Maven and build.gradle in GradleAssuming that you have already installed a node, we must first create a package.json file. The npm utility can help you with that.

     

    Steps to Generate package.json

    For generating the package.json file for our project, we will start with npm init either in Terminal of Visual Code or command prompt. It will initiate the npm and will ask us some details that need to be provided by the user before it generates the package.json file. Please follow the steps mentioned below:

    Type below command on the terminal under your project directory:

    1

    npm init

    As soon as you type the command and press “Enter” key to execute the command, it will ask for a few details as shown in the following screenshot:

    Where, 

    • package name: Name of the package created. The user needs to enter this details
    • version: a version of your application/package. It can help in creating different versions of your package.
    • description: additional detail that one needs to provide for the package. Users can leave this blank as well.
    • entry point: What is the entry point for your application. It is pre-populated with index.js, so this needs no change.
    • test command: command that needs to run for testing of the application. If you have created any command which runs your test, you can set it there.
    • git repository: the path to git repository
    • keywords: any keywords to uniquely identify your package.
    • author: author of the repository which is generally the username

    The console will show the path where package.json file is saved and will ask for a confirmation whether that is correct or not? as highlighted below.

     So after entering all the project details as per your need, your package.json will look like below. Moreover, it will contain all the details entered at the time of npm init.

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    {

      "name": "automation",

      "version": "1.0.0",

      "description": "",

      "main": "index.js",

      "scripts": {

        "test": "echo \"Error: no test specified\" && exit 1"

      },

      "author": "AashishKhetarpal",

      "license": "ISC"

    }

     

    Below is the screenshot of how your project will look like after doing npm init. Here the package.json has the same information as we shared above.

     

    The significance of these keys is already detailed above. Moreover, now we also know that how these details got saved in the package.json file. You can open the file in VS Code and view the content of the same. It completes the instantiation of the new Node project, which will use further for our test automation development using Cypress.

     

    How to Install Cypress?

    Till now, we have downloaded node and initialized npm, which sets up the initial base project. Now our next step is to install Cypress so that we can start writing our tests. We have below options to download Cypress:

    • Direct Download: Cypress can be downloaded directly from the Cypress CDN (https://download.cypress.io/desktop). The direct download will always download the latest version for your platform. It will download a zip file, which can be extracted by the user.
    • Download using npm: Use below command to download Cypress using the node package manager. Moreover, we have to execute this command in the same directory, which means inside the Project folder itself that we mentioned while doing npm init above. 

    1

    npm install cypress --save-dev

    It will show a sample output as below:

    It will install the latest version of Cypress for you and –save-dev saves the dependencies in package.json so that if you share this project with a colleague, he/she need not repeat the same activity. But if you are opening any Project folder and if package.json does not have cypress dependency in it, then we need to run above command again. Additionally, you can validate the same by opening the package.json file in the Visual Code, as shown below:

    Note: It shows the cypress dependency, which adds to the package.json file. Currently, it is showing v3.6.0. But since this was the latest version while writing this tutorial, you will get the most updated version present at that time. 

    It shows a sample output if the user runs the “npm install cypress –save-dev” command directly from the VS Code terminal.

    So, this completes our basic setup of a Node project and including the Cypress dependency in the same. Now, we are all geared up to kick off our journey for the development of an automation framework using Cypress.

    Key Takeaways

    • Node.js is the initial requirement for any Cypress based automation framework. Moreover, its installation is easy on all the supported platforms by using the corresponding installers.
    • IDEs make the life of a developer very easy by providing various supports for language constructs. Additionally, Visual Studio Code is one of the most used IDEs for javascript based development. Subsequently, we will use the same for our tutorials.
    • Cypress can be installed either as standalone or using Node’s package managers. We have used NPM (Node package manager) for our initial setup and installation of Cypress as an NPM dependency.

    Conclusively, we are all set up with the basic configurations of Cypress. Let’s now move to the next article where we will write Cypress Test Case.

    Category: CypressBy Aashish KhetarpalApril 4, 2020

    注明本文转载于:https://www.toolsqa.com/cypress/install-cypress/

    展开全文
  • Cypress 简介

    千次阅读 2021-01-16 10:01:54
    Cypress 简介 #什么是 Cypress 一个前端测试工具 Cypress 能测试什么 E2E 测试 集成测试 单元测试(因为内嵌了 Mocha) 任何在浏览器中运行的内容 Cypress 提供的一些功能 时间旅行 自动等待(类似 ...

    Cypress 简介

    #什么是 Cypress

    一个前端测试工具

    • Cypress 能测试什么
      • E2E 测试
      • 集成测试
      • 单元测试(因为内嵌了 Mocha)
      • 任何在浏览器中运行的内容
    • Cypress 提供的一些功能
      • 时间旅行
      • 自动等待(类似 Jest 中的 wait)
        • 以同步风格的代码完成异步操作
      • 网络流量控制
      • 截屏
      • 持续集成
    • Cypress 语法设计(及内置对象)
      • jQuery + 链式调用
      • Promise(Bluebird)
      • Mocha + Chai

    #为什么要用 Cypress

    #学习 Cypress

    #概览

    • 耗时:从入门到熟悉基本概念,大约需要 8~16 小时
    • 难点:充分利用需要花一定时间学习和配置(报告、覆盖率、CI 等)
    • 工具:cypress

    #学习路线

    • 前置学习
    • 学习 Cypress
      • 了解 Cypress 的组成,全面阅读文档
      • 掌握基本使用
    • 实战
      • 在业务中编写测试
        • 进一步熟悉各 API 的大量细节
      • 为项目调整 Cypress 配置,使用高级功能

    #资料

    #自学教材

    #实战

    #Cypress 知识体系

    #Cypress 概览

    #安装/初始化

    **`# 在已有项目中安装 cypress

    npm install cypress --save-dev

    接着运行这个命令,cypress 将初始化并生成一堆用例

    npx cypress open`**

    #文件结构

    • /cypress
      • /fixtures (mock 数据)
        • example.json
      • /integration (测试文件)
        • /examples
          • example.spec.js (一般格式为 *.spec.js)
      • /plugins (用于配置安装的 插件,task 系统)
        • index.js
      • /support (用于调整 自定义选项
        • commands.js
        • index.js
      • /screenshots (默认截屏文件夹)
    • cypress.json

    #测试文件 典型代码

    ///  <reference types="cypress" />
    
    describe('描述', () => {
      before(() => console.log('---- Test Start! ----'));
      beforeEach(() => cy.visit('<https://witch.url>'));
      afterEach(() => cy.clearCookies());
    
      it('测试用户交互', () => {
        cy.get('#app')
          .children('.intro')
          .click();
        cy.contains('Welcome').should('be.exist');
      });
    
      it('测试显示文本', () => {
        cy.get('div').should('have.text', 'Hello');
        // * 另一种风格
        cy.get('div').should(($div) => {
          const text = $div.text();
          expect(text).to.match(/hello/i);
        });
      });
    });
    

    大致分为几个部分

    • TypeScript 自动完成支持(第一行的注释)
    • 运行器和生命周期(describe、it、before 等)
    • 元素查找和操作(cy 相关命令)
    • 断言/测试(should、expect、assert 多种风格)

    #Cypress 对象

    Cypress 和 cy 的区别

    #测试/断言

    Cypress 中内置的断言 包含了几种类型:

    • Chai:断言
      • expect('test').to.be.a('string'):BDD 风格
      • assert.equal(3, 3, 'vals equal'):TDD 风格
    • Chai jQuery:关于 DOM 的断言
      • expect(\$el).to.have.attr('foo', 'bar')
    • Sinon-Chai:关于函数调用情况的断言
      • expect(spy).to.be.called
    • .should():在 Cypress 中封装了以上所有可用断言
      • cy.get('li.selected').should('have.length', 3):should
      • cy.get('div').should(($div) => { expect($div)... }):BDD

    注意到 Cypress 使用 Mocha BDD 风格的生命周期

    不同测试的命名风格:

    Untitled

    #cy 命令

    用来编写测试

    • 测试
      • should:断言
      • then:类似 Promise 的 then
      • each:遍历执行(对于数组)
      • spread:then 的 each 版
    • 查询
      • contains、get
        • children、closest、find
        • eq、filter、not
        • first、last
        • next、nextAll、nextUntil
        • parent、parents、parentsUntil
        • prev、prevAll、prevUntil
        • siblings
      • window、document、title
      • its:取得对象中的字段,如 cy.get('ul li').its('length')
      • root:当前上下文的根元素节点
      • within:设定上下文元素(类似 JS 中的 with)
    • 操作
      • 用户操作
        • click、dblclick、rightclick
        • blur、focus、focused
        • hover:不支持
        • trigger:触发事件
      • 表单/输入框
        • check、uncheck、select
        • clear:清除文本框
        • type:输入文本框
        • submit
      • scrollIntoView、scrollTo
      • invoke:调用对象中的函数,如 cy.get('div').invoke('show')
    • 浏览器
      • viewport:设置应用窗口大小
      • clearCookie、clearCookies、getCookie、getCookies、setCookie
      • clearLocalStorage
    • 网络请求
      • visit、reload:访问
      • hash、location、url:获取
      • go:历史跳转,相当于 window.history.go
      • request:HTTP 请求
      • server:启动一个服务
      • route:跳转路由
    • 功能性
      • 任务
        • log、debug、pause
        • exec:执行 shell 命令
        • readFile、writeFile
        • screenshot:截屏到 /screenshots
        • fixture:读取 /fixtures 中文件内容
        • task:执行 /plugins 中声明的事件
      • 语法糖
        • as:设置为别名
        • and:进行多个测试
        • end:截断当前测试(后续链式调用将重新计算)
        • wrap:包装一个对象(以便支持 cy 命令)
      • 调用监听
        • spy:监听对象中的函数
        • stub:替换对象中的函数(用于监听)
      • Timer
        • clock:覆写原生时钟(将会影响 setTimeout 等原生函数)
        • tick:跳过时间,加快测试速度(需要先 cy.clock())
        • wait:显式等待(不推荐使用)

    #Cypress API

    包含定制选项方法,或公共静态方法

    • 定制
      • Commands:添加自定义命令
      • Cookies:测试时的 Cookie 行为控制
      • Screenshot:截屏参数配置
      • SelectorPlayground:调整选择器规则
      • Server:调整 cy.server() 默认参数
      • config:修改 Cypress 的 配置选项
      • env:管理自定义全局变量
      • log:配置 log 参数
    • 辅助
      • dom:一组 dom 相关方法
        • 如 Cypress.dom.isHidden($el)
      • isCy:是否是 cy 对象
    • 环境信息
      • arch:获取 CPU 架构,来源于 Node os.arch()
      • browser:获取浏览器信息
      • platform:获取操作系统名字
      • spec:当前测试文件信息
      • version:版本号

    #事件

    事件绑定机制是 Node Events

    用法如:Cypress.on/cy.on

    • 应用(页面)事件
      • uncaught:exception
      • window:confirm、window:alert、window:before:load、window:load、window:before:unload、window:unload
      • url:changed
    • Cypress 事件
      • fail
      • viewport:changed
      • scrolled
      • command:enqueued、command:start、command:end、command:retry
      • log:added、log:changed
      • test:before:run、test:after:run

    #Cypress 典型代码

    查看上文中的 实战链接典型代码

    展开全文
  • 连续运行Cypress多次,非常适合查找测试薄片 读取然后。 安装 npm i -D cypress-repeat # or using Yarn yarn add -D cypress-repeat 该模块假定已经安装了cypress依赖关系v5.3.0 +。 用 npx cypress-repeat run -...
  • Cypress Locators

    2020-05-01 00:50:14
    注明本文转载于:...Cypress Locators People who have worked onSeleniumwill be well versed in the concepts oflocators.Locators are the backbone for all autom...

    注明本文转载于:https://www.toolsqa.com/cypress/cypress-locators/

    Cypress Locators

    People who have worked on Selenium will be well versed in the concepts of locators. Locators are the backbone for all automation frameworks for Web-based applications. Additionally, a locator is an identifier that tells any automation tool that GUI elements ( say Text Box, Buttons, Check Boxes, etc.); it needs to operate. Following the same concepts, Cypress also uses the locators to identify the UI element for the application under test. Subsequently, we will cover the following topics in this article to understand the concept of locators in the world of Cypress:

    • What Locators are supported by Cypress?
      • How to write locators with CSS Selectors?
    • How to use Cypress selector playground to grab locators?

    What Locators are supported by Cypress?

    Unlike Selenium, Cypress only supports CSS selectorsvery similar to JQuery Selectors). Therefore, we will be using CSS selectors in all our Cypress automation code.

    Note: Cypress does support Xpath selectors as well. However, that does not come by default. In other words, we need ‘Cypress-Xpath’ external plugins to assist this selector.

    We can write CSS selectors in multiple ways. For example, using the id, class, or any other attribute of a web element that can help us in writing customized CSS selectors. Moreover, we can categorize the CSS selectors into the following categories:

     

     

    How to write Cypress Locators with CSS Selector?

    Suppose we do have the following HTML page as a test application:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    <html>

        <head>

            <title>Demo Site</title>

        </head>

        <body>

            <h1>Demo Site</h1>

            </br>

            <div>

                <label>UserName:</label>

                <input id="userid" class="login" name="username" type='text'>

            </div>

        </body>

    </html>

    It is a simple HTML page, which has a label as “UserName.”  Additionally, it also has a text field that has various attributes such as “id” as ‘userid,’ “class,” as ‘login’ and “name” as ‘username.’

    Now suppose, we have to identify the web elements on this HTML page by using the various types of CSS selectors. Let’s see in the below sub-sections, how can we achieve the same.

     

    CSS Selector: ID

    Syntax:

    1

    <HTML tag><#><Value of ID attribute>

    • HTML tag – It is the tag that denotes the web element which we want to access.
    • – The hash sign symbolizes the ID attribute. Additionally, it is mandatory to use the hash sign if we are using the ID attribute to create a CSS Selector.
    • Value of ID attribute – It is the value of an ID attribute that we access.

    For Example, input#userid where “userid” is the id of the tag input.

     

    CSS Selector: Class

    Syntax:

    1

    <HTML tag><.><Value of Class attribute>

    • – The dot sign is used to symbolize the Class attribute.

    Example: input.login where login is the class name of the tag input.

     

    CSS Selector: Attribute

    Syntax:

    1

    <HTML tag><[attribute=Value of attribute]>

    • Attribute – It is the attribute we want to use to create a CSS Selector. Moreover, it can be value, type, name, class, id, etc.

    For Example, input[name=username] where “username” is the value of attribute “name”.

    or

    input[class=login], where, “login” is the value of the attribute “class”

     

    CSS Selector: Sub-string

    There are three ways in which CSS Selectors can be created based on matching the substring:

    Match a prefix:

    1

    <HTML tag><[attribute^=prefix of the string]>

    • ^  – It is a symbolic representation of matching a string using the prefix.
    • Prefix – It is the string based on which we perform the match operation.

    For Example, input#userid[name^=user].

    Where input denotes an HTML tag-name. Which, in turn, has an “id” value as ‘userid’ and from the attribute, and the ‘name’ attribute should have a value which starts with ‘user.’

     

    Match a suffix

    1

    <HTML tag><[attribute$=suffix of the string]>

    • – It is a symbolic representation of matching a string using the suffix.
    • The suffix – It is the string based on which we perform the match operation.

    Example: input#userid[name$=name].

    Where input denotes an HTML tag-name that has an id value as ‘userid’ and the attribute’ name’ should have a value which ends with ‘user.’

     

    Match a substring

    1

    <HTML tag><[attribute*=sub string]>

    • – It is a symbolic representation of matching a string using substring.
    • Sub string – It is the string based on which we perform the match operation.

    Example: input#userid[name*=erna].

    Where input denotes an HTML tag-name that has an id value as ‘userid’ and the attribute’ name’ should have a value which contains a substring ‘erna.’

     

    Note: Chrome provides a plugin named “ChroPath,” which provides an easy way to capture and inspect Xpath and CSS selectors. Moreover, you can use the same to capture CSS selectors that we will use in Cypress tests going further.

     

    How to use Cypress Selector Playground to grab locators?

    Now imagine, if the automation tool itself provides the functionality to identify and validate the selectors/locators within the tool. Wouldn’t it be an icing on the cake? Cypress provides an Open Selector Playground functionality in Test Runner. Additionally, it helps us in identifying the CSS Selectors for different Web Pages. Let’s learn it with below snapshots and steps : 

    Firstly, open the Cypress Test runner and run any of the tests. Secondly, after that click on the toggle(as highlighted in the below screenshot) to enable the “Selector Playground”:

    After that, once you click on the toggle button, it shows the selector tools as highlighted below:

    Where,

    • The 1st marker shows the “selector.” You can click on this and then click on any of the web elements, of which you want to grab the CSS selector.
    • The 2nd marker is showing the CSS selector of the selected element. Additionally, it will auto-populate the CSS locator of the web element, which you have selected using the selector marked with “Marker 1.”
    • The 3rd marker is showing the option of Copying the CSS selector to Clipboard. By using this, you can directly paste the CSS selector of the web element in your tests.

    Let’s take the example of the test script, which we developed in the previous article for clicking the “Widgets menu item” on the demoqa.com website. Moreover, the activities that we need to do is to capture the CSS selector for the “widgets menu item.” Additionally, use the same in our code to perform any activity on that web element. Let’s follow the below steps to achieve the same :

    1. First, open the Selector playground by clicking on the “Toggle” button.
    2. Second, click on the “Selector” icon, as shown by marker 1 in the above screenshot.
    3. Third, click on the “Widgets” menu to grab its CSS selector. Just after clicking the “Widgets” menu, it will show the CSS selector inside the “cy.get()” section, which was demonstrated by marker 2 in the above screenshot.
    4. Fourthly, click on the copy icon to copy the CSS selector. Additionally, it will show the message as “copied” once the successful copying of the CSS selector happens on the clipboard.
    5. Finally, you can use this CSS selector anywhere in your test.

    Let’s see all these steps in real action in the following gif:

     

    Now, as we got the CSS selector from the above steps, we can use the same selector we copied in our code and subsequently, perform the click operation as shown below:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    // type definitions for Cypress object "cy"

    /// <reference types="cypress" />

     

    describe('My First Cypress Test', function() {

        it('Visits the ToolsQA Demo Page and check the menu items', function() {

        //Visit the Demo QA Website

        cy.visit("https://demoqa.com/");

        

       // Clicking on Widget Menu Item

       // Fetched the CSS selector from Open Selector Playground

       cy.get('#menu-top > li:nth-child(3) > a').click();

     

    })

    })

    Continuing the same way, we can grab the CSS selectors for all the actionable UI elements and develop the complete test case. Doesn’t it make it a very effective and efficient way to grab the selectors of web elements and use them directly in our test cases?

     

    Key Takeaways

    • Cypress only supports CSS selectors for identifying any of the web elements.
    • Additionally, we can create the CSS selectors either using ID, class, name or using a substring or innerText of a web element.
    • Moreover, Cypress Open Selector Playground provides an easy way to grab a CSS selector for any web element.

    To conclude, I hope we now understand various ways in which a CSS selector creation and usage happens in Cypress. Subsequently, let’s now move to the next article, where we will comprehend the “Get and Find Commands  that Cypress provides to search various web elements on a web page.

    Category: CypressBy Aashish KhetarpalApril 3, 2020

    注明本文转载于:https://www.toolsqa.com/cypress/cypress-locators/

    展开全文
  • Cypress Test

    2020-05-01 00:18:32
    注明本文转载于:...Cypress Test The basis of theCypress TestisMochaandChai(one of the famous assertion libraries inJavaScript), and it adheres to the same s...
  • WP赛普拉斯(Cypress)扩展了赛普拉斯(Cypress),以解决开发人员和质量检查工程师在测试现代WordPress应用程序时面临的特定难题。 特征 运行单个命令以设置测试环境。 自动跨多个WordPress版本进行测试。 测试...
  • 遗漏的原因是我们使用该项目来测试每个Cypress版本,并且不想花时间安装cypress@xxx只是立即安装和测试cypress@yyy 。 这意味着在提交带有错误报告的请求请求时,请将有问题的赛普拉斯版本保存在package.json 。 只...
  • 填充命令比cypress本机类型命令更快地填充输入。 该软件包添加了一个自定义的命令,命令可填充输入,文本区域和内容可编辑元素。 赛普拉斯的type命令有10毫秒的延迟,因此会稍微降低测试速度。 此命令完全没有延迟...
  • Cypress-开源

    2021-07-05 00:58:58
    Cypress 是一个 php 新闻和杂志出版引擎。
  • 安装了定制构建器后,您可以使用以下命令运行cypress: ng e2e ng run {your-project-name}:cypress-open 这两个命令执行相同的操作。 他们将以监视模式启动(电子)赛普拉斯Test Runner。 ng run {your-project...
  • Cypress开发套件

    2018-12-13 16:28:07
    Cypress开发套件
  • Laravel Cypress 该软件包提供了一些可以使用cy.request或ajax调用的路由。 这些路由可以将Laravel .env文件交换为另一个可用于测试的文件。 或者例如,它们允许您与Laravels Artisan控制台进行交互。 执照 此项目...
  • Cypress系列-使用yarn命令搭建cypress自动化测试环境.pdf
  • cypress-react-unit-test:使用Cypress进行单元测试React组件
  • 接下来,转到cypress的目录,并将此代码放入您的cypress/plugins/index.js文件中: const { install , ensureBrowserFlags } = require ( '@neuralegion/cypress-har-generator' ) ; module . exports = ( on , ...
  • cypress6264

    2010-06-06 20:01:33
    有关cypress6264资料 有关cypress6264资料
  • 扩展具有阴影DOM支持的Cypress命令 该软件包添加了一个自定义的命令,使您可以抽象地了解通过HTML控件上传文件的精确程度,并着重于测试功能。 由于(和参考问题 ),该项目。 请考虑使用此实验性内置功能以及在...
  • cra-template-cypress 模板。 要使用此模板, --template cypress在创建新应用程序时添加--template cypress 。 例如: npx create-react-app my-app --template cypress 要么 yarn create react-app my-app --...
  • 这些映像提供了在Docker中运行Cypress所需的所有依赖关系。 我们构建了三个主图像,单击图像名称以查看可用的标签和版本。 图片 默认 描述 每月拉 cypress/base:12 所有操作系统依赖性,没有赛普拉斯,也没有...
  • 用于拖放支持的 cypress 子命令。 设置 使用 npm 安装: npm install --save-dev @4tw/cypress-drag-drop 或纱线 yarn add --dev @4tw/cypress-drag-drop 在加载 Cypress 之前(通常在您的commands.js )放置以...
  • cypress USER'Guide

    2018-07-31 13:36:23
    Cypress TTDA_User_Guide,可用于cypress的触摸屏移植
  • cypress-parallel-specs-locally 在本地并行执行 Cypress 规范的脚本: runner_v1 是一个带有递归的承诺池 - runner_v2 是一个基于事件的,带有状态 - ,用于节点 12+ Runner v2 尝试解决多个 Cypress xvfb 实例...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,399
精华内容 3,359
关键字:

cypress