注明本文转载于：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 selectors( very 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:

<html>

<head>

</head>

<body>

</br>

<div>

<label>UserName:</label>

</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”.

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 :

First, open the Selector playground by clicking on the “Toggle” button.
Second, click on the “Selector” icon, as shown by marker 1 in the above screenshot.
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.
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.
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:

// 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 Locators相关推荐

Cypress USB开发文档列表（积累中）
CyUSB.chm(pdf) @ \Cypress\Cypress Suite USB 3.4.7\Driver Cypress CyUSB.sys Programmer's Reference 内容 ...
e2e测试框架之Cypress
谈起web自动化测试,大家首先想到的是Selenium!随着近几年前端技术的发展,出现了不少前端测试框架,这些测试框架大多并不依赖于Selenium,这一点跟后端测试框架有很大不同,如Robot Fr ...
mochawesome如何合并测试报告_Vue项目采用Cypress做e2e自动化测试，手把手一撸到底...
一.Cypress 介绍 cypress是一款支持现代浏览器的端到端的自动化测试工具. 项目地址 :https://github.com/cypress-io/cypress 目前22.5k star ...
CYPRESS USB芯片win10驱动
CYPRESS USB芯片win10驱动 The ZIP file attached with this knowledge base article contains the CyUSB3.inf ...
[Cypress] install, configure, and script Cypress for JavaScript web applications -- part3
Use custom Cypress command for reusable assertions We're duplicating quite a few commands between th ...
Cypress 里的 ensureAttached 检测原理
下面是我用 Cypress 开发的端到端测试.click 调用里的 force:true 参数是我后来加上去的. 如果不添加,会遇到错误消息: 在方法 $Cy.ensureAttached 里面跑出来 ...
Cypress 的条件测试
条件测试用下列的编程范式可以清晰表示出来: If X, then Y, else Z 如今,现代 JavaScript 应用程序是高度动态和可变的. 它们的状态和 DOM 在一段时间内不断变化. 条件 ...
关于 Cypress 同界面元素交互的讨论
click 是 Cypress 里最常用的模拟用户操作的方法之一. 这些命令模拟用户与您的应用程序交互. 在幕后,Cypress 会触发浏览器会触发的事件,从而导致应用程序的事件绑定被触发. 在发出任 ...
Cypress 等待某个 HTTP put 请求得到 200 状态码后，再执行下一步的操作代码
等待 put: cy.intercept({method: 'PUT',path: `${Cypress.env('OCC_PREFIX')}/${Cypress.env('BASE_SITE')}/ ...
cypress 的错误消息 - the element has become detached or removed from the dom
这个错误消息的分析和解决方案,可以参考 Cypress 的官方文档. 这个错误消息提示我们,我们编写的 Cypress 代码正在同一个"死去"的 DOM 元素交互. 显然,在真实的 ...

Cypress Locators

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

Cypress Locators

How to write Cypress Locators with CSS Selector?

How to use Cypress Selector Playground to grab locators?

Key Takeaways

Cypress Locators相关推荐

最新文章

热门文章