Forem: Sachinj34

How To Fill And Submit Forms In Cypress

Sachinj34 — Fri, 11 Nov 2022 12:24:33 +0000

Web forms are one of the most common types of forms that you may have encountered when interacting with websites. An example of a simple form is a login page, where the user needs to enter the login credentials to access the relevant features of the platform. On the other hand, complex forms can contain a combination of user details, captchas, date pickers, and more.

Be it Cypress automation testing or Selenium ; the tests are meant to interact with the WebElements on the page. As per my experience, automating the website’s behavior using appropriate methods is a must-have skill for Cypress testing.

In this blog of the ongoing Cypress tutorial series, I will be covering the integral aspects related to forms: How to use Cypress to fill out forms and How to use Cypress to submit forms. In case you are coming from a Selenium background and intrigued to know what is Cypress, make sure to check out the Selenium vs Cypress comparison.

What are Forms in HTML documents?

Before I deep dive into how to use Cypress to fill out forms or perform Cypress form validation, let me touch upon the essential aspects of Forms in HTML. Here, I will also focus on the different types of attributes that constitute the creation of a form.

HTML Forms are generally used to take different types of user inputs such as name, email address, phone numbers, card details, etc. These inputs are generally driven by forms through special elements (or controls) like checkboxes, text, password fields, input range, etc.

Users are generally required to complete a form by entering text, selecting items, etc., and submitting this form from the front-end. Once the content is submitted, a response is received from the server’s end. Understanding how to find HTML Elements using Cypress locators is a starting point to use Cypress to fill out forms and submit forms.

The

tag is used to create an HTML form. Here’s a simple example of a login form:

<html lang="en">
   <form>
       <label>User: <br>
       <input type="text"></label><br>
       <label>Password:<br>
       <input type="password"></label><br>
       <input type="submit" value="Submit">
   </form>
</html>

Now that we know the basic syntax of forms let’s implement the different input interactions with Cypress. I will walk you through each type of form that can be handled through the Cypress automation framework. I will also cover the potential limitations of Cypress from the perspectives of form submission and validation of forms.

Test your mobile testing lab app and websites on LambdaTest’s Mobile testing cloud and get instant feedback. Find bugs early on, improve performance, quality, user experience and save time with mobile application testing on LambdaTest.

Form submission with Cypress

Here are some of the major types of WebElements that most of us would have come across on web pages:

Input Elements

tag is the most used type of element in forms. This is because it allows you to add various types of user input fields that are majorly dependent on the attribute type.

An input element can be a text field, password field, checkbox, radio button, etc. Each of these elements serves different purposes, and the approach in handling them purely depends on the element type.

Here are some of the major input fields that can be handled with Cypress test automation:

Text Fields

Text fields are single text input controls. In text fields, the type attribute has a value of the text. Here’s an example text input used to take username:

Example: Handling Text fields in Cypress

For demonstrating how to handle text fields in Cypress, I will be using the following HTML form:

<html lang="en">
   <form action="https://www.automationtestinginsider.com/">
       First name:<br><input name="firstname" type="text"><br>
       Last name:<br><input name="lastname" type="text"><br>
     </form>
</html>

The output of the above example is shown below:

Here is the Cypress implementation for handling text fields on a test website:

beforeEach('Launch site', ()=>{
   cy.visit('https://www.automationtestinginsider.com/2019/08/textarea-textarea-element-defines-multi.html')
})

it('Interacting with text fields',()=>{
   cy.get('input[name="firstname"]')
     .type('Sachin')
.should('have.value','Sachin')
.get('input[name="lastname"]')
.type('Joshi')
.should('have.value','Joshi')
})

Code Walkthrough

I am using cy.visit() to open the target website in the above code. Once the site is loaded, the cy.get() function is called by passing the CSS web locator.

Appropriate CSS locators in Cypress are used to locate the desired WebElement and interact with the same. For example, on similar lines, the cy.get() method is used for entering the ‘last name’ in the text field.

For both the fields, I am asserting the value using .should() to validate if the text is showing the same value or not.

Check out the below video that deep dives into Assertions in Cypress:

However, you can visit the LambdaTest YouTube channel for more videos in the Cypress Testing tutorial and videos on Selenium testing, so there’s never a shortage of learning opportunities.

Password Field

The characters in the password fields are masked; hence, they are shown as dots or asterisks. Akin to text fields, password fields are also input controls created using an element with attribute type as password.

Example: Handling Password field in Cypress

Here’s an example of a password input inside

for user password:

<html lang="en">
   <form>
       <label for="pwd">Password:</label>
       <input type="password" name="password" id="user-pwd">
   </form>
</html>

The output of the above example is shown below:

Here is the Cypress implementation for handling password field on a test website:

it('Interacting with password fields' ,()=>{
   cy.visit('https://opensource-demo.orangehrmlive.com/index.php/auth/login')
   .get('#divUsername')
   .type("Admin")
   .get('#txtPassword').type('admin123')
   .type('{enter}')
   .get('.head')
   .should('be.visible');
})

Code Walkthrough

Here, I am visiting the site’s login page and locating the elements using the .get() method. An assert is raised using the using should() method if the login is unsuccessful.

Along with it, the visibility of the .head class is also checked to ensure that the required elements are available on the page.

Radio Buttons are used when the user selects exactly one option out of the listed ones when submitting the HTML form. The Radio button is created using an element with type attribute value as radio.

One of its common applications is when the user has to select their gender, marital status, or submit answers that have binary (i.e., yes/no) options.

Example: Handling Radio buttons in Cypress

Here’s an example of a radio buttons inside

tag:

<html lang="en">
   <form>
   <input type="radio" name="gender" id="male">
    <label for="male">Male</label>
    <input type="radio" name="gender" id="female">
    <label for="female">Female</label>
   </form>
</html>

Here is the output of the HTML code:

Here is the Cypress implementation for handling radio buttons on a test website:

it('Interacting with radio buttons',()=>{
   cy.visit('https://www.automationtestinginsider.com/2019/08/textarea-textarea-element-defines-multi.html')
   .get('input[value="Yes"')
   .click()
   .get('input[value="No"')
   .click()
   .get('input[value="Don\'t Know"')
   .click()
})

Code Walkthrough

The first step is to locate (or identify) the radio button with the Value attribute. For realizing this, I am leveraging the tag [Yes, No, etc.].

The click() method is used for selecting the required value (using the radio button on the form).

Checkboxes

Checkboxes in forms help you select more than one option from a list of predefined options. It is created using an element with attribute type as checkbox.

Example: Handling Checkboxes in Cypress

For demonstrating how to handle checkboxes in Cypress, I have created a simple HTML form that comprises a few checkboxes.

<html lang="en">
   <form>
       <input type="checkbox" name="policy" id="policy1">
       <label for="policy">Policy1 - I Agree</label>
       <br>
       <input type="checkbox" name="policy" id="policy2">
       <label for="policy">Policy2 - I Agree</label>
       <br>
       <input type="checkbox" name="policy" id="policy3">
       <label for="policy">Policy3 - I Agree</label>
       </form>
</html>

Here is the output of the following HTML code:

Here is the Cypress implementation for handling checkboxes on a test website:

it('Interacting with checkboxes',()=>{
 cy.visit('https://www.automationtestinginsider.com/2019/08/textarea-textarea-element-defines-multi.html')
     .get('input[value="Checkbox1"]')
     .click()
     .get('input[value="Checkbox2"]')
     .click()
     .get('input[value="Checkbox3"]')
     .click()
     .get('input[value="Checkbox1"]')
     .click()  //this to uncheck first one again
})

I have checked all the four checkboxes in the above example and unchecked them one by one.

Code Walkthrough

To get started, the required WebElement is identified using the Value attribute. Then, depending on your convenience, you can also use other attributes like ID, Name, etc.

Like XPath in Selenium, you can also choose to use XPath in Cypress if XPath is your go-to WebLocator for locating WebElements. As seen in the output below, Checkbox1 is unchecked (if checked) once we perform a click operation on it.

TextArea

Textarea is another form of text input field where users can enter more than one line of text. Textarea field is particularly useful when users submit lengthy text like feedback, instructions, etc.

With the attributes like rows, cols, and maxlength, you can limit the visibility and number of characters in the text area. The tag element is used to create multi-line text fields.

The attribute rows is used to specify the visible number of lines, whereas cols is used to specify the visible width of a text area.

Example: Handling Textarea in Cypress

To demonstrate how to handle textarea in Cypress, I have created a simple HTML form containing a single text area.

<html>
   <body>
       <label for="address">About Yourself:</label>
         <form>
             <textarea rows="10" cols="30" name="address" id="address"></textarea>
         </form>
     </body>
</html>

Here is the output of the following HTML code:

Here is the Cypress implementation for handling the text area (where rows are 10 in number). This means that text will be visible only till 10 rows. Post that, users will have to scroll to see the remaining text.

Shown below is the implementation to enter multiple rows with the use of new line character (i.e. “\n”):

it('Ensure the text limits in text area', () => {
   cy.visit('https://www.automationtestinginsider.com/2019/08/textarea-textarea-element-defines-multi.html')
    .get('textarea')
    .first()
    .clear()
    .type(Row1\n Row2\nRow3\nRow4\nRow5\nRow6\nRow7\nRow8\n
   Row9\nRow10\nRow11\nRow12')
    }
)

Code Walkthrough

The cy.get(‘textarea’) method is used for locating the textarea field. The clear() method in Cypress is used for clearing the input text that might be pre-populated by default.

The type() method in Cypress is used for entering text across rows till Row-12. The text till row 10 is visible in the below screenshot, after which you will have to scroll down to see the content entered in the remaining rows. This is because we have limited the maximum number of rows to 10 for the element.

Dropdown Menu

A dropdown menu provides a list of options that users can select before submitting the form. A common usage of dropdown menus is choosing the appropriate country/state/city from the pre-populated list.

It is created using the element along with the tag which lists the options available for selection. The tag can be used without any attributes; however, a value attribute is a must if you want to send the selected values to the server once the form is submitted.

Example: Handling Dropdown menu in Cypress

Here, I have created a simple downtown list that lets the user select their preferred automobile brand:

<html>
   <form action="/action_page.php">
       <label for="cars">Choose a car:</label>
       <select name="cars" id="cars">
         <option value="volvo">Volvo</option>
         <option value="saab">Saab</option>
         <option value="opel">Opel</option>
         <option value="audi">Audi</option>
       </select>
       <br><br>
       <input type="submit" value="Submit">
     </form>
</html>

Here is the Cypress implementation for handling dropdown menu in Cypress:

describe.only('DropDown selection',()=>{
   it('Select boxes using Visible option',()=>{       
 cy.visit('https://www.automationtestinginsider.com/2019/08/textarea-textarea-element-defines-multi.html')
           .get('select')
           .eq(0)
           .select('Fiat')
           .should('have.value','fiat')
       })

       it('Select boxes using values',()=>{
           cy.visit('https://www.automationtestinginsider.com/2019/08/textarea-textarea-element-defines-multi.html')
           .get('select')
           .eq(0)
           .select('fiat')
           .should('have.value','fiat')
       })
})

Code Walkthrough

The cy.select() method in Cypress is used for handling dropdowns in Cypress. The select(params) method accepts only one parameter. We can use attribute value as well as visible text value as a parameter to find and select the options from the list.

Once the option is selected from the dropdown, should() assert the values using the built-in assertion method ‘have.value’. The method returns the value of the selected option.

Submit and Reset Buttons

Input control of the submit type is used for sending the form data to the server. When the submit button is clicked, the data entered by the user is submitted (or passed) to either retrieve from the database or perform actions on the submitted data.

For instance, when a user enters login details, the username and password combination is sent to the server for verification. Then, the next set of actions are performed depending on the verification status. In scenarios where the user clicks the submit button without filling in the required entries, an error message is displayed on the screen.

On similar lines, reset type of input control is used to clear all the details that the users enter. This is especially useful if the user has to re-enter the details in the form and clean all the respective fields if the submission has to be done freshly.

Submit and Reset are created using the tag, where the attribute value is set to “submit” and “reset,” respectively.

Example: Using Submit button in Cypress

I have created a simple form to demonstrate the handling of submit and reset buttons in Cypress:

<html>
   <form action="https://www.automationtestinginsider.com/">
       First name:<br> <input name="firstname" type="text"><br>
       Last name:<br> <input name="lastname" type="text"><br><br>
       <input type="submit" value="Submit">
       <input type="reset">
     </form>
</html>

Here is the sample output with the submit and reset buttons:

Shown below are the two approaches for handling Submit button in Cypress:

Approach 1: Using ‘Submit Button’ in Cypress

Shown below is the sample demonstration to use Submit button on a form with Cypress:

it('Form submit with cypress submit() method', () => {
   cy.visit('https://opensource- demo.orangehrmlive.com/index.php/auth/login')
        .get('#divUsername')
        .type("Admin")
        .get('#txtPassword').type('admin123')
        .get('form#frmLogin')
        .submit()
        .get('.head')
        .should('be.visible');
})

Code Walkthrough

The code is pretty simple 🙂 After entering the username and password, the submit() method is invoked to submit the contents entered in the form. In order to use the submit() method, we need to identify the form that has to be submitted.

For this, the form ID is used to identify the form and invoke the submit() method to submit the contents entered in the form. To check if the form is submitted successfully or not, the visibility of the dashboard is checked by invoking the should() method. Here, the in-built be.visible parameter is used for confirming the visibility.

Shown below is the execution snapshot:

Approach 2: Using ‘Submit Button’ in Cypress

In this approach, the click() method is used for locating the Submit button using the appropriate locators in Cypress.

it('Form submit with usual click method', () => {
   cy.visit('https://opensource-demo.orangehrmlive.com/index.php/auth/login')
       .get('#divUsername')
       .type("Admin")
       .get('#txtPassword').type('admin123')
       .get('input[type="submit"]')
       .click()
       .get('.head')
       .should('be.visible');
})

Code Walkthrough

Form submission using the click() method is akin to how clicks are performed on any button on a page. However, the major difference between the earlier approach and this one is the methodology used for locating the button using the get(‘input[type=”submit”]’) method.

Once the button is located, the click() method is invoked for performing the requisite actions.

Shown below is the execution snapshot:

Example: Using Reset button in Cypress

Here is the implementation for using Reset buttons in Cypress:

it('Form reset after filling up',()=>{
  cy.visit('https://www.automationtestinginsider.com/2019/08/textarea-textarea-element-defines-multi.html')
   cy.get('input[name="firstname"]')
       .type('Sachin')
       .should('have.value', 'Sachin')
       .get('input[name="lastname"]')
       .type('Joshi')
       .should('have.value', 'Joshi')
       .get('input[type="reset"]')
       .click()
       .get('input[name="firstname"]')
       .should('have.value','')
})

Code Walkthrough

The Reset button is identified using the get(‘input[type=”reset”]’) method. Once the button is identified, a click operation is performed to empty the data entered in the username and password fields.

The should() method is used to by-pass the in-built parameter ‘have.value’ to ‘equal to.’

Take this certification to showcase your expertise with end-to-end testing using Cypress automation framework and stay one step ahead.

Here’s a short glimpse of the Cypress 101 certification from LambdaTest:

Starting your journey with Cypress End-to-End Testing? Check out how you can test your Cypress test scripts on LambdaTest’s online cloud.

Test your native app and website on Cloud Mobile Testing Labs on the cloud with real iOS and Android devices. LambdaTest is a convenient, cost-effective and centralized solution for running real-time and Automated tests on real devices cloud.

File Upload Testing in Cypress

Input type file is a special control that lets the user upload documents such as image, pdf, docx, ppt, etc., when submitting the forms. File uploads is a common input type that is primarily used for uploading files like ID proofs, profile photos, etc. File upload control is created with input tags that have attribute value type=file.

Example: File Upload in Cypress

I have created a simple form to demonstrate file upload functionality in Cypress:

<html>
<form method="POST" enctype="multipart/form-data">
   <input id="file-upload" type="file" name="file">
    <br>
   <input class="button" id="file-submit" type="submit"
   value="Upload">
</form> 
</html>

Here is the output snapshot:

Demo: File Upload testing in Cypress

Cypress, by default, does not have built-in functionality to handle file uploads. Instead, the cypress-file-upload package is used for handling file uploads in Cypress.

Here is the series of steps for realizing file upload in Cypress:

Step 1: Installing plugin

We first install the package by invoking the “npm install cypress-file-upload –save” command on the terminal.

Step 2: Import package in command.js

Once the installation is done, add the statement import ‘cypress-file-upload’ in the command.js file. You can locate the command.js file under the support folder within the project.

Step 3: Adding upload file to fixtures

We shall now place the file that we need to upload under the fixtures folder.

Step 4: Cypress implementation to upload files

Here is the sample implementation for uploading files using Cypress:

it('Test file upload with valid file extension', () => {
   const filePath='somefile.txt';
   cy.visit("https://the-internet.herokuapp.com/upload")
   cy.get('#file-upload').attachFile(filePath)
   cy.get('#file-submit').click()
   cy.get('#uploaded-files').contains('somefile')
})

Code Walkthrough

Once you get the locator for file input using .get(‘#file-upload’), I am attaching a file placed under a fixture using attachFile(). A verification process of the uploaded file is done to ensure that the uploaded filename is the same as the original file. The contains() method in Cypress is used for realizing the above requirement.

There is no need to specify the file path, as Cypress automatically looks for the required file under the fixtures folder.

Here is the output snapshot:

Handling Date picker in Form using Cypress

Date Picker is another type of input field using which users can select the required date from the options. Date picker can be created either using or .

<html>
   <form action="/action_page.php">
       <label for="birthday">Birthday:</label>
       <input type="date" id="birthday" name="birthday">
       <input type="submit">
   </form>
</html>

Here is the Cypress implementation for handling date pickers:

it.only('Datepicker in form', ()=>{
   cy.visit('https://demoqa.com/automation-practice-form')
   .get('#dateOfBirth-wrapper')
   .click()
   .get('.react-datepicker__day--013')
   .click()
   .get('#dateOfBirthInput')
   .should('have.value', '13 Nov 2021')
})

Code Walkthrough

First we identify (or locate) the date picker field with .get(‘#dateOfBirth-wrapper’). The fields in the date picker are shown once a click is performed on the picker.

For example, .get(‘.react-datepicker__day–013’) sets the date to “13 Nov 2021”. The date is verified using the .should() method by passing the ‘have.value’ as “13 Nov 2021”.

Here is the execution snapshot:

Using Cypress to fill out Forms and submit them on a Cloud Grid

Now that I have covered the essentials of using Cypress to fill out forms, and submit & reset buttons, let me demonstrate everything using an end-to-end example. Rather than using a local Cypress Grid, I will be running tests on a cloud Cypress Grid like LambdaTest.

LambdaTest simplifies the task of executing your Cypress tests in parallel on a range of online browser and OS combinations hosted on the LambdaTest cloud grid. While writing this blog, there are 40+ browser versions for Cypress testing on the LambdaTest cloud grid.

There are umpteen benefits of cloud testing, the major ones being improved scalability, reliability, security, and improved browser coverage. You can refer to the getting started guide to Cypress testing on cloud to understand the benefits of cloud Cypress Grid better.

Debug Android app on the cloud and get instant feedback. Find bugs early on, improve performance, quality, user experience, and save time with instant support on LambdaTest.

Demo: Using Cypress to fill out Forms

I will perform relevant actions on the form placed on the website under test. The implementation shown below covers all the standard input types that can be used when filling up forms:

it('Interacting with checkboxes',()=>{
   cy.visit('https://www.automationtestinginsider.com/2019/08/textarea-textarea-element-defines-multi.html')
     .get('input[value="Checkbox1"]')
     .click()
     .get('input[value="Checkbox2"]')
     .click()
     .get('input[value="Checkbox3"]')
     .click()
     .get('input[value="Checkbox1"]')
     .click()  //this to uncheck first one again
})

describe('Form Submission on LambdaTest', () => {

   it('Fillup details and submit', () => {

       const filePath = 'somefile.txt';

       cy.visit('https://demoqa.com/automation-practice-form')
           .get('#firstName')
           .type('Sachin')
           .get('#lastName').type('Joshi')
           .get('#userEmail').type('test.me@yopmail.com')
           .get('input[value="Male"]').click({force:true})
           .get('#userNumber').type('1231231231')

       cy.get('#dateOfBirth-wrapper')
           .click()
           .get('.react-datepicker__day--013')
           .click()
           .get('#subjectsInput').type('Sports')
           .get('input[type="checkbox"][value="1"]').click({force:true})

       cy.get('#uploadPicture').attachFile(filePath)
       cy.get('#currentAddress').type('This is long text area as you can type \n Multiple \n lines')
       cy.get('#state').type('Rajasthan{enter}')
       cy.get('#city').type('Jaipur')
       cy.get('#submit').click()

   })
})

LambdaTest config helps run tests in parallel against Chrome and Firefox on Windows & macOS platforms. There are a number of benefits of parallel testing with frameworks like Cypress, as it expedites the testing and release processes.

Perform Cypress Parallel Testing on LambdaTest and speed up the testing and release process. Check out how you can test your Cypress test scripts on LambdaTest’s online cloud.

Here is the lambdatest-config.json file that houses the configuration-related information for running Cypress tests at scale on LambdaTest. I have used the LambdaTest Cypress CLI to override the essential configuration from a JSON file.

Cypress CLI lets you manipulate the test configuration file [i.e., lambdatest-config.json] through the command-line interface (CLI), which allows you to override and/or manually modify your tests at any time you want.

`{
  "lambdatest_auth": {
     "username": "<username>",
     "access_key": "<access_key>"
  },
  "browsers": [
     {
        "browser": "Chrome",
        "platform": "Windows 10",
        "versions": [
           "94.0"
        ]
     },

     {
        "browser": "Firefox",
        "platform": "Windows 10",
        "versions": [
           "92.0"
        ]
     },
     {
        "browser": "Chrome",
        "platform": "macOS Big Sur",
        "versions": [
           "94.0"
        ]
     },

     {
        "browser": "Firefox",
        "platform": "macOS Big Sur",
        "versions": [
           "92.0"
        ]
     }
  ],
  "run_settings": {
     "cypress_config_file": "cypress.json",
     "build_name": "Cypress",
     "parallels": 4,
     "specs": "./cypress/integration/practice/formSubmit.spec.js",
     "ignore_files": "",
     "npm_dependencies": {
        "cypress": "8.1.0"
     },
     "feature_file_suppport": false,
     "video":true
  },
  "tunnel_settings": {
     "tunnel": false,
     "tunnelName": null
  }
}

Once we are ready with the tests and configuration file demonstrating cross browser testing with Cypress, we can run the same on the LambdaTest grid by triggering the following command on the terminal:

lambdatest-cypress run

After a successful run, you will see the tests appended on the LambdaTest Grid.

You can navigate to the LambdaTest automation dashboard to check the status of the test. As we have executed the tests parallely on Chrome and Firefox browsers, the same can be seen in the dashboard.

Conclusion

I hope you enjoyed reading the blog on using Cypress to fill out forms and submit them, where we saw different types of form inputs that we come across in most websites and how we can automate the form submission with Cypress. We also covered the cross-browser capability of the Cypress testing tools like LambdaTest, and as evident from screenshots of the LambdaTest dashboard, it took us only 1 minute to execute the form test across four different combinations of firefox and chrome for Windows and macOS systems. Such is the power of cloud-based testing platforms.

Thank you and Happy Learning!!

How To Find HTML Elements Using Cypress Locators

Sachinj34 — Thu, 10 Nov 2022 08:29:57 +0000

Cypress is a new yet upcoming automation testing tool that is gaining prominence at a faster pace. Since it is based on the JavaScript framework, it is best suited for end-to-end testing of modern web applications. Apart from the QA community, Cypress can also be used effectively by the front-end engineers, a requirement that cannot be met with other test automation frameworks like Selenium.

Since Cypress is an open-source framework suited for testing modern web applications, many QA engineers prefer Cypress test automation over testing with other automation frameworks.

To access any WebElement in the DOM (Document Object Model), you would need to use Cypress locators, comparable to locators in Selenium. Thus, by the end of this Cypress tutorial, you would be in a position to use Cypress locators to access WebElements in the DOM for realizing Cypress automation tests.

New to CSS Selectors? Check out this Ultimate CSS Selector cheat sheet to boost your web designing career.

Starting your journey with Cypress Testing? Check out how you can test your Cypress test scripts on LambdaTest’s online cloud.

What are Cypress Locators

If you are coming from a Selenium automation background and willing to jump ship to the Cypress framework, the Cypress vs Selenium comparison would be helpful to make a wiser decision! In addition, you can take a quick refresher of the Cypress framework by visiting our earlier blog that deep-dives into the Cypress architecture and design.

Akin to locators in Selenium, Cypress locators are also used to find WebElements in the HTML Document Object Model (DOM). Once you find multiple elements in Cypress, relevant operations can be performed on these elements or assert their presence for validation.

Locators are generally classified in the following categories, while they are being used to find multiple elements in Cypress:

tags — Locate WebElements using HTML tags like , , , etc.
ids — Locate WebElements using the ID of the elements
name — Locate WebElements using name attribute that is set for elements (especially form input elements)
class — Locate WebElements by class value
links — Locate WebElements by links text property
attributes — Locate WebElements by one or multiple sets of attributes

Since the core fundamentals of web locators are agnostic of the automation framework, you can refer to our locators in Selenium that deep dive into each locator (mentioned above) in more detail.

Get the best out of your Cypress tests with LambdaTest’s online Cypress automation tool. Check out how you can test your Cypress test scripts using LambdaTest’s online cloud.

Test your Puppeteer test scripts online. Deploy a quality build faster by running automated checks across over 3000+ browsers and OS combinations with the LambdaTest cloud. Try for free.

How to use Locators in Cypress

Cypress supports only CSS selectors out of the box for locating elements in the DOM. So in case you intend to use other web locators like XPath, ID, etc., with Cypress, you need to add relevant external packages that support using those with Cypress locators.

Let’s deep dive into details of how to use and work with locators in Cypress. For this blog in the Cypress tutorial series, I will be using ecommerce practice site for showcasing the usage of the relevant web locators.

You can go through the following video to learn Cypress GET and FIND Command Hacks supported by the Cypress test automation framework. This will help you write your first cypress test and target HTML elements using the GET command. However, visit the LambdaTest YouTube channel for more Cypress videos, so there’s never a shortage of Cypress learning opportunities.

Identify HTML elements using ‘ID’ Cypress locator

IDs are the unique attributes given to the HTML elements that can be identified and updated with minimal effort. The ID attribute is unique across the DOM, due to which it is the fastest way for locating the required WebElement. It also helps in accelerating the interactions with the underlying elements in the DOM.

Here is a sample HTML page that showcases the syntax of ID in HTML:

<ul id="lists">
   <li id="first"> Option 1 </li>
   <li id="second"> Option 2 </li>
   <li id="third"> Option 3 </li>
</ul>

Here,

tag can be identified uniquely with CSS selectors command using $(‘#lists’).

Demonstration: ID locator in Cypress

Let’s look at using an ID locator in Cypress using the example site that we showed earlier. Here, we locate the search bar on the site; the HTML representation of the search bar is below:

<input class=“search_query form-control ac_input” type=“text”
id=“search_query_top” name=“search_query” placeholder=“Search” value="" autocomplete=“off”>

Here is the implementation that demonstrates the use of the ID locator in Cypress:

describe('Cypress Locators in action', ()=>{
   beforeEach(()=>{
       cy.visit('[http://automationpractice.com'](http://automationpractice.com'))
   })
   it('Interact with Elements using ID selector', ()=>{
       cy.get('#search_query_top') //ids are identified using # prefix
       .type('Dress')
       .type('{enter}')
       .get('#center_column')
       .should('be.visible')
   })
})

cy.get() *is used in Cypress to find multiple elements in DOM. The method accepts a parameter in the form of an identifier. Here we pass the *ID of the element with ‘#’ as a prefix. Since the call is chainable, we used type() to enter values and used should() to assert the visibility of the corresponding WebElement.

Shown below is the execution screenshot, which indicates that the test execution was successful:

Identify HTML elements using ‘NAME’ Cypress locator

The HTML name attribute is mostly used by ,, tags where it helps to identify field details when submitted to the server. You can refer to our detailed blog on NAME locator in Selenium to get insights on the said web locator.

Here is a sample HTML page that showcases the syntax of NAME in HTML:

<input class=“search_query form-control ac_input” type=“text”
id=“search_query_top” name=“search_query” placeholder=“Search” value="" autocomplete=“off”>

Demonstration: NAME locator in Cypress

Shown below is the syntax of the NAME locator in Cypress:

cy.get(<tag>[name='value'])

where can be HTML tags like input, form, etc. is optional, when not specified, it will match name against all the tags (wherever match is found).

describe('Cypress Locators in action', ()=>{
   beforeEach(()=>{
       cy.visit('[http://automationpractice.com'](http://automationpractice.com'))
   })
it('Interact with Elements using name attribute',()=>{
   cy.get('input[name="search_query"]') //observe how we use name attribute
   .type('Tshirt{enter}')
   .get('#center_column')
   .should('be.visible')
})
})

Code walkthrough

Once the site is opened after the beforeEach() execution, the test “Interact with Elements using name attribute” starts with identifying elements using the name attribute (‘search_query’) and then sends the search value to the text box using the type() method.

it('Interact with Elements using name attribute',()=>{
   cy.get('input[name="search_query"]') //observe how we use name attribute
   .type('Tshirt{enter}')

The Inspect tool in Google Chrome is used for locating the element using the CSS Selector. Here is how we use the browser console using $() as the CSS selector:

Once the search results are available, we can use the ID locator in Cypress to find multiple elements and assert using Cypress’s built-in assertion method *should(‘be.visible’). *An assert is raised if the search results are not displayed properly.

Execution

Shown below is the execution snapshot, which indicates the respective WebElement was located successfully using the NAME locator:

Identify HTML elements using ‘Attributes’ in Cypress

Attributes are ways to set a particular property of the HTML element. They also help define the behavior of the elements when a specific condition is set and triggered. Attributes are applied to almost all the HTML tags and work similarly to the NAME locator in Cypress. Thus, we can use the same syntax for locating elements using other attributes as well.

Shown below is the syntax to use attributes in Cypress:

cy.get(<tag>[attribute_name=attribute_value])

Additionally, consider a case where one would like to use Cypress to find multiple elements or all of them having attribute titles whose value contains ‘store’ (e.g., store-1, store-2, …). One of the brute force ways is to find each element one by one with the exact attribute value using the above syntax. However, this task is mundane and not beneficial when we need to find multiple elements in Cypress and add some common functional logic to them.

A better approach would be to use the regex-supported syntax in the CSS selector to get the list of items in one go.

Fortunately, Cypress provides an easier way to tackle this problem, where you can use patterns like starts-with and ends-with particular substring to match all the elements in the DOM.

Purpose	Syntax
To find all the elements containing values	=, cy.get([attr_name = attr_value])
To find all the elements starting with attr_value, we use	^=, cy.get([attr_name ^= attr_value])
To find all the elements ending with attr_value	$=, cy.get([attr_name $= attr_value])

Demonstration : Using Attributes in Cypress

describe('Cypress Locators in action', ()=>{
   beforeEach(()=>{
       cy.visit('[http://automationpractice.com'](http://automationpractice.com'))
   })

   it('Finding elements using attribute values',()=>{
    cy.get('a[title*="store"]')
     .should('have.length.at.most',1)

    cy.get('a[title*="store" i]')  //case insensitive
     .should('have.length.gt',1)
       .each(i=> console.table([i.attr('href')]))
})

})

Code Walkthrough

Step1

The cy.get() method is used in Cypress to find multiple elements based on attribute value using *title=store *for locating *Our Stores link from the footer as shown below:

Step 2

Once the intended WebElement is located, we validate that the page has at least one element that matches the required locator. Cypress built-in assertion method .should(‘have.length.at.most’,1) is used for checking length value where ‘have.length.at.most’ in Cypress evaluates the length of the located element.

Step 3

The cy.get(‘a[title=”store” i]’) *method is used to find all the links on the page that contains the title *“store”. *In the screenshot shown below, I have highlighted two elements on the page that matched the required locator:

The first one is the logo with the title = “My Store”
The second one is the footer with the title = “Our stores”

Step 4

The should() method is used for asserting if the length of the located WebElements is greater than 1. The length is checked using the *have.length.gt *method.

.each() in Cypress is used to iterate on each of the located WebElements. Here I am printing the href *value using the *attr([key]) method that returns the attribute value for the key provided as the argument.

.should('have.length.gt',1)
       .each(i=> console.table([i.attr('href')]))

As seen below, the URL of each element that is located on the page is printed on the console:

In this XCUITest tutorial, learn about XCUITest framework and its benefits for mobile automation testing. Take a look at how XCUITest works and see how to use it to test your mobile applications.

Identify HTML elements using ‘By Class’ in Cypress

HTML class attribute is mostly used for styling the element or group of elements. Unlike ID, class attributes need not be unique, which is why this is helpful when we need to apply a common style to multiple elements.

In Cypress, class selectors can be identified using the following options:

cy.get(.)
cy.get([class=’<class_value’])

Demonstration: Using ‘By Class’ in Cypress

Consider the following HTML Page for demonstration:

<a href="[http://automationpractice.com/index.php?id_category=3&controller=category](http://automationpractice.com/index.php?id_category=3&controller=category)" title=“Women” class=“sf-with-ul”>Women</a>

Shown below is the implementation that demonstrates the usage of ‘By Class’ in Cypress:

describe('Cypress Locators in action', ()=>{
   beforeEach(()=>{
       cy.visit('[http://automationpractice.com'](http://automationpractice.com'))
   })

  it('Interact with Elements using class selector',()=>{
        cy.get('.item')
        .eq(0) //0th element in the array of elements
        .click()
        cy.get('[class*="center_column"]') 
        .should('be.visible')
    })  
  it('Class selector short hand',()=>{
     //find class containing value .. using *=
     cy.get("a[class*='add_to_cart']")
     .eq(0)  // finding 0th element
     .click()
     .get("#layer_cart")
     .should('be.visible')

   //find class value that start with .. using ^=
    cy.get("[class^='layer_cart_product']")
    .should('be.visible')
    .get("a[title='Proceed to checkout']")
    .click()

   //find class that ends with... using $=
    cy.get('[class$="_delete"]')
    .click()
    .get('.alert')
    .should('be.visible')
 })
})

Code Walkthrough

Test 1: Interact with Elements using class selector

The cy.get(‘.item’) method is used to locate the element with class=”item”, which returns the list of elements matching the query.

cy.get('.item')

Here is how the locator is identified using the Inspect tool in Chrome:

Once we get the list of the elements using the get() method, the eq() method in Cypress is used for locating the first element from the list. Once we locate the first element from the list, we click on the link that it points to (i.e. ‘Prices Drop’)

.eq(0) //0th element in the array of elements
.click()

Next, we find the class containing value using the cy. get(‘ [class=”center_column”]’)* method. Raise an assert on the visibility of the element using the .should() method.

Test 2: Class selector short hand

We find the first product from the list of items and add that product to the cart. We then validate the product present in the cart, remove the product and verify if the cart is empty.

For this, we make use of regex with the class selector so that the code looks cleaner.

cy.get("a[class*='add_to_cart']").eq(0)

The above code locates the ‘Add to cart button’ on the home page and returns the first button using eq(0).

After clicking on the first button, we wait for the element with ID *#layer_car *to be visible to perform necessary operations on that WebElement.

Once the button is visible, we click on the same by locating it using its title (i.e. ‘Proceed to checkout‘).

cy.get("[class^='layer_cart_product']")
    .should('be.visible')
    .get("a[title='Proceed to checkout']")
    .click()

We add a Product to the cart by clicking on the ‘Proceed to checkout’ button.

Once the item is added to the cart, we delete the same and check if the shopping cart is empty. The delete button is located using class$=”_delete”.

cy.get('[class$="_delete"]')
.click()
.get('.alert')
.should('be.visible')

Identify HTML elements by ‘Link Text’ in Cypress

Links are ways for connecting web resources (or web pages) to another through anchor tags (i.e., ) and href attributes. For example, as shown below, My Orders is the link text displayed on the page.

<a href="[http://automationpractice.com/index.php?controller=history](http://automationpractice.com/index.php?controller=history)">My orders</a>

We can locate links in cypress using cy.get(:contains(‘’)). Shown below is the sample implementation that demonstrates the usage of Link Text in Cypress:

it('Interact with links or button using partial text',()=>{
   cy.get('a:contains("My orders")')  // similar to partial link text
   .click()
   cy.get('.page-heading')
   .should('have.text','Authentication')
})

Shown below is the execution screenshot, which indicates that the test execution is successful:

How to use the first() method in Cypress

Consider a scenario where you want to get the list of elements in DOM having a common pattern. For example, it could be items in the list, and you might be interested in fetching only the first item from the list.

To realize such a requirement, Cypress provides two approaches to get the first element in Cypress:

eq() — Fetch element at specified in the parameter. The example for this is covered above in the by class section.
first() — Fetch only the first element from the list. It is useful when we intend to validate only the first element in the list.

To demonstrate the usage of the first() method in Cypress, we get all the links under the “item” class and use the first() method to click the first from the list.

t.only('Find elements with first()',()=>{
   cy.get('.item a')
   .first()
   .click()
   .get('.navigation_page')
   .should('contain.text','Price')
})

Shown below is the approach through which the first element is located on the desired web page:

Here is the execution snapshot:

How to use the last() method in Cypress

Akin to the first() method, Cypress’s last() method is used to locate the last element in a list of elements. This is a handy utility when working with applications like the ToDo app, where tasks are added at the end of the list and verification has to be done w.r.t the tasks’ addition (or deletion).

For demonstrating the usage of the last() method, we use the React ToDo App where we would be adding items and accessing the last item from the list.

it.only('Working with last()', ()=>{
   let task='Task at the end'
   cy.visit('[https://todomvc.com/examples/react/#/active'](https://todomvc.com/examples/react/#/active'))
   .get('.new-todo')
   .type(task)
   .type('{enter}')
   .get('.todo-list li')
   .last()
   .should('have.text',task)
})

Shown below is the execution snapshot:

Starting your journey with Cypress End-to-End Testing? Check out how you can test your Cypress test scripts on LambdaTest’s online cloud.

Test website on different browsers on a cloud platform. Get instant access of Browsers like Chrome, Safari, Firefox, Opera, Yandex, Brave, 3000+ desktop & mobile environments. Try for free!

Handling ancestors and siblings elements in Cypress

In the below HTML,

elements are grouped inside common

.
```
<div list="items">
   <ul id="social">
         <li class='facebook'>facebook</li>
         <li class='twitter'>twitter</li>
         <li class='youtube'>youtube</li>
          <li class='google-plus'>youtube</li>
   </ul>
</div>
```
There are certain cases in automation where we might need to check the sequence of the items displayed on the page and for this, we can use the next() call in the chainable form in Cypress to find multiple elements and assert the sequence. Furthermore, similar to next(), we can use the prev() call to find previous siblings of selected elements.

nextUntil() and prevUntil() are the advanced ways of using the next() and prev() *methods in Cypress. Suppose you want to validate the sequence of all the elements under siblings until some conditions set through selectors are not met. The *nextUntil()/prevUntil() methods in Cypress validate the sequence of elements until certain conditions are met.

Shown below is the implementation that demonstrates the handling of ancestors and siblings using Cypress:
```
it.only('Working with siblings & parents', ()=>{
   cy.get('#social_block ul li')
   .first()
   .should('have.class','facebook')
   .next() //to next siblings
   .should('have.class','twitter')
   .next()
   .should('have.class','youtube')
   .next()
   .should('have.class','google-plus')
   .prev() // using prev() back to previous sibling of google-plus which should be 'youtube'
   .should('have.class', 'youtube') 

   cy.get('#social_block').siblings('div')  //siblings() method to check all sibling with <div> tag
   cy.get('#social_block').next('div').should('have.length',1)  //next() to find only next div
   cy.get('#social_block ul').children() //children() method to check sibling

   cy.get('#social_block>>li').next('.youtube') //next() with selector
   cy.get('#social_block').prev('div') //prev() with selector

   cy.get('.youtube').prevAll() //yields all before youtube
   cy.get('.facebook').nextAll() //yields all after facebook

   cy.get('.facebook').nextUntil('.google-plus') //yields twitter and youtube
   cy.get('#social_block').prevUntil('[class*="footer-block"]') //
})
```
Shown below is the execution snapshot that indicates that the test execution was successful:

Take this certification to showcase your expertise with end-to-end testing using Cypress automahttps://www.lambdatest.com/blog/cypress-test-automation-framework/tion framework and stay one step ahead.

Here’s a short glimpse of the Cypress 101 certification from LambdaTest:

How to find HTML elements using Cypress XPath

Although Cypress only supports CSS selectors by default, external packages are now available that let you use XPath with Cypress. To use Cypress XPath, perform the following steps:
- Install cypress-xpath at the root of the project. using npm install cypress-path -d
- Set require(‘cypress-xpath’) under cypress/support/index.js. With this, you are all set to use XPath in tests
Using XPath is very popular with automation frameworks to locate elements in DOM. In practice, XPath uses generic format of //[@attribute=value]

// is used in Cypress to find multiple elements anywhere in the DOM. It is also called the relative path. Similarly, there is ‘/’ , which can be used to find WebElement at an absolute location. is optional; if specified, all the elements matching the conditions will be returned.

@attribute *is the attribute of the elements against which the match needs to be done. You can also use Cypress XPath functions like *contains(), text(), etc., to use more advanced features to locate relevant WebElements.

Here is the sample implementation that demonstrates the usage of Cypress XPath [ i.e. *cy.xpath() *]:
```
/// <reference types="cypress" />
/// <reference types="cypress-xpath" />
describe('Working with xpath in Cypress made easy', ()=>{
   beforeEach(()=>{
       cy.visit('[http://automationpractice.com'](http://automationpractice.com'))
   })
   it('Xpath id usages', ()=>{  
       cy.xpath('//*[[@id](http://twitter.com/id)="search_query_top"]')
       .type('Dress')
       .type('{enter}')
       .get('#center_column')
       .should('be.visible')
   })
   it('xpath class usage',()=>{
       cy.xpath('//*[[@class](http://twitter.com/class)="item"]//a')
       .eq(0) //0th element in the array of elements
       .click()
       cy.xpath('//*[contains([@class](http://twitter.com/class),"center_column")]')
       .should('be.visible')
   })
   it('Interact with  Elements using name attribute',()=>{
       cy.xpath('//input[[@name](http://twitter.com/name)="email"]')
       .type('[xyz@yopmail.com](mailto:xyz@yopmail.com){enter}')
       .get(".alert")
       .should('contain.text','Newsletter')
   })
   it.only('Interact with elements using text', ()=>{
       cy.xpath('//a[text()="Women"]')
       .should('be.visible')
   })
})
```
Shown below is the execution snapshot:

Perform free end to end Cypress testing online.

Bonus Tip: Cypress Selector Playground

Cypress has another useful feature for users that helps locate CSS selectors easily on pages directly from the test runner. Selector Playground will always match and find the unique locators for the elements to not create an issue when using them.

Shown below is the priority of the unique locators that Cypress supports:
- data-cy
- data-test
- data-testid
- id
- class
- tag
- attributes
- nth-child
Where data-* are the cypress recommended attributes added to the WebElements to isolate the elements from JS/CSS changes that might break the test.

Conclusion

Cypress is a cutting-edge browser automation solution that is fast gaining the attention of the software community. It offers a better, more effective approach to web testing and is gaining popularity due to its ability to help teams keep pace with a complete range of application testing.

By using Cypress, you can take advantage of all built-in locators and features like intelligent matching and asynchronous commands to ensure that each test has no dependencies. In this Cypress tutorial, we have seen how we can use Cypress locators to access WebElements in the DOM for realizing Cypress automation tests. Moreover, although Cypress is built with a strict “no CSS selectors allowed” stance internally, external community packages now exist that allow you to write Cypress tests using XPath.

Though Cypress has a rich feature set, the true capabilities of Cypress can only be leveraged by running Cypress tests on a scalable cloud-based cross browser testing platform like LambdaTest. LambdaTest Cypress CLI simplifies the task of executing your Cypress tests in parallel on a range of online browser and OS combinations hosted on the LambdaTest cloud grid. While writing this blog, there are 40+ browser versions for Cypress testing on the LambdaTest cloud grid.

Happy Testing!

Cypress Automation Testing Tutorial: E2E Testing with Cypress

Sachinj34 — Wed, 09 Nov 2022 09:54:22 +0000

The demand for Cypress automation testing has increased exponentially with the need to deliver products faster to the market. As per the State of JS survey 2021, Cypress awareness has climbed from 74% in 2020 to 83% in 2021 with 92% satisfaction. Cypress has emerged as a prominent tool for web automation testing in recent years addressing fundamental issues faced by modern web applications. Now Selenium testing has been widely accepted for web automation testing. Which often triggers a debate around Selenium vs Cypress, however, this article isn’t just about resolving the Selenium vs Cypress debate. This is going to be on help you perform Cypress automation testing like a pro.

In this Cypress tutorial, we talk about the Cypress test automation framework that is fundamentally and architecturally different from the Selenium test automation. How to set up and install Cypress and finally, run Cypress automation testing over hundreds of browsers and operating systems using the LambdaTest Cypress cloud.

Introduction To Cypress Automation Testing Framework

Cypress is a purely JavaScript-based front-end testing framework that lets you easily write powerful and flexible tests for your web applications. It enables advanced testing options for both unit tests and integration tests with benefits such as easy test configuration, convenient reporting, intuitive dashboard experience, and more.

As Cypress supports only JavaScript, it is widely accepted by the developer community. It also has a huge following (around 32K GitHub stars) from developers and QA engineers since the time was publicly released for the community.

So why Cypress automation is considered an alternative to Selenium?

Let’s take a look at the architectural differences between Cypress and Selenium and how Cypress is resolving the problems faced in modern-day web application testing.

Get the best out of your Cypress tests with LambdaTest’s online Cypress automation tool. Check out how you can execute your Cypress test scripts using LambdaTest’s online cloud.

Online mobile emulators online from LambdaTest allows you to seamlessly test your mobile applications, websites,and web apps on mobile browsers and mobile devices.

Understanding Selenium Architecture

Selenium WebDriver is a powerful tool for developers that lets you perform automation tests across different browsers. This architecture includes a Selenium server that runs your tests, browser driver corresponding to the browser (under test), and ’N’ number of clients that communicate with the server, typically in the language supported by the Selenium framework.

Shown below is the top-level architecture diagram of the Selenium 3 framework:

As of writing this blog, Selenium 4 is in the beta stage and open to use for the community. Selenium 4 is W3C compliant which means that test flakiness will be significantly reduced with Selenium 4. A couple of features of Selenium 3 are deprecated in Selenium 4, you can make sure to check what is new in Selenium 4 and what is deprecated in it.

Now, let’s dive into Cypress architecture and its breakthrough features to understand the difference with Selenium.

Understanding Cypress Architecture

Cypress is an open-source testing framework based on JavaScript that supports web application testing. Unlike Selenium, Cypress automation testing works completely on a real browser without the need for driver binaries. The automated code and application code share the same platform, which gives complete control over the application under test.

To describe the backend story of Cypress test automation, let’s have a look at its high-level architecture.

Cypress automation testing runs on NodeJS server, which communicates with the test runner(Browser) instrumentalized by Cypress to run the application (one of the iframe) and test code(another iframe) in the same event loop.

Here’s quick video if you have doubts regarding how to handle iframes in Cypress.

This in turn allows the Cypress automation testing code to mock and even change the JavaScript object on the fly. This is one of the primary reasons why Cypress automation testing is expected to execute faster than corresponding Selenium test automation.

Watch this video to learn how Cypress can be used to automate accessibility testing.

Key benefits of using Cypress test automation framework:

Cypress is easy to set up.
Cypress has an in-built wait for requests feature that eliminates the need to configure additional waits.
There is no need for driver binaries in Cypress automation testing and execution happens on the real browser.
Since test code and application run in the same browser, it can access application JS objects.
Cypress automation testing lets you change code and execute the same on the fly .
It provides dashboard support for detailed reporting.
It supports parallel test execution.
It has support for BDD and TDD style testing.
Cypress tests are less flaky due to the auto-wait features supported by the framework.
At each step, screen grabs that show the test behavior are captured. These can be super helpful in debugging issues with the tests.
Detailed documentation and thriving community.

This smoke testing tutorial covers what smoke testing is, its importance, benefits, and how to perform it with real-time examples.

Setting Up Cypress Automation Testing

Cypress requires Node JS (>= 12) to be pre-installed on the machine. It is bundled into a singleton package which can be added to your node_modules with npm or yarn using the following commands:

npm install cypress

yard add cypress.

Note: Make sure you have initialized your folder with npm init or package.json file is created under your project folder.

Once Cypress packages are added to your project directory, you should be able to see the cypress folder added to your project with pre-added tests for sample testing.

Cypress Test runner

To open Cypress test runner and view the pre-added tests, run the following command on the terminal:

npx cypress open

If you manage commands through package.json, then you might write it under scripts that would look something as shown below. In that case, use the following command:

npm run cy:open

{
...
"scripts":{
"cy:open":"cypress open",
...
}
...
}

Once you execute the command, the test runner would show up as seen below:

As in the above screenshot, you can choose to run the specific test by selecting one or run all at the root folder. You can also run the tests by selecting a browser via CLI:

npx cypress run -- --browser chrome

Additionally, to run specific file use:

npx cypress run -- --browser chrome --spec ''

Sample Code

actions.spec.js file is written with Mocha style and uses Cypress built-in commands to launch and interact with the browser. If you’re new to Mocha, you can refer to this Mocha tutorial.

List of a few commands that we would be using is shown below:

cy.visit() — Launch a browser with the URL provided as the argument
cy.get() — Get the elements using CSS-selectors
type()- Enter the value in input boxes
{keyCommand} like “{enter}” — Write keyboard actions
Asserts command — Cypress automation testing uses its own BDD style of assertions inspired by likes of Chai

There are a whole bunch of advanced commands around Cypress API, which you can check on the Cypress official website.

For demonstration of Cypress test automation, we use the Kitchen Sink example which is available on the official GitHub of Cypress.

describe('Actions', () =&gt; {
  beforeEach(() =&gt; {
    cy.visit('[https://example.cypress.io/commands/actions'](https://example.cypress.io/commands/actions'))
  })

  // [https://on.cypress.io/interacting-with-elements](https://on.cypress.io/interacting-with-elements)

  it('.type() - type into a DOM element', () =&gt; {
    // [https://on.cypress.io/type](https://on.cypress.io/type)
    cy.get('.action-email')
      .type('[fake@email.com](mailto:fake@email.com)').should('have.value', '[fake@email.com](mailto:fake@email.com)')

      // .type() with special character sequences
      .type('{leftarrow}{rightarrow}{uparrow}{downarrow}')
      .type('{del}{selectall}{backspace}')

      // .type() with key modifiers
      .type('{alt}{option}') //these are equivalent
      .type('{ctrl}{control}') //these are equivalent
      .type('{meta}{command}{cmd}') //these are equivalent
      .type('{shift}')

      // Delay each keypress by 0.1 sec
      .type('[slow.typing@email.com](mailto:slow.typing@email.com)', { delay: 100 })
      .should('have.value', '[slow.typing@email.com](mailto:slow.typing@email.com)')

    cy.get('.action-disabled')
      // Ignore error checking prior to type
      // like whether the input is visible or disabled
      .type('disabled error checking', { force: true })
      .should('have.value', 'disabled error checking')
  })

  it('.focus() - focus on a DOM element', () =&gt; {
    // [https://on.cypress.io/focus](https://on.cypress.io/focus)
    cy.get('.action-focus').focus()
      .should('have.class', 'focus')
      .prev().should('have.attr', 'style', 'color: orange;')
  })

}

Here is the execution snapshot of the test running on the Chrome browser:

Defaults to Spec reporter in the console output:

The amazing part to notice about execution is that it auto records your test execution and stores it as a .mp4 file for viewing or sharing with other members in the team.

Dashboard services of Cypress test automation framework

While test runner does a wonderful job of running tests and storing the recorded session for execution, Cypress automation testing provides more amazing features through its paid services. The paid services are completely optional for use but CI integration and parallelization of test runs stand out from the rest.

Some of the key features of dashboard services include:

Allows tests to run parallel with CI setup.
Allows tests to be grouped and run for multilevel environments or browsers.
Easily integrates with CI tools.
Provides insights into your historical runs.
Auto balancing feature to reduce the load on CI servers.

Configuring test to run in the dashboard

For running tests in Dashboard services, we need to create an account on Cypress Dashboard. Follow the below steps for creating a projectId and record key.

Add your projectId on the cypress.json file:

{
    "projectId": ""
}

Execute tests on Cypress Dashboard with:

npx cypress run --record --key

Try your free Cypress UI automation testing online.

In this System testing tutorial, learn why System testing is important and all the intricacies of the System testing process.

Setup Cypress Automation Testing with Cloud-based Selenium Grid

While the Cypress testing framework does let you run tests in parallel, achieving optimal browser coverage is impossible when running tests on a local setup. For optimal browser coverage, you need to upgrade your test infrastructure to a Grid-based system so that you can leverage Cypress framework for performing Cypress UI testing on different browsers and operating systems.

The need for a cloud-based cross browser testing platform like LambdaTest can help resolve the underlying problems to a great extent. Let’s now write a simple Cypress automation testing and see it in action on the LambdaTest platform.

Step 1: Create a new spec file.

Create a new spec file google.spec.js under /cypress/integration folder. In the test code, we are searching Cypress on Google and verifying the results containing Cypress as a keyword.

describe('Search Cypress on Google',()=&gt;{
  it('Open google site',()=&gt;{ 
      cy.visit('[https://www.google.com/'](https://www.google.com/'))
  })

  it('search cypress term in search bar',()=&gt;{ 
      cy.get('[name="q"]').should('be.enabled').type('Cypress{enter}')
  })

  it('Check the results of search',()=&gt;{ 
      cy.get('#search').should('be.visible')
      cy.get('#search').contains('Cypress').should('be.visible')
  })
})

Step 2: Install the LambdaTest Cypress CLI:

LambdaTest Cypress CLI enables cross browser testing with Cypress. It lets you test your application across different browsers without any hiccups!

Install lamdatest-cypress cli package using npm install lambdatest-cypress-cli under the project root directory. Once installed, lambdatest-config.json is created using the npx lambdatest-cypress-cli init command, which looks like below:

{
    "lambdatest_auth": {
       "username": "",
       "access_key": ""
    },
    "browsers": [
       {
          "browser": "Chrome",
          "platform": "Windows 10",
          "versions": [
             "90.0"
          ]
       },
       {
          "browser": "Firefox",
          "platform": "macOS Big Sur",
          "versions": [
             "82.0"
          ]
       }
    ],
    "run_settings": {
       "cypress_config_file": "cypress.json",
       "build_name": "LambdaCypress",
       "parallels": 1,
       "specs": "./cypress/integration/*.spec.js",
       "ignore_files": "",
       "npm_dependencies": {
          "cypress": "6.1.0"
       },
       "feature_file_suppport": false
    },
    "tunnel_settings": {
       "tunnel": false,
       "tunnelName": null
    }
}

In the above config file, we are specifying browsers Chrome and Firefox with the desired versions and platform configurations. As of writing this blog, LambdaTest supports the following browsers and platforms for Cypress E2E testing:

{
    "name": "cypressdemo",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "cypress open",
      "cy:run": "cypress run",
      "record": "cypress run  --record --key ",
      "lambdarun":"lambdatest-cypress run"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
      "cypress": "^5.6.0",
      "lambdatest-cypress-cli": "^2.0.4",
      "typescript": "^4.1.3"
    }
}

Run the tests using npm run lambdatest to see the tests in action on the LambdaTest Grid.

You can also view the execution logs in LambdaTest results under the ‘Automation Logs’ option.

My recommendations to folks looking for a reliable automation cloud testing framework are:

If your applications are built with modern UI frameworks and need component-based test support, then you might think to switch to Cypress eventually (if not on a priority).
Switch to Cypress automation testing if current tests show flakiness and have to be revamped for betterment.
If you are building a new automated framework that works hand in hand with development and deployment, then a POC on Cypress automation testing is worth a try!

Wrapping Up Cypress Tutorial

Trim down your test cycles by executing Cypress parallel testing online with LambdaTest. In this Cypress tutorial, we covered the basics of the Cypress test automation framework and how its modern architecture resolves the problems faced in modern web automation testing.

We also looked into its open-source test runner and paid Dashboard services and tried our hands-on with Cypress tests on cloud-based grid LamdaTest. It helps perform cross browser testing with Cypress, along with running tests in parallel on a reliable and scalable cloud grid.

Take this certification to showcase your expertise with end-to-end testing using Cypress automation testingand stay one step ahead.

Here’s a short glimpse of the Cypress 101 certification from LambdaTest:

Happy Testing!

How To Get Data Of Attributes In JavaScript With Selenium

Sachinj34 — Tue, 08 Nov 2022 07:57:59 +0000

When performing test automation, you would have come across umpteen scenarios where there is a need to verify the properties and values of the WebElements. For example, you might need to get the element’s text value in your automation test code and later verify the same against the desired value. In Selenium, the getText() method is used for fetching the text value of the WebElement.

What if the test scenario is more complicated and just getting the text value of the element is not sufficient? In such cases, you would need to use additional (and relevant) properties of the WebElements. Similarly, we may face a situation where just verifying text value is not enough for testing and we need to get additional properties of the elements that are statically or dynamically available in the DOM. Be it JavaScript or some other Selenium-supported programming language, getting specific attributes of the WebElements can be super useful in Selenium automation testing.

In this blog, we deep dive into how to get the data attribute in JavaScript for building superlative Selenium automation test scenarios.

What are Attributes in HTML

Attributes in HTML play an important role by giving additional information about the HTML elements. It also can be used to change the behavior of the elements by implementing events on them. Attributes in HTML are commonly defined using name-value pairs.

The name is the property you want to set. For example, the image tag

element in the example carries an attribute whose name is src, which indicates the source of the image.

The value indicates the value to which the corresponding property needs to be set. It is always enclosed in quotations. Here is the example which shows the value of the image with the .jpeg extension.

<img src='imagename.jpeg'/>

Attribute names and attribute values are case-insensitive. However, the World Wide Web Consortium (W3C) recommends lowercase attributes (or attribute values) as a part of the HTML 4 recommendation. You can check our earlier blog that helps you understand how to get attribute value in Selenium WebDriver.

In this Data driven testing tutorial, let us deep dive into what data driven testing is, its pros & cons, its types, data driven testing in an agile environment, benefits, and their best practices.

Commonly used Attributes in Automation Testing

Though there are a number of attributes in HTML, only some from the lot are majorly used for automation testing. Here are some of the commonly used attributes in HTML:

id: The id attribute is used to identify unique WebElements across the DOM
class: The class attribute provides a way of classifying similar WebElements
style: The style attribute is used for adding CSS styling to the WebElements
title: The title attribute is used for providing contextual information of the elements. In almost all web browsers, the title of the element can display as a tooltip on hovering the mouse over the window.

Major Types of Attributes

Listed below are some of the major categories (or types) of attributes:

Required Attributes: These attributes cannot be omitted from HTML tags. For example, an image is not displayed on the page without src for .
Optional Attributes: These attributes should be added to give more meaning to the elements. For example — title for provides a title to the image but it is not a compulsory attribute.
Event Attributes: These attributes are events that are triggered based on the user actions. For example — The onmouseover event on any html element is triggered when the user hovers the mouse pointer to that particular WebElement.
Standard Attributes: These are also known as global attributes. This category of attributes can be used in almost all the HTML tags (e.g. id, class, style, etc.).

Attributes in HTML play an increasingly important role in Selenium automation testing. Now that we have covered the basics of attributes in HTML, let’s look at the essential aspects of how to get data of attributes in Selenium JavaScript.

Why are Attributes important for Automation testing

Attributes can change the behavior of WebElements depending on the scenarios (or events) used for performing automation testing. Let’s take the case of a bus booking application. Here, booked seats are normally represented with the “Grey” colour, whereas the “Green” colour indicates that the seats are available for booking. In case there is a misrepresentation of the colours, customers would face problems in booking tickets. Customers would lose trust in the brand, which in turn could hamper the revenue of the company.

Hence, it becomes extremely critical to test whether booked and available tickets are represented with the right colour coding.

Manual testing is not preferred since it is not a scalable and reliable approach. However, such scenarios can be tested by getting data of attributes in Selenium JavaScript. Thus, it is an ideal testing approach before the build goes to the production environment.

Run your Jest automation tests in massive parallel across multiple browser and OS combinations with LambdaTest, Read more.

How to get Data of Attributes in Selenium JavaScript Tests

Selenium is a popular tool for web automation testing due to its large open source community support and ease of writing tests in the programming language of your choice. In addition, the Selenium automation framework is widely used for cross browser compatibility testing that ensures that the website (or web app) runs uniformly across different browser, platform, and device combinations.

Using Selenium and JavaScript, you can get the data of the attributes of the HTML elements displayed in the current state on the website (or web application). In addition, you can also verify the changed data of the attributes once the occurrence of events changes in the properties (e.g. colour, link updates for anchor tags, etc.) of the WebElements.

getAttribute() In Selenium

Selenium’s getAttribute() method is used to get attributes of HTML elements under test. This method is a part of the WebElement Class. The getAttribute() method can be used for getting values for different attributes like class, name,src, CSS style value, etc.

More precisely, this Selenium method returns the data of the given attribute if that particular attribute is present else, it returns null. For example — the getAttribute() method can be used to fetch the ‘value’ property of the textarea element. The “style” attribute is converted to a text representation with a trailing semicolon.

Syntax

var ele = driver.findElement(By.id('#'));
var attribute_value= ele.getAttribute('attribute_name');  // returns the attribute value

Demonstration — How to get Data of Attributes in Selenium JavaScript

Before we demonstrate how to get data of attributes in Selenium using JavaScript, it’s essential to have the basic setup ready for Selenium test automation. You can refer to our earlier blog titled Automation Testing With Selenium JavaScript to set up an environment for writing tests in Selenium with JavaScript bindings.

Alternatively, you can also check out the LambdaTest YouTube channel for videos that guide you through the Selenium JavaScript journey.

Consider a sample application that sells different types of pens online. This is what we plan to achieve as a part of the demonstration of how to get data of attributes using Selenium and JavaScript.

You can take this certification as proof of expertise in the field of test automation with JavaScript to empower yourself and boost your career.

Here’s a short glimpse of the Selenium JavaScript 101 certification from LambdaTest:

Test Scenarios

Two scenarios will be automated using Selenium and JavaScript. First, we get data of the relevant attributes on the page.

Verify if the product colour is the same as what is displayed to the user when the user tries to hover over the colour swatches shown in the filter section.
Verify whether the user sees the correct product name as it is fetched from the backend.

Implementation

The tests are run on the cloud-based Selenium Grid by LambdaTest. The advantage of cloud-based Grid is that Selenium test automation can be performed across a range of browsers, platforms, and device combinations at scale.

You can perform parallel testing in Selenium to leverage the advantages of speed and scale offered by the LambdaTest Grid. Once you create an account on LambdaTest, make a note of the username & access key from the LambdaTest profile section.

Use the LambdaTest capabilities generator to generate the desired browser capabilities against which Selenium test automation has to be performed. Set the environment variables LT_user & LT_token to LambdaTest username & access key respectively.

require('dotenv').config();
exports.config = {
  LT_user:  process.env.LT_user, // Your LambdaTest username
  LT_pass:process.env.LT_token, // Your LambdaTest token
  capabilities: {
  'build':  'Mocha-Selenium-Sample', //Build name
  'name':  'Test sample for getAttribute()', // Test name
  'platform':  'Windows 10', // OS name
  'browserName':  'chrome', // Browser name
  'version':  'latest', // Browser version
  'visual':  true, // To take step by step screenshot
  'network':  true, // To capture network Logs
  'console':  true, // To capture console logs.
  }
}

For demonstration, we use the Selenium 4 (Beta 2) version of Selenium WebDriver. To know more about the offerings of Selenium 4, please have a look at Selenium 4 on LambdaTest Learning Hub.

{
  "name": "lambdatest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "mocha --recursive --timeout 300000 ./tests/tests.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "chromedriver": "^89.0.0",
    "dotenv": "^8.2.0",
    "mocha": "^8.3.2",
    "selenium-webdriver": "^4.0.0-beta.2"
  }
}



require('chromedriver');
const assert = require('assert');
const { Builder, By } = require('selenium-webdriver');
const { config } = require('../conf/conf.js');
const conf=require("../conf/conf.js").config;
const USERNAME = conf.LT_user
const KEY = conf.LT_pass;
const GRID_HOST = 'hub.lambdatest.com/wd/hub';

describe('Check Colours in filter section', function () {
    let driver;

    before(async function () {
        let caps=conf.capabilities;
        let gridUrl='https://' + USERNAME + ':' + KEY + '@' + GRID_HOST;
        console.log(gridUrl)
        driver = await new Builder().usingServer(gridUrl).withCapabilities(caps).build();
        await driver.get('https://www.pens.com/ie/c/pens-writing');

    });

    it('Verify the colour matches the swatch title', async function () {

        let list = await driver.findElements(By.css("a[class='colour-swatch ']"));
        let colour=[];
        for (item of list) {
            //Using getAttribute to get the data
            let col = await item.getAttribute("title");
            colour.push(col)
        }
        console.log(colour)

    });

    it('Check the Product name matches with data attribute', async function(){ 
        let product_data_attribute = await driver.findElement(By.id('product-card-1'));
        let product_name_displayed = await driver.findElement(By.className('product-card__name'));
        console.table([await product_data_attribute.getAttribute('data-prod-name') , await product_name_displayed.getText()])

    });

    after(() => driver && driver.quit());
})

Code Walkthrough

Step 1:

Browser capabilities that are declared in conf.js are used in the test implementation. The test will be run across Chrome 89.0 on the Windows 10 platform. The LambdaTest Grid on which Selenium web automation is performed is set to hub.lambdatest.com/wd/hub.

let caps=conf.capabilities;
let gridUrl='[https://'](https://') + USERNAME + ':' + KEY + '@' + GRID_HOST;

Step 2:
The get method of Selenium WebDriver is used for setting the test URL.

await driver.get('[https://www.pens.com/ie/c/pens-writing'](https://www.pens.com/ie/c/pens-writing'));

Step 3:
The findElements method in Selenium is used for locating the WebElements using the CSS Selector property. You can check our blog on how pro testers make use of CSS Selectors for Selenium web automation.

let list = await driver.findElements(By.css("a[class='colour-swatch ']"));

Inspect tool in the Chrome browser is used for locating the WebElements.

Step 4:

Navigate through the entire list to get the attribute “title” for each element.

for (item of list) {
            //Using getAttribute to get the data
            let col = await item.getAttribute("title");
            colour.push(col)
}

As shown below, the title of the corresponding element in the list is White. On similar lines, you would have titles like Black, Light Blue, Blue, etc. for elements in the list.

Step 5:
In the function “Check the Product name matches with data attribute”, we first locate the WebElement using the ID property (i.e. product-card-1).

let product_data_attribute = await driver.findElement(By.id('product-card-1'));

Step 6:
Using the className property in Selenium, we locate the WebElement product-card__name

let product_name_displayed = await driver.findElement(By.className('product-card__name'));

Here is how we located the WebElement using the Inspect Tool in Chrome (or Chrome DevTools):

Step 7:
The console.table function in JavaScript is used for displaying the data in a tabular format. The getAttribute method in Selenium is used to fetch the data-prod-name attribute for each item.

console.table([await product_data_attribute.getAttribute('data-prod-name') , await product_name_displayed.getText()])

Here is how the Inspect Tool in Chrome is used to get the details of the corresponding attribute:

Execution Output

Trigger the following command on the terminal to run the example that demonstrates how to get data of attributes in Selenium using JavaScript.

npm test

Here is the execution snapshot from the terminal and the LambdaTest automation dashboard which indicates that the test execution was successful.

Run Appium mobile testing of native and web apps. Improve your app quality with instant access to real devices on LambdaTest. Register now for free!

That’s All Folks

In this blog, we learnt how to read (or get) data of attributes using JavaScript and Selenium. This can be used in Selenium web automation scenarios where you have to read the values of the attributes on the page.

The getAttribute() method in Selenium is used for reading the value of the corresponding attribute. We also implemented getAttribute() in the Selenium Grid cloud offered by LambdaTest and tested the same against the Chrome browser installed on Windows 10. Thus, browser compatibility testing at a large scale can be performed using a cloud-based Selenium Grid like LambdaTest. Furthermore, it lets you run automation tests across 2,000+ browsers and operating systems online.

It’s best to leverage the advantages offered by cloud-based Selenium Grid so that you can get data of attributes in Selenium JavaScript in a more efficient manner.

Happy Testing with Selenium and JavaScript!

How To Generate Mocha Reports With Mochawesome?

Sachinj34 — Mon, 07 Nov 2022 09:28:23 +0000

“Testing leads to failure, and failure leads to understanding.”
Burt Rutan

It goes without saying that the very essence of testing lies in locating issues so that they can be worked upon. This results in a better-quality & well-performing web application (or website) that is important in building a positive customer experience. However, as the automation test builds grow with time, maintaining and organizing the tests in a more readable format becomes even more challenging. When writing Mocha scripts for JavaScript automation testing, I came across a handy Mocha report generator utility called Mochawesome.

What does Mochawesome do?

Mochawesome is a custom Mocha reporter that allows you to create standalone HTML/CSS test reports based on the execution of your Mocha test scripts. Mochawesome brings the intuitiveness that is sorely missing in default Mocha reports. This eventually helps in managing the Selenium test automation builds in a better way.

In this article, I will showcase how to make the most of Mochawesome to generate visually appealing yet detailed test reports from your Mocha scripts.

But, before we jump into Mocha reporter, let’s first understand what the Mocha test framework is all about in the Selenium test automation world.

What Is Mocha?

Mocha is the modern-day JavaScript test framework that executes on Node.js. It is used for writing unit tests and End-to-End (E2E) automated tests for API, Web UI, performance tests, and more. Popular frameworks like Cypress, Selenium WebDriver, WebDriverIO all have supported Mocha as their core style of writing tests.

Mocha for Selenium automation testing, thus, has wide acceptance in the Javascript community because of its simple and rich features, using which you can write simply as well as complex test cases.

To get detailed information on Mocha, please refer to the Mocha Tutorial by LambdaTest.

Default Mocha Report Generator

Spec is the default reporter in Mocha. The Spec Mocha reporter generates the report as a hierarchical view. The Spec reports are nested based on test cases.

To generate reports via the default Mocha Report Generator (i.e., Spec), you don’t need to pass any particular command. The Mocha tests are executed with the help of a –spec modifier. This modifier generates a report while executing the tests.

For example, consider a simple Mocha script as search_basic.js:

const assert = require('assert')
describe('Mocha Works?', () => {
    it('Mocha Run test', () => {
        assert.ok(true, 'Failed test')
    });
    it('Should return -1 if value not present', ()=>{ 
        assert.strictEqual([1,2,3].indexOf(5), 'Failed to find')
    });
})

To execute the above tests and generate the report using Spec, run the following command on the terminal:

npx mocha --spec search_basic.js

Upon execution, the default Mocha report generator (i.e., Spec) will generate a report resembling the actual test case hierarchy. It provides the essential details about the test results.

Here are the other Mocha report generator tools:

DOT Matrix
Nyan
List
Progress

Perform browser automation testing on the most powerful cloud infrastructure. Leverage LambdaTest automation testing for faster, reliable and scalable experience on cloud.

Limitations Of Default Mocha Reporter

While these Mocha reporters generate reports on the terminal window in their different styles, they lack sufficient details of the tests. This is particularly important when running many tests, or the tests are complex in nature.

Reports are expected to visualize the test details, failures, screenshots, time for execution, logging details, and more. Hence, the Spec Mocha report generator might not be the one to meet your ‘detailed’ reporting needs.

Luckily, other Mocha report generators generate the reports in popular formats like HTML/CSS, XML, and JSON. These reports have visual appeal and provide the much-needed intuitiveness in the reports. Mochawesome is one such Mocha reporter, which is extensively used with JavaScript automation testing with Selenium.

Mochawesome — The Mocha Report Generator You Need

Mochawesome is one such Mocha Reporter that generates standalone HTML/CSS reports to visualize your JavaScript Mocha tests simply and efficiently. Mochawesome runs on Node.js (<=10) and is supported on all the leading test frameworks that support the Mocha style of writing tests.

Advantages Of Using Mochawesome Report Generator

Here are the significant advantages of Mochawesome in comparison to the other Mocha reporting tools:

Mochawesome report is designed in a mobile-friendly and straightforward way. It uses chartJS for the visualization of test reports.
It has supports display of different types of hooks — before(), beforeEach(), after(),afterAll() and so on.
Failure at a particular line of code is directly visible in the report itself due to the inline code review feature in Mochawesome.
It has support for stack trace logs and failure messages.
You can add extra context information to tests like console logs, environment details, custom messages to tests as an attachment. This gives the additional hand of information about the test cases in the report.
Since the reports are generated with standalone HTML/CSS, they can be shared offline with .HTML extension.

How To Generate Reports With Mochawesome Report Generator

To generate reports using the Mochawesome report generator, we first need to add them to our existing project. Follow the below steps to add Mochawesome to the project:

npm install mochawesome mochawesome-report-generator --save-dev

[Used to add Mochawesome only to the current directory]

npm install -g mochawesome mochawesome-report-generator

[Used to add Mochawesome globally]

Once Mochawesome is added, you can create Mocha reports using Mochawesome using the following command:

npx mocha --spec search_basic.js --reporter mochawesome

The command for Mochawesome differs from the command used with the default Mocha report generator on two terms:

reporter is used to specify that we want to use the reporter option to generate Mocha reports.
mochawesome is used to specify that we will be using the Mochawesome report generator instead of the default Mocha reporter.

Here is how you can run the command on the search_basic.js file:

As soon as you run the above command, the single test file search_basic.js gets executed. Upon execution, the report will be generated using the Mochawesome report generator in the folder mochawesome-report, which is created at the root level of the current project. This folder will contain the Mochawesome in two formats — HTML and JSON.

Mocha HTML Report By Mochawesome

Let us have a closer look at the contents of the reports generated with the help of the Mochawesome report generator.

First, let’s open the HTML report generated in the mochawesome.html file.

The HTML report generated by Mochawesome shows the test execution time, passed/failed tests, and other relevant project information. If you click on the individual tests, you can even see whether the actual tests passed/failed along with the detailed error reports.

Mocha JSON Report By Mochawesome

Let’s have a closer look at the contents of the JSON report generated in the mochawesome.json file.

{
  "stats": {
    "suites": 1,
    "tests": 2,
    "passes": 1,
    "pending": 0,
    "failures": 1,
    "start": "2021-05-24T00:57:43.809Z",
    "end": "2021-05-24T00:57:43.840Z",
    "duration": 31,
    "testsRegistered": 2,
    "passPercent": 50,
    "pendingPercent": 0,
    "other": 0,
    "hasOther": false,
    "skipped": 0,
    "hasSkipped": false
  },
  "results": [
    {
      "uuid": "49dac235-26c3-4787-aa2a-3bb9f4b95c99",
      "title": "",
      "fullFile": "",
      "file": "",
      "beforeHooks": [],
      "afterHooks": [],
      "tests": [],
      "suites": [
        {
          "uuid": "2ee44ad6-1759-4923-b1c1-8a621be13ef8",
          "title": "Mocha Works?",
          "fullFile": "C:\\Users\\RishabhPrabhu\\Documents\\mocha-selenium-sample-master\\mocha-selenium-sample-master\\specs\\search_basic.js",
          "file": "\\specs\\search_basic.js",
          "beforeHooks": [],
          "afterHooks": [],
          "tests": [
            {
              "title": "Mocha Run test",
              "fullTitle": "Mocha Works? Mocha Run test",
              "timedOut": false,
              "duration": 1,
              "state": "passed",
              "speed": "fast",
              "pass": true,
              "fail": false,
              "pending": false,
              "context": null,
              "code": "assert.ok(true, 'Failed test')",
              "err": {},
              "uuid": "6a817446-6b84-46ea-aa32-43f100fce9b2",
              "parentUUID": "2ee44ad6-1759-4923-b1c1-8a621be13ef8",
              "isHook": false,
              "skipped": false
            },
            {
              "title": "Should return -1 if value not present",
              "fullTitle": "Mocha Works? Should return -1 if value not present",
              "timedOut": false,
              "duration": 3,
              "state": "failed",
              "speed": null,
              "pass": false,
              "fail": true,
              "pending": false,
              "context": null,
              "code": "assert.strictEqual([1,2,3].indexOf(5), 'Failed to find')",
              "err": {
                "message": "AssertionError: Expected values to be strictly equal:\n+ actual - expected\n\n+ -1\n- 'Failed to find'",
                "estack": "AssertionError [ERR_ASSERTION]: Expected values to be strictly equal:\n+ actual - expected\n\n+ -1\n- 'Failed to find'\n    at Context.<anonymous> (specs\\search_basic.js:7:16)\n    at processImmediate (internal/timers.js:462:21)",
                "diff": null
              },
              "uuid": "fbc9b77c-2b64-4d25-9f32-2c3b29e957c5",
              "parentUUID": "2ee44ad6-1759-4923-b1c1-8a621be13ef8",
              "isHook": false,
              "skipped": false
            }
          ],
          "suites": [],
          "passes": [
            "6a817446-6b84-46ea-aa32-43f100fce9b2"
          ],
          "failures": [
            "fbc9b77c-2b64-4d25-9f32-2c3b29e957c5"
          ],
          "pending": [],
          "skipped": [],
          "duration": 4,
          "root": false,
          "rootEmpty": false,
          "_timeout": 2000
        }
      ],
      "passes": [],
      "failures": [],
      "pending": [],
      "skipped": [],
      "duration": 0,
      "root": true,
      "rootEmpty": true,
      "_timeout": 2000
    }
  ],
  "meta": {
    "mocha": {
      "version": "6.2.3"
    },
    "mochawesome": {
      "options": {
        "quiet": false,
        "reportFilename": "mochawesome",
        "saveHtml": true,
        "saveJson": true,
        "consoleReporter": "spec",
        "useInlineDiffs": false,
        "code": true
      },
      "version": "6.2.2"
    },
    "marge": {
      "options": null,
      "version": "5.2.0"
    }
  }
}

The Mochawesome JSON report is very much extensive and contains every bit of information related to the tests. These JSON files can be very useful to transfer data via APIs, making them ideal for other applications.

Need a great solution for Safari for windows browser testing on Windows? Forget about emulators or simulators — use real online browsers. Try LambdaTest for free!

Mochawesome Report For Parallel Tests

Check out our blog to figure out why parallel testing is important in Selenium automation testing. With Mochawesome, you can also create Mocha reports for tests run in parallel.

To do so, just add –parallel modifier in the execution command:

npx mocha --spec specs/search_basic.js --reporter mochawesome --parallel

You can also execute multiple test files in parallel and generate the report using the Mochawesome report generator. To do so, simply add the following script in the package.json file.

"scripts": {
    "test": "mocha --spec ./tests/*.js --reporter mochawesome --parallel"
  },

./tests/*.js indicates that all the test files inside the tests folder will be executed in parallel (with the help of –parallel modifier).

Run the following command on the terminal to trigger the tests:

npm test

Generating Mochawesome Report Under Custom Folder

By default, Mochawesome generates the Mocha reports by creating a folder by the name mochawesome-reports. What if you want to use the Mocha reporter to generate reports in a specific folder. WellMochawesome lets you create reports under a custom folder.

The --reporter-options modifier should generate reports under a custom folder with a custom filename. Pass the custom folder name to reportDir and custom filename path as the value to reportFilename.

npx mocha --spec specs/search_basic.js --reporter mochawesome --reporter-options reportDir=myReport,reportFilename=reportFile

As soon as the command is executed, the tests will run in Mocha style, and the reports will be generated with the help of the Mochawesome report generator. This time, the reports will be saved in the specified directory with the filename passed in the command.

As seen below, the reports were generated in the designated folder:

Mochawesome Advanced Reporter Options

The Mochawesome Mocha report generator utility also provides advanced reporter-options that work with CLI and through the .mocharc.js file. This file has to be configured for overwriting default reporter settings.

Here are the commonly used Mochawesome advanced reporter options for generating Mocha reports:

FLAG	TYPE	DEFAULT	DESCRIPTION
-f, –reportFilename	string		Filename of saved report
-o, –reportDir	string	[cwd]/mochawesome-report	Path to save report
-t, –reportTitle	string	mochawesome	Report title
-p, –reportPageTitle	string	mochawesome-report	Browser title
-i, –inline	boolean	FALSE	Inline report assets (scripts, styles)
–cdn	boolean	FALSE	Load report assets via CDN (unpkg.com)
–assetsDir	string	[cwd]/mochawesome-report/assets	Path to save report assets (js/css)
–charts	boolean	FALSE	Display Suite charts
–code	boolean	TRUE	Display test code
–autoOpen	boolean	FALSE	Automatically open the report
–overwrite	boolean	TRUE	Overwrite existing report files.
–timestamp, –ts	string		Append timestamp in specified format to report filename.
–showPassed	boolean	TRUE	Set initial state of “Show Passed” filter
–showFailed	boolean	TRUE	Set initial state of “Show Failed” filter
–showPending	boolean	TRUE	Set initial state of “Show Pending” filter
–showSkipped	boolean	FALSE	Set initial state of “Show Skipped” filter
–showHooks	string	failed	Set the default display mode for hooks
–saveJson	boolean	FALSE	Should report data be saved to JSON file
–saveHtml	boolean	TRUE	Should report be saved to HTML file
–dev	boolean	FALSE	Enable dev mode (requires local webpack dev server)
-h, –help			Show CLI help

LambdaTest — An Online Cloud-Based Solution To Meet All Your Testing Needs

The size of the Mocha reports is bound to increase when more tests are added to the test suite. This might create issues when it comes to the maintenance of the report. To top it all, the lack of advanced visual options such as graphs, plots, etc., are the major drawbacks in local Mocha report generators.

In addition to this, Mocha reporter can be used only on the local Selenium Grid. Here are some of the significant drawbacks of local Selenium setup (when used with Mocha):

Testing on a local Selenium Grid lets you test only on specific browser and OS combinations.
Running Mocha tests on browser versions other than the ones installed on your machine is not possible.
Performing parallel testing on multiple browser versions is still a challenge for Selenium Grid setup.

To overcome these challenges of local Selenium setup and Mocha reporter, you can use a cloud-based Selenium Grid like LambdaTest. The cloud-based Selenium Grid helps run Mocha tests 24/7 and saves the trouble of maintaining local infrastructure.

With LambdaTest, you can download the report of the automated tests in just a click, that too independent of the programming language being used for test case development. All you need to do is run your Mocha tests on the LambdaTest platform and use the Download Report option to download the detailed report.

Test on Windows 7 across latest and legacy Windows 7 browsers.

Running Tests On LambdaTest Platform

Let’s explore the benefits of using LambdaTest’s cloud-based Selenium Grid with an example. For demonstration, we perform a simple Google search and assert the first result with a fixed key:

var assert = require("assert"),
  webdriver = require("selenium-webdriver"),
  conf_file = process.argv[3] || "conf/single.conf.js";

var capabilities = require("../" + conf_file).capabilities;

var buildDriver = function(caps) {
  return new webdriver.Builder()
    .usingServer(
      "http://" +
        LT_USERNAME +
        ":" +
        LT_ACCESS_KEY +
        "@hub.lambdatest.com/wd/hub"
    )
    .withCapabilities(caps)
    .build();
};

capabilities.forEach(function(caps) {

  describe("Google's Search Functionality for " + caps.browserName, function() {
    var driver;
    this.timeout(0);

    beforeEach(function(done) {
      caps.name = this.currentTest.title;
      driver = buildDriver(caps);
      done();
    });

    it("can find search results" + caps.browserName, function(done) {
      driver.get("https://www.lambdatest.com").then(function() {
        driver.getTitle().then(function(title) {
          setTimeout(function() {
            console.log(title);
            assert(
              title.match(
                "Cross Browser Testing Tools | Test Your Website on Different Browsers | LambdaTest"
              ) != null
            );
            done();
          }, 10000);
        });
      });
    });

    afterEach(function(done) {
      if (this.currentTest.isPassed) {
        driver.executeScript("lambda-status=passed");
      } else {
        driver.executeScript("lambda-status=failed");
      }
      driver.quit().then(function() {
        done();
      });
    });
  });
});

Let’s create a config file parallel.conf.js for defining the desired browser capabilities to execute the tests on LambdaTest. The capabilities are generated using the Lambdatest capabilities generator.

LT_USERNAME = process.env.LT_USERNAME || "<your username>";
LT_ACCESS_KEY = process.env.LT_ACCESS_KEY || "<your access key>";

var config = {
  commanCapabilities: {
    build: "Mocha-Reporter-Sample", //Build name
    tunnel: false // Make it true to run the localhost through tunnel
  },
  multiCapabilities: [
    {
      // Desired capabilities
      name: "Win10Firefox", // Test name
      platform: "Windows 10", // OS name
      browserName: "firefox",
      version: "latest",
      visual: true, // To take step by step screenshot
      network: true, // To capture network Logs
      console: true // To capture console logs.
    },
    {
      name: "Win10Chrome", // Test name
      platform: "Windows 10", // OS name
      browserName: "chrome",
      version: "75.0",
      visual: true, // To take step by step screenshot
      network: true, // To capture network Logs
      console: true // To capture console logs.
    },
    {
      name: "Win10Edge", // Test name
      platform: "Windows 10", // OS name
      browserName: "Edge",
      version: "latest",
      visual: true, // To take step by step screenshot
      network: true, // To capture network Logs
      console: true // To capture console logs.
    },
    {
      name: "Win7Chrome", // Test name
      platform: "Windows 7", // OS name
      browserName: "chrome",
      version: "75.0",
      visual: true, // To take step by step screenshot
      network: true, // To capture network Logs
      console: true // To capture console logs.
    },
    {
      name: "Win7ChromeLatest", // Test name
      platform: "Windows 7", // OS name
      browserName: "chrome",
      version: "latest",
      visual: true, // To take step by step screenshot
      network: true, // To capture network Logs
      console: true // To capture console logs.
    },
    {
      name: "MacOsBigSurChrome", // Test name
      platform: "macos bigsur", // OS name
      browserName: "chrome",
      version: "75.0",
      visual: true, // To take step by step screenshot
      network: true, // To capture network Logs
      console: true // To capture console logs.
    },
    {
      name: "MacOsBigSurFirefox", // Test name
      platform: "macos bigsur", // OS name
      browserName: "firefox",
      version: "latest",
      visual: true, // To take step by step screenshot
      network: true, // To capture network Logs
      console: true // To capture console logs.
    }
  ]
};

exports.capabilities = [];
// Code to support common capabilities
config.multiCapabilities.forEach(function(caps) {
  var temp_caps = JSON.parse(JSON.stringify(config.commanCapabilities));
  for (var i in caps) temp_caps[i] = caps[i];
  exports.capabilities.push(temp_caps);
});

Trigger the following command to run the tests in parallel:

npm run parallel

Here is the execution snapshot is taken from the LambdaTest platform:

Now, you can easily perform browser automation testing on the most powerful cloud infrastructure. Leverage LambdaTest automation testing for faster, reliable and scalable experience on cloud.

Downloading Most Detailed And Most Intuitive Report From LambdaTest

Now to download the detailed test report, all you need to do is go to the automation dashboard and click on the three dots on the extreme right of the build. In the options that appear, click on the Download Report option. That’s it. The detailed report will be downloaded.

If you open the downloaded report, you can see detailed information on the build. We must represent the total number of tests run, tests passed, tests failed, and more.

Below is the screenshot of the Mocha report downloaded from the LambdaTest platform.

That’s not all…You can also use LambdaTest to get detailed network logs, console logs, and other relevant information obtained using Automation APIs from LambdaTest.

Conclusion

With the increased focus on Selenium automation testing, it is important that we represent the reports of automation runs in a readable format. The automation test report should encompass all the details about the test runs. This makes it easy for all the stakeholders to grasp the underlying issues in the system.

Though Mochawesome utility can be used to create HTML/CSS & JSON Mocha reports, the lack of test and report at scale makes it very difficult for enterprises to use these Mocha report generators. As a result, the cloud-based Selenium Grid like LambdaTest can be used to ensure cross-browser compatibility. It also helps in generating advanced visual reports.

Happy Learning!

Cypress Testing Framework Tutorial: Complete Guide to Test Automation with Cypress

Sachinj34 — Wed, 02 Nov 2022 12:41:22 +0000

If you are from the automation testing field, you will know that Selenium is one of the leading test automation frameworks in the market. However, as per my experience in test automation, other modern automation frameworks like Cypress testing framework are picking up pace. As per a report by Slintel, Cypress testing framework has close to a 2.61 percent share in the cross browser testing market.

I have used Selenium as well as Cypress testing framework for web automation projects, and so far, the experience with Cypress testing framework has been nothing short of fascinating. My earlier blog on introduction to Cypress test automation can be a good starting point for someone willing to make an entry into web automation testing with Cypress Testing.

Do check out the detailed Cypress tutorial on the LambdaTest YouTube channel in case you are looking to explore the immense number of features offered by Cypress Testing Framework:

You can also Subscribe to the LambdaTest YouTube Channel and stay updated with the latest tutorials around automated browser testing, Selenium testing, CI/CD, and more.

Cypress testing framework is definitely more reliable, faster, and less flaky in comparison to tests performed using other web automation frameworks. But, as it is rightly said, ‘Numbers don’t lie,’ and 3.5M+ weekly downloads for Cypress testing framework speaks a lot about the popularity of this open-source test automation framework.

In this blog on getting started with Cypress automation, I will deep dive into the integral aspects of Cypress — the popular open-source framework that has received huge acceptance from the developer & QA community.

Starting your journey with Cypress Testing Framework? Check out how you can test your Cypress test scripts on LambdaTest’s Cypress cloud.

Do you know the most wanted tools for automation testing that have climbed the top of the ladder so far? Let’s take a look.

What is Cypress Testing Framework

For starters, Cypress is an open-source automation testing framework based on JavaScript that supports Web and API application testing. Furthermore, Cypress testing framework executes tests on a real browser instance, avoiding the need to download without you needing to download browser drivers, which is normally the case with Selenium test automation.

In case you are planning to switch from Selenium to Cypress, do check out the Selenium vs Cypress blog to make an informed decision. At the time of writing this blog on getting started with Cypress testing framework, the latest version of Cypress was 9.6.0.

Unlike Selenium, which supports close to 6 popular programming languages, Cypress testing framework only supports the JavaScript language. Therefore, it is more suited for testing modern web applications that are built using popular frameworks like React, Angular, etc. Now, the important question is, does Cypress only support front-end testing? Well, definitely not!

Cypress end-to-end testing is one of the major prime uses of the framework. It is also suited for writing unit tests and integration tests. In a nutshell, architectural differences and suitability for testing modern web applications are the major benefits of the Cypress framework. Like Selenium, Cypress cloud testing lets you run Cypress tests at scale on a range of different browsers, browser versions, and operating systems online.

Cypress Architecture

As mentioned earlier, Cypress tests are run directly inside the browser. This essentially means that the Cypress testing framework has the flexibility to modify the browser behavior by listening to the altering the incoming network requests, that too on the fly!

I have witnessed that Cypress tests show comparatively less flakiness in comparison to Selenium tests since the framework does not use any kind of WebDriver. Instead, spies and stubs in Cypress let you control the behavior of functions and times at the run time.

Now that I have covered the essential aspects of the Cypress testing framework in this guide on getting started with Cypress, let me walk you through the Cypress architecture. Cypress executes on a NodeJS server that invokes the Browser (under test) for executing the application (one of the iFrames on the page) and the test code (that constitutes the other iFrame).

These are on the same session, thereby allowing the Cypress code to mock and even change the JavaScript global objects. In addition, NodeJS’s running process acts as a proxy that helps intercept the requests over HTTP protocol, helping to mock it and change the response for testing.

At the time of writing this blog on getting started with Cypress, Cypress has support for Chrome-family browsers (including Electron and Chromium-based Microsoft Edge), as well as Firefox.

Salient Features of Cypress

Here are some of the unique features of Cypress when compared to other popular test automation frameworks that are used for cross browser compatibility testing –

Cypress package comes with fully baked libraries, avoiding the need to install any major dependencies. Instead, all you need is to install Cypress!
Test code and application share the browser session, thereby resulting in a faster response time.
Cypress offers automation waits and assertions, avoiding the need to add explicit or implicit waits. However, you can refer to Explicit Waits in Selenium blog to get more information about the types of waits in Selenium. Owing to this, Cypress tests are less flaky than their equivalent Selenium tests.
Since the tests run inside the real browser, you can change the code and run only the changed test as soon as you save it.
Cypress test runner can be run seamlessly as a GUI application.
Parallel test execution and detailed report generation are supported by default within the Cypress dashboard.
Debugging tests is super breezy in Cypress.
Full page screenshots are generated automatically for every event that is fired during the test execution. Over & above, video recording of the test execution is also possible in Cypress.

So does this mean that there are no downsides of Cypress? Definitely not. Since Cypress only supports JavaScript, you need to learn coding in JavaScript if you intend to use Cypress for web automation testing.

We all know that web scraping in Selenium is easily doable. Furthermore, you have the flexibility to use popular Selenium-supported languages like C#, Python, Java, etc., to achieve the task. On the downside, Cypress is not a preferred option for web scraping (or web crawling) and performance testing.

Here are 30 Top Automation Testing Tools In 2022. Check them now.

How to install Cypress?

The Cypress dashboard and Cypress test runner are the two main components that will be installed with Cypress. Perform the below-mentioned steps to install Cypress on the local machine:

Since Cypress is built using NodeJS, you first need to install NodeJS v12+ before proceeding to install Cypress.
Once NodeJS is installed, create a project folder under the appropriate directory and initialize the folder with the npm init command.
Cypress is a single module that bundles all the required properties that you need for running the tests. Add Cypress to node_modules Installing Cypress is just a command away since it’s a single module bundling all required properties.

npm install cypress
yard add cypress
Once Cypress packages are added to the project directory, you should be able to see the Cypress folder added to your project with pre-added tests for sample testing.

Installation of Cypress Test runner

Run the command npx cypress open on the terminal to open Cypress GUI test runner and view all the preloaded tests. In case you are managing commands through the package.json file, you can add commands under scripts as shown below:

FileName — Package.json

Upon execution, the test runner would show up as seen below:

You now have the option to run a single test or all the tests from the Cypress kitchen sink example. Choose the root folder in case you intend to run all the Cypress tests.

Run the Cypress CLI on the terminal since it provides the facility of extending the choice of running tests like selecting the browser for the test. The sample command to use the Chrome browser for testing is shown below:

npx cypress run -- --browser chrome

Additionally, you can also choose a specific file to run using the –spec option:

npx cypress run -- --browser chrome --spec '<path to test file>'

Now, once we are accustomed to Cypress setup and basic sample (shown above), let us look into a simple test named checkboxes.spec.js. For demonstration, I am using the LambdaTest Selenium Playground for verifying interactions with the WebElements on the page.

Test code in Cypress is written by default in the Mocha style. Tests in Cypress start with a test suite that uses describe() or context() under which you can write multiple it() functions that correspond to a test scenario.

Here is the list of the commands that are a part of the test case:

Code Walkthrough

Let us look into the integral aspects of the code:

Enable Intellisense in the test code by including the statement ///
The cy.visit() function is used for navigating to the target URL.
The cy.get() function is used to locate the required WebElements on the page. The CSS Selector is used by Cypress for locating the elements in the DOM.
The type() function is used for entering the required text in the text box element that was located in the previous step. The type() function also accepts Keyboard actions that can be easily written with {keyCommand} like “{enter}” i.e. type(‘{enter}’)
In the example, assert is raised if the ToDo element is not checked i.e., .should(‘be.checked’)

Shown below is the execution snapshot on the Chrome browser:

The entire test execution is auto-recorded and stored in a .mp4 file so that the test execution details can be shared or viewed across teams.

Now we have seen how to install Cypress. In the next section of this article on getting started with Cypress, we will know more about the Cypress Dashboard Service.

The Cypress Dashboard Service

Cypress test runner does an excellent job in running tests and storing the execution in the form of a recorded session. However, what if you want to store and run tests remotely without stressing a lot about browser updates, test history, test analytics, etc.?

To cater to such requirements, Cypress offers amazing paid features that can be leveraged for CI integration and parallelization of test scenarios.

Here are some of the salient features of Cypress Dashboard Service:

Cypress test runner is sufficient to run serial tests. However, you would need Cypress Dashboard Service to run tests in Parallel. I personally recommend a cloud Cypress testing platform like LambdaTest that lets you run tests in parallel on a number of browser and OS combinations
Dashboard service lets you group tests and runs them with multi-level environments and browsers
It supports integration with the best CI/CD tools like Jenkins, Travis CI, and more
It provides the facility to analyze previous test runs by deep diving into the analytics of the historical data of the runs.
It auto balances load across parallel threads in order to reduce the load on CI servers.

Lets check out the most wanted automation testing tools that have climbed the top of the ladder so far? Let’s take a look.

How to run Cypress Tests on Cypress Cloud Grid

**
**Although Dashboard services provided by Cypress are useful, there are cases where test cases need to be run cross browser tests on a wide range of browsers, browser versions, and operating systems. But that’s not all. You would also need integration with a range of tools (and frameworks) like CI/CD tools, codeless automation tools, reporting tools, and more.

A cloud-based Cypress UI testing cloud-like LambdaTest solves the problems mentioned above. In addition, migrating tests to Cypress cloud grid helps improve overall browser coverage along with accelerating the speed of test case execution.

In this section of this article on getting started with Cypress, let’s execute the earlier test in checkboxes.spec.js and see it in action on the LambdaTest Grid.

Step 1: Configure LambdaTest config.

Install lambdatest-cypress cli package using npm install lambdatest-cypress-cli under the project root directory

Once installed, lambdatest-config.json is created using the following command:

npx lambdatest-cypress-cli init

I have specified Chrome and Firefox browsers (i.e., the browsers on which tests have to be performed) in the config file. Platform name and version are also specified in the config file.

Shown below is the sample package.json file:

Run the tests using the lambdatest-cypress run to see the tests in action on LambdaTest Cypress Grid.

Take this certification to showcase your expertise with end-to-end testing using the Cypress testing framework and stay one step ahead.

Here’s a short glimpse of the Cypress 101 certification from LambdaTest:

Conclusion

Cypress is one of the widely used automation testing frameworks for automated testing of modern web applications. The features provided by the Cypress framework can be further enhanced by running tests at scale on a cloud-based Cypress Grid.

This is where LambdaTest Cypress CLI comes into the picture. It lets you run tests at an expedited pace on a range of popular browsers and platforms. I hope that this guide on getting started with Cypress will help you kick-start your Cypress UI automation journey. Do leave your feedback in the comments section.

Happy Testing!
__

Forem: Sachinj34

How To Fill And Submit Forms In Cypress

What are Forms in HTML documents?

Form submission with Cypress

Input Elements

Text Fields

Password Field

Checkboxes

TextArea

Dropdown Menu

Submit and Reset Buttons

File Upload Testing in Cypress

Handling Date picker in Form using Cypress

Using Cypress to fill out Forms and submit them on a Cloud Grid

Demo: Using Cypress to fill out Forms

Conclusion

How To Find HTML Elements Using Cypress Locators

What are Cypress Locators

How to use Locators in Cypress

Identify HTML elements using ‘ID’ Cypress locator

Identify HTML elements using ‘NAME’ Cypress locator

Identify HTML elements using ‘Attributes’ in Cypress

Identify HTML elements using ‘By Class’ in Cypress

Identify HTML elements by ‘Link Text’ in Cypress

Handling ancestors and siblings elements in Cypress

How to find HTML elements using Cypress XPath

Bonus Tip: Cypress Selector Playground

Conclusion

Cypress Automation Testing Tutorial: E2E Testing with Cypress

Introduction To Cypress Automation Testing Framework

Understanding Selenium Architecture

Understanding Cypress Architecture

Setting Up Cypress Automation Testing

Setup Cypress Automation Testing with Cloud-based Selenium Grid

Wrapping Up Cypress Tutorial

How To Get Data Of Attributes In JavaScript With Selenium

What are Attributes in HTML

Commonly used Attributes in Automation Testing

Major Types of Attributes

Why are Attributes important for Automation testing

How to get Data of Attributes in Selenium JavaScript Tests

getAttribute() In Selenium

Demonstration — How to get Data of Attributes in Selenium JavaScript

That’s All Folks

How To Generate Mocha Reports With Mochawesome?

What Is Mocha?

Default Mocha Report Generator

Limitations Of Default Mocha Reporter

Mochawesome — The Mocha Report Generator You Need

Advantages Of Using Mochawesome Report Generator

How To Generate Reports With Mochawesome Report Generator

Mocha HTML Report By Mochawesome

Mocha JSON Report By Mochawesome

Mochawesome Report For Parallel Tests

Generating Mochawesome Report Under Custom Folder

Mochawesome Advanced Reporter Options

LambdaTest — An Online Cloud-Based Solution To Meet All Your Testing Needs

Running Tests On LambdaTest Platform

Downloading Most Detailed And Most Intuitive Report From LambdaTest

Conclusion

Cypress Testing Framework Tutorial: Complete Guide to Test Automation with Cypress

What is Cypress Testing Framework

Cypress Architecture

Salient Features of Cypress

How to install Cypress?

Installation of Cypress Test runner

The Cypress Dashboard Service

How to run Cypress Tests on Cypress Cloud Grid

Conclusion