DEV Community: Dilpreet Johal

Common Cypress Interview Questions

Dilpreet Johal — Mon, 04 Sep 2023 13:35:02 +0000

Here's a quick overview at some of the common Cypress Interview questions you might face.

What is Cypress?

Cypress is a user-friendly, end-to-end testing framework that uses JavaScript language. It works directly in the browser, making tests faster and more accurate as they mimic real user interactions.

How Would You Differentiate Cypress from Selenium?

While both are popular tools for web application testing, Cypress stands out due to its browser-based architecture and exclusive use of JavaScript, offering a more direct and real-time feedback experience than Selenium.

Key Features of Cypress?

Cypress has some key unique features such as automatic waiting, real-time reloads, and simple debugging capabilities. It also offers visual testing and network traffic control which makes testing easier.

What Are the Steps to Install and Configure Cypress?

To setup Cypress, you just need few npm commands to install and start the Cypress Test Runner. And, then you can begin writing your tests

How Is a Basic Test Case Created in Cypress?

Writing a basic test case is easy and straightforward -

describe('Basic Test Case', () => {
  it('should visit SDET Unicorns website and verify its title', () => {
    cy.visit('https://sdetunicorns.com')
    cy.title().should('eq', 'Master Software Testing & Automation Online | SDET Unicorns')
  })
})

How Does Cypress Manage Asynchronous Operations?

Cypress has a unique approach to handling asynchronous operations. It uses its own commands that automatically manage the sequence of operations, removing the need for explicit waits in your tests.

Can You Mention Some Common Commands Used in Cypress?

Cypress offers a variety of commands that help you interact with the DOM and make assertions. Some commonly used commands include cy.visit(url), cy.get(selector), and cy.click(), to name a few.

Ready to Dive Deeper?

If you're keen to diving deeper and explore more detailed interview questions, check out the full blog here - Top Cypress Interview Questions and Answers

Linux Command Line Essentials for Beginners

Dilpreet Johal — Mon, 17 Apr 2023 13:36:11 +0000

I am starting a new series where I’ll be diving into the essentials of the Linux command line for beginners. Before we jump into that, let’s go over why it’s important to learn command line as well as take a look at a brief history of operating systems.

Why Learn the Linux Command Line?

If you’re new to this topic, Linux is a free and open-source operating system that powers everything from supercomputers to smartphones and smartwatches. The command line, or terminal, is the primary way we interact with and control Linux systems. You might be wondering, “Why do I need to learn this when I can just use the GUI (graphical user interface)?” Trust me, learning the command line is a fundamental skill in the software industry, with numerous advantages:

Efficiency: The command line allows you to perform tasks quickly by typing commands. Once you become comfortable with the command line, you can navigate through directories, copy, move, and delete files or even perform batch processing on multiple files together much faster.

Automation: The command line lets you automate repetitive tasks, saving time and allowing you to focus on more important things. Examples include backing up files or directories, renaming files in batches, or scheduling tasks using cron jobs.

Advanced Features: Some features and settings are only accessible through the command line, giving you more control over your system. This enables you to perform tasks like running shell scripts or managing servers.

Versatility: The command line can be used on various operating systems, including Linux, macOS, and Windows. Regardless of the platform, your command line skills will always be useful.

High Demand: Command line skills are sought after by many companies for roles in software development, system administration, and network engineering. Learning the command line can open up a wealth of new job opportunities.

A Brief History of Operating Systems

Before we jump into commands, let’s get a good grasp of the history of operating systems. We can group them into two main families: Windows and Unix/Unix-like systems.

Unix and Unix-like Systems: The Early Days

Unix was created in the late 1960s and is often seen as the starting point of modern operating systems. Developed at Bell Labs, Unix was designed to be easy to move around, handle multiple tasks, and support many users. Over time, Unix split into different versions, including commercial ones like Solaris and open-source options like Linux and FreeBSD.

Linux, a Unix-like operating system, was made by Linus Torvalds in 1991. This open-source OS became super popular around the world, with many distributions like Ubuntu, Fedora, and Debian catering to different user needs. Its strength, flexibility, and affordability have helped it spread across servers, embedded systems, and personal computers.

Windows: The Friendly OS

On the other hand, Microsoft introduced Windows in 1985 as an add-on to the MS-DOS operating system. Windows quickly became popular as a user-friendly, graphical operating system. It has gone through many versions, with the latest being Windows 11. Even though it’s mostly known for being on desktop computers, Windows has also made its way into servers and other embedded systems.

Similarities Between Unix-like and Windows Operating Systems

When looking at commands, it’s important to know that Unix-like operating systems, like Linux and macOS, have a lot in common. They use a similar structure for directories and file permissions, and many command-line tools work similarly across these platforms. So, learning the command line on one platform helps you use that knowledge on another, making your skills super handy.

By understanding the history of these operating systems, you’ll get a better feel for how the command line has grown and why it’s so important in computing. As we go through this series, you’ll see that your command line skills can be super helpful, no matter which platform you’re working with.

Check out this video to learn more –

Stay Tuned for More Linux Command Line Insights

Don’t miss our upcoming videos, where we’ll start diving into the command line essentials. If you’re looking to kickstart your career in software development, software testing or DevOps, be sure to subscribe to the channel and follow along with this series.

👩🏻‍💻 Unleash Your Full Potential and Take Your Career to the Next Level with SDET-U Academy👇🏻
Join Academy

📧 Subscribe to my mailing list to get access to more content like this as well as be part of amazing free giveaways.

👍 You can follow my content here as well -

...

Thanks for reading!

Postman Data Driven Testing using Newman CLI

Dilpreet Johal — Thu, 02 Mar 2023 13:24:02 +0000

API testing is a crucial aspect of modern software development, and data-driven testing is an effective technique to test APIs with varying input data. Newman CLI is a powerful tool that can be used to automate API testing and perform data-driven testing. Let’s see how we can do that –

What is Newman CLI?

Newman CLI is a command-line tool developed by Postman that allows you to run Postman collections from the command line. It provides a way to execute Postman collections in an automated and continuous manner, making it a popular tool for API testing and integration testing.

Prerequisites

Create a Postman collection with the requests to be tested.
Optionally, write tests for each request to validate the expected results.
Export the collection so that it can be accessed by Newman CLI.
Prepare a data file in CSV or JSON format to provide different input data for each test run.

How to do Data Driven Testing using Newman CLI?

To conduct data-driven testing with Newman CLI, you must execute the collection with the newman run command and then use the -d flag to provide the data file. Here’s an example:

newman run sample.postman_collection.json -d data.json

The above command will run all the iterations and return similar results –

To learn more, check out the video below –

Conclusion

Data-driven testing is a powerful technique to test APIs with varying input data. Newman CLI is a powerful tool that can be used to automate API testing and perform data-driven testing. With Newman CLI, you can easily perform data-driven testing and catch bugs and issues early in the development cycle.

👩🏻‍💻 Unleash Your Full Potential and Take Your Career to the Next Level with SDET-U Academy👇🏻
Join Academy

📧 Subscribe to my mailing list to get access to more content like this as well as be part of amazing free giveaways.

👍 You can follow my content here as well -

...

Thanks for reading!

Data Driven Testing using JSON file in Postman

Dilpreet Johal — Mon, 06 Feb 2023 12:38:03 +0000

In this blog post, we’ll look at how to use a JSON file in Postman to conduct data-driven testing. This method is useful when testing a single endpoint with many sets of data. We will also look at how to access nested data in JSON using pre-requisite scripts.

Prerequisites:

Basic knowledge of JavaScript and Postman.
a JSON data file that you can use as the test’s source.

Prepare your JSON data file

To get started, gather all the data you’ll need for your tests into a single JSON data file. Here’s an example of the JSON data:

[
  {
    "email": "user1@example.com",
    "roles": ["admin", "user"],
    "profile": {
      "name": "User 1",
      "address": "123 Main St."
    }
  },
  {
    "email": "user2@example.com",
    "roles": ["user"],
    "profile": {
      "name": "User 2",
      "address": "456 Main St."
    }
  }
]

Create a new Postman request

Once the data is ready, you can create your Postman request for your endpoint. Replace the values in the request body with variables, like this:

  {
    "email": "{{email}}",
    "roles": ["{{roles}}"],
    "profile": {
      "name": "{{name}}",
      "address": "{{address}}"
    }
  }

Setup Tests

Before you run the request, it’s important to set up your tests to ensure you receive the expected results. Here’s an example:

pm.test("Status code is 201", function () {
    pm.response.to.have.status(201);
});

pm.test("Verify data", function () {
    var jsonData = pm.response.json();
    pm.expect(jsonData.email).to.eql(data['email']);
    pm.expect(jsonData.profile.name).to.eql(data['profile']['name']);
    pm.expect(jsonData.profile.address).to.eql(data['profile']['address']);
    pm.expect(jsonData.profile.company).to.eql(data['profile']['company']);
});

Run Collection

To organize your requests, add the request to a collection in Postman and then import the JSON file. Postman will automatically map the data for you. Once that’s done, hit the ‘Collection Run’ button to see the results.

You’ll notice that the nested JSON data didn’t get mapped properly as it’s not supported by Postman at the moment. To handle this issue, you’ll need to do custom mapping in the pre-request script, like this:

Handling Nested JSON Data in Postman

One issue that you may encounter while working with Postman is the mapping of nested JSON data. Unfortunately, this feature is not supported in Postman at the moment. But, don’t worry! You can easily handle it by writing a custom mapping in the pre-request script.

Here’s an example of how you can do this:

pm.collectionVariables.set("name", data["profile"]['name']);
pm.collectionVariables.set("address", data["profile"]['address']);
pm.collectionVariables.set("company", data["profile"]['company']);

By following these steps, you can ensure that your tests run correctly and produce the expected results.

Check out the video below for a detailed explanation

👩🏻‍💻 Unleash Your Full Potential and Take Your Career to the Next Level with SDET-U Academy👇🏻
Join Academy

📧 Subscribe to my mailing list to get access to more content like this as well as be part of amazing free giveaways.

👍 You can follow my content here as well -

...

Thanks for reading!

Postman Data Driven Testing with CSV file

Dilpreet Johal — Mon, 23 Jan 2023 14:02:23 +0000

Data-driven testing is a powerful technique for automating the testing process with Postman. By using a CSV data file, you can run the same test multiple times on different datasets, saving time and reducing the amount of code needed. In this tutorial, I will show you how to import a CSV file into Postman and use it for data-driven testing.

Requirements:

Basic knowledge of Postman and JavaScript
A CSV data file as a source for your test

Prepare your CSV data file

The first step is to prepare your CSV data file. Make sure the column names match the variables you will use in your tests. In this case, we have columns for User ID, Title, and Body. Each row should contain data for one test case.

Create a new request and set up your test

To create a new request in Postman, click on the "New" button and select "Request." In the request, you can set up your test by using variables from the CSV data file. For example, you can use the userid, title, and body variables in the request body to send different data for each test case.

Create a collection

To organize your requests, add the request to a collection in Postman and then click on 'Run Collection' button.

Import CSV Data file

To use the data from your CSV file, import it into the Postman collection by clicking on 'Select File' button. This will map the data from the CSV file into a table. Make sure the mapping is correct before proceeding.

Run the collection

With the collection set up and the CSV data imported, you can now run the collection by clicking on the 'Run Collection' button. This will automatically run each request in the collection, using the corresponding data from the CSV file for each test.

Check out the video below for a detailed explanation

By using a CSV data file in Postman, you can easily perform data-driven testing and automate your testing process. This technique can save you time and effort by allowing you to reuse the same test with different data sets.

👩🏻‍💻 It's time to advance your career by joining the SDET-U Academy today 👇🏻
Join Academy

📧 Subscribe to my mailing list to get access to more content like this as well as be part of amazing free giveaways.

👍 You can follow my content here as well -

...

Thanks for reading!

Test Automation with AI (ChatGPT) from scratch!

Dilpreet Johal — Wed, 11 Jan 2023 14:10:58 +0000

In the video below, I will be utilizing ChatGPT, to assist me in building test automation scripts using the Cypress framework. I will ask the chatbot five questions, each of which will become progressively more challenging in order to test its knowledge and capabilities.

ChatGPT is a chatbot developed by OpenAI that utilizes a highly trained language model to interact with users in a natural, conversational manner. This text-based artificial intelligence tool has gained significant popularity in the tech industry for its ability to provide comprehensive answers to a wide range of questions, but it particularly excels at generating coding solutions on the fly.

👩🏻‍💻 It's time to advance your career by joining the SDET-U Academy today 👇🏻
Join Academy

📧 Subscribe to my mailing list to get access to more content like this as well as be part of amazing free giveaways.

👍 You can follow my content here as well -

...

Thanks for reading!

Reading a CSV file in Cypress using fixture

Dilpreet Johal — Mon, 02 Jan 2023 01:08:21 +0000

In this tutorial, we will learn how to read a CSV (Comma Separated Values) file in Cypress for data-driven testing. Data-driven testing is a testing technique where the test inputs and expected results are read from a data source, such as a CSV file. This allows us to run the same test multiple times with different data sets, reducing the amount of code we need to write and maintain.

Prerequisites:

Basic knowledge of Cypress and JavaScript
Node.js and npm installed on your machine
A CSV file to use as a data source

Step 1: Install the neat-csv package

The first step is to install the neat-csv package, which is a simple utility for parsing CSV files into JavaScript objects. Open a terminal and navigate to the root directory of your project. Then, run the following command:

npm install neat-csv

Step 2: Read the CSV file

Next, we will use a before hook to read the CSV file and convert it into an object. before hooks in Cypress are functions that run before each test in a test suite. In this case, we will use the fixture method to read the CSV file, and then pass the contents to the neatCSV function to parse it into an object.

Here is the code:

const neatCSV = require('neat-csv');
describe('Read CSV', () => {
  let table;
  before(() => {
    cy
      .fixture('contact.csv')
      .then(neatCSV)
      .then(data => {
        table = data;
      })
  });

Step 3: Use the data in a test

Now that we have read the CSV file and converted it into an object, we can use the data in a test. In this example, we will visit a form on a website, and then use the data from the CSV file to fill in the form fields.

First, we will use the visit method to navigate to the form page. Then, we will use the get method to find the form fields, and use the type method to fill them in with the data from the CSV file.

To make the test more interesting, we will use a random row from the table object each time the test is run. To do this, we will use the Math.random function to generate a random number between 0 and the length of the table object, and then use Math.floor to round it down to the nearest integer. This will give us a random index for the table array.

Here is the code:

  it('Fill input fields using CSV data', () => {
    cy.visit('https://practice.automationbro.com/contact/');
    const randomRow = Math.floor(Math.random() * table.length)
    cy.get('.contact-name input').type(table[randomRow]['name'])
    cy.get('.contact-email input').type(table[randomRow]['email'])
    cy.get('.contact-phone input').type(table[randomRow]['phone'])
    cy.get('.contact-message textarea').type(table[randomRow]['message'])
  });

Step 4: Run the test

Now that we have written our test, we can run it using the cypress run command in the terminal. If everything goes well, the test should run and fill in the form fields using data from a random row in the CSV file.

Check out the video below for a detailed explanation

Code Access: Full code can be accessed here.

Conclusion:

In this tutorial, we learned how to read a CSV file in Cypress for data-driven testing. By using the neat-csv package and a fixture, we were able to parse the CSV file into an object and use the data in a test. This technique can save us time and effort by allowing us to reuse the same test with different data sets by using a before hook.

👩🏻‍💻 It's time to advance your career by joining the SDET-U Academy today 👇🏻
Join Academy

📧 Subscribe to my mailing list to get access to more content like this as well as be part of amazing free giveaways.

👍 You can follow my content here as well -

...

Thanks for reading!

Playwright with Typescript tutorial on FIFA World cup site

Dilpreet Johal — Mon, 05 Dec 2022 13:19:22 +0000

In this video, we will automate the FIFA world cup site using Playwright and Typescript. Let's do a quick overview on Playwright:

Playwright is one of the most popular end-to-end automation tools in the market today. It works with multiple languages such as Typescript, JavaScript, Python, .Net, and Java. It supports all the major browsers, such as Chrome, Firefox, and Safari, and more. Getting started with Playwright is easy, with just a few steps you can have your first test running.

The video below will cover the following topics -

Setup and installation: We will go through the process of installing and setting up Playwright, as well as the necessary dependencies and tools.
Project and config overview: We will provide an overview of the project structure and configuration, including how to define and organize tests, and how to customize settings and preferences.
Writing the first Playwright test: We will show you how to write your first Playwright test, using Typescript and the Playwright API. This will include an introduction to the syntax and concepts, and a step-by-step guide to creating and running your first test.
Playwright page locator: We will explain how to use the Playwright page locator, a powerful tool for identifying and selecting elements on a web page. Working with multiple elements: We will demonstrate how to work with multiple elements on a page and retrieve text from it.
Disabling HTML report: We will show you how to disable the HTML report, which is a feature of Playwright that automatically generates an HTML report of your test results.
Playwright debugger / inspector: We will introduce you to the Playwright debugger and inspector, which are powerful tools for debugging and inspecting your tests in real-time. This will include an overview of the different debugger and inspector features, and how to use them to diagnose and fix problems with your tests.
And much more..

👩🏻‍💻 Access the source code here.

To learn more about Playwright, check out my full course on Playwright here -

https://automationbro.com/playwright-course

👩🏻‍💻 It's time to advance your career by joining the SDET-U Academy today 👇🏻
Join Academy

📧 Subscribe to my mailing list to get access to more content like this as well as be part of amazing free giveaways.

👍 You can follow my content here as well -

...

Thanks for reading!

Automate One Time Password (OTP) using Cypress

Dilpreet Johal — Mon, 14 Nov 2022 13:52:27 +0000

Automating One Time Password (OTP) is always a bit challenging as you need to work with a third-party service to send/receive messages. Let's take a look at how we can do that using Cypress ...

⚙️ Dependencies

Cypress: browser automation framework (can be replaced with any other JS browser automation framework)
Receive SMS: to generate a temporary phone number and receive SMS. Note: this can easily be replaced with a paid service such as Twilio, SMSArc, etc..
GitHub: example site to test OTP on

In this video, we will cover step-by-step how to automate OTP using Cypress:

👩🏻‍💻 Access the source code here.

To learn more about Cypress, check out my free Cypress tutorial series here -

https://www.youtube.com/watch?v=krpKuSqQ0XM&list=PL6AdzyjjD5HAr_Jq1hwpFUIO49uyBZ9ma

👩🏻‍💻 It's time to advance your career by joining the SDET-U Academy today 👇🏻
Join Academy

📧 Subscribe to my mailing list to get access to more content like this as well as be part of amazing free giveaways.

👍 You can follow my content here as well -

...

Thanks for reading!

Cross Browser Testing in Selenide

Dilpreet Johal — Mon, 31 Oct 2022 12:41:26 +0000

In this post, we will learn how to do cross-browser testing in Selenide. Selenide makes it really easy to be able to run tests on different browsers without having to do any additional configuration. Let’s take a look at how to do that –

Pre-requisite

The one pre-requisite to run tests on different browser is to have Maven installed on the system so that you can execute tests and point to any browser of your choice. You can use the following links to setup Maven in macOS and Windows:

Maven macOS Instructions: https://mkyong.com/maven/install-maven-on-mac-osx/
Maven Windows Instructions: https://mkyong.com/maven/how-to-install-maven-in-windows/

Verify Maven Installation:
Run mvn -version to make sure maven is successfully installed in your machine.

Cross Browser Testing

Once you have Maven installed, you can start to run Maven commands and specify the browser you want to run tests on –

mvn test -D selenide.browser=firefox -D test=HomeTest

The above command will run the HomeTest file in the Firefox browser. You can even pass in additional flag to the Maven command such as running tests in headless browser –

mvn test -D selenide.browser=firefox -D selenide.headless=true -D test=HomeTest

To learn more, check out the video below –

👩🏻‍💻 It's time to begin your SDET journey by joining the SDET-U Academy today 👇🏻
Join Academy

📧 Subscribe to my mailing list to get access to more content like this as well as be part of amazing free giveaways.

👍 You can follow my content here as well -

...

Thanks for reading!

Cypress Variables | How does it work?

Dilpreet Johal — Tue, 25 Oct 2022 14:58:06 +0000

In this tutorial, we will learn how to handle variables in Cypress. Dealing with variables in Cypress is not as straightforward as it seems due to the way Cypress work with promises. Let’s take a look at it –

Understanding the problem

  it("gets the text of the heading and assert the value", () => {
    // get the text
    cy.get("h1.elementor-heading-title").then(($heading) => {
      expect($heading.text()).to.eq("Think different. Make different.");
    })
  });

In the example above, we are trying to get the text of the element and then do an assertion on it. What if you want to use the heading text outside the cy.get block, how can you do that? Simply, creating a variable like this would not work –

  it("gets the text of the heading and assert the value", () => {
    let headingText = '';
    // get the text
    cy.get("h1.elementor-heading-title").then(($heading) => {
      headingText = $heading.text()
      expect($heading.text()).to.eq("Think different. Make different.");
    })
    // X - would print just an empty string
    console.log(headingText); 
  });

The reason console.log would not print anything is because it will get printed even before the cy.get command gets executed as cy.get is an async command. So we need a way to wait for the cy.get command to be completed first and then print out our text.

Handling Variables in Cypress

There’s 2 ways you can handle variables within a test block in Cypress.

Accessing variable within the same block

  it("gets the text of the heading and assert the value", () => {
    // get the text
    cy.get("h1.elementor-heading-title").then(($heading) => {
      let headingText = $heading.text()
      expect($heading.text()).to.eq("Think different. Make different.");
      // Use the heading text value here
      console.log(headingText);   
    })
  });

This one is pretty straightforward as you can continue to created nested blocks within the same block as long as you need access to that context or variable.

Accessing variable outside the block

  it("gets the text of the heading and assert the value", () => {
    // get the text
    cy.get("h1.elementor-heading-title").then(($heading) => {
      let headingText = $heading.text();
      expect($heading.text()).to.eq("Think different. Make different.");

      // return the text so it can be used in .then as a parameter
      return headingText; 
    }).then(hText => {
      // hText param holds the value of the above returned text
      console.log(hText);
    })
  });

Using the .then block, you can access the previously returned value and then pass it as a parameter to the .then block. This way you can keep chaining multiple methods together if it’s within the same context.
Important thing to notice here is that it will only work with .then block not .should.

To learn more, check out this video below –

👩🏻‍💻 It's time to begin your SDET journey by joining the SDET-U Academy today 👇🏻
Join Academy

📧 Subscribe to my mailing list to get access to more content like this as well as be part of amazing free giveaways.

👍 You can follow my content here as well -

...

Thanks for reading!

Page Object Model – Selenide Tutorial Series

Dilpreet Johal — Mon, 10 Oct 2022 13:38:59 +0000

In this tutorial, we will cover how to implement Page Object Model in Selenide. Page Object Model is a popular design pattern to improve code readability and maintainability as well as to reduce duplicacy in your code. Selenide makes it really to get Page objects setup, let’s take a look at how we can do that –

Setup Page Class

We first need to setup a page class where we can store all our page locators and page methods.

public class HomePage {
// add locators and methods here
}

Setup Page Locators

Once base page class is setup, we can start adding the Page locators to the class –

public class HomePage {
    public SelenideElement getStartedBtn() {
        return $(By.id("get-started"));
    }
    public SelenideElement headingTitle() {
        return $("h1");
    }
    public SelenideElement logoLink() {
        return $(By.xpath("//a[@class=\"custom-logo-link\"]"));
    }
    public ElementsCollection linksList() {
        return $$("#primary-menu li[id*=menu-item]");
    }
}

Note: Make sure to import all the necessary packages from Selenide if auto-import doesn’t work.

Setup Page Methods

Now that we have the page locators setup, we can start adding in necessary page methods to reduce code duplicacy –

    public HomePage open() {
        Selenide.open("https://practice.automationbro.com/");
        return this;
    }
    public void assertUrl(String expectedUrl) {
        String url = WebDriverRunner.url();
        assertEquals(url, expectedUrl);
    }

Update Tests to use POM

In your test file, you need to initialize the HomePage class and then start replacing your locators and adding in page locators as well as page methods. Here’s an example –

    @Test
    public void testInteractingWithElements() {
        // Open page url
        home
            .open()
            .assertUrl("https://practice.automationbro.com/");
        // By ID
        home.getStartedBtn().click();
        // verify heading by CssSelector
        home.headingTitle()
            .shouldHave(text("Think different. Make different."));
        // verify by XPath
        home.logoLink()
            .should(be(visible));
    }

As seen above, in just few steps you can implement Page object model concepts in Selenide. To learn more, check out this video below –

👩🏻‍💻 It's time to begin your SDET journey by joining the SDET-U Academy today 👇🏻
Join Academy

📧 Subscribe to my mailing list to get access to more content like this as well as be part of amazing free giveaways.

👍 You can follow my content here as well -

...

Thanks for reading!