How ChatGPT Writes Code for Automation Tool Cypress

In its first week of launch, ChatGPT shattered Internet records by becoming extremely popular. As a person who works in QA automation, my initial thinking when I started looking into it was how to use this wonderful platform to make the jobs of testers for Web and UI automation simpler. 

ChatGPT may be used to write code in a variety of programming languages and technologies. After more investigation, I made the decision to create some scenarios using it. I have created some use cases around UI, API, and Cucumber feature file generation using ChatGPT.

We can use ChatGPT to generate the Code but we can’t say that the generated code is perfectly fine. We have to do minor tweak in the generated code.

The aim of this blog is:

1. How can you set up ChatGPT
2. To know ChatGPT is really helpful in generating Cypress/JavaScript Code.
3. How Can we generate an automation script for:

• UI Automation Using Cypress /Javascript
• API Automation Using Cypress /Javascript
• Generate Cucumber Feature file

What Is ChatGPT?

ChatGPT is a variant of the GPT (Generative Pre-trained Transformer) language model that is specifically designed for use in chatbots and conversational systems. Like other GPT models, ChatGPT is trained on a large dataset of human-generated text and uses this training to generate human-like responses to prompts.

However, ChatGPT has been modified to better handle the specific requirements of chatbot systems, including the ability to handle short, informal prompts and responses and to maintain context and coherence over the course of a conversation.

What Is Cypress?

Cypress is a JavaScript-based test automation framework for web applications. It is designed to make it easier to write and run automated tests for web applications and includes features such as a command-line interface (CLI), real-time reloading, and the ability to run tests in parallel.

Cypress is particularly useful for testing modern web applications that use complex client-side interactions and asynchronous behavior. It allows developers to write tests that closely mimic the way a user would interact with the application and provides detailed feedback on the results of those tests.

Cypress is often used in conjunction with other tools, such as continuous integration (CI) platforms and testing frameworks, as part of a larger testing strategy. It is particularly popular among developers who are looking for a fast, reliable, and easy-to-use testing solution for their web applications.

Set Up ChatGPT

Steps:

1. Search the text ChatGPT in Google.
2. Open the first link in the search results.
3. Click on “Try CHATGPT.” It will first check for a secure connection after that, it provides two options “Login” and “Sign up.”

5. After the above step, it will ask you to enter your mobile number, and one code will be received. After entering the code user sign up for ChatGPT. The below screen opens finally once you click on the Next buttons in the wizard.

Let’s Ask ChatGPT To Generate Automation Script

In this section, I am going to cover some scenarios by asking ChatGPT to generate the script for

1. UI Automation Script Using Cypress /Javascript
2. API Automation Script Using Cypress /Javascript
3. Generate Cucumber .feature file for different scenarios

Generate UI Automation Script for Cypress/ Javascript

Below are some scenarios that I have covered to generate the script In UI using Cypress/Javascript.

I asked ChatGPT the below query to generate the script.

Question 1:

Write Cypress/ Javascript code for opening the URL of the site.

Below is the generated Code by ChatGPT for the asked query:

When I ran the above code, in reality, it was working fine without any issues.

describe('My test', () => {
  it('Visits the website', () => {
    cy.visit('http://qaautomationlabs.com');
  });
});

Question 2:

Write Cypress/ JavaScript code for opening the URL of the site and print the title.

Below is the generated Code by ChatGPT for the asked query:

When I ran the above code, in reality, it was working fine without any issues, and you can see its print title in the console.

describe("My Test Suite", function () {
  it("My Test Case", function () {
    cy.visit("http://qaautomationlabs.com/"); // open the URL
    cy.title().then(function (title) {
      console.log(title); // print the title
    });
  });
});

Question 3

Write Cypress/ JavaScript code for opening the URL of the site and Click on the Link “Blogs.”

When I ran the above code, in reality, it was not working.

I have to modify my script; as I added { force: true }, it started working fine.

describe("Navigate to QAAutomationLabs website and click on Blogs link", () => {
  it("Visits the website and clicks on the Blogs link", () => {
    cy.visit("http://qaautomationlabs.com");
    cy.get('a').contains('Blogs').click({ force: true });
  });
});

Question 4

When I ran the above code, in reality, it was working fine without any issues, and I am able to log in with provided credentials.

const username = "standard_user";
const password = "secret_sauce";
describe("Login to Saucedemo", () => {
it("should log in with valid credentials", () => {
cy.visit("https://www.saucedemo.com/");
cy.get("#user-name").type(username);
cy.get("#password").type(password);
cy.get("#login-button").click();
});
});

Generate API Automation Script for Cypress/ JavaScript

ChatGPT is very useful in generating the API automation code. I have asked to Generate code for a few API requests, and generated code looks good to me.

Below are some scenarios that I have covered to generate the script In API using Cypress/Javascript.

Question 1

Generate Cypress API code for GET request for link and verify status code 200.

Below is the Generated Code by ChatGPT for the asked question:

When I ran the above-Generated code, in reality, it worked fine, and I was able to verify the response with the status code “200.”

describe("Send GET request and verify status code", () => {
  it("should send a GET request and verify the status code", () => {
    cy.request("GET", "https://reqres.in/api/users?page=2").then((response) => {
      expect(response.status).to.eq(200);
    });
  });
});

Question 2

Generate Cypress API code for POST request for link by passing name”: “morpheus”, job”: “leader” in the body and verify status code 201.

Below is the Generated Code by ChatGPT for the asked question:

const data = {
   name: 'morpheus',
   job: 'leader',
 };
 
 describe('Send POST request and verify status code', () => {
   it('should send a POST request and verify the status code', () => {
     cy.request('POST', 'https://reqres.in/api/users?page=2', data).then((response) => {
       expect(response.status).to.eq(201);
     });
   });
 });

describe("Send DELETE request and verify status code", () => {
  it("should send a DELETE request and verify the status code", () => {
    cy.request({
      method: "DELETE",
      url: "https://reqres.in/api/users?page=2",
    }).then((response) => {
      expect(response.status).to.eq(204);
    });
  });
});

Feature: Navigate to qaautomationlabs.com, click a button, and verify text
  As a user
  I want to visit qaautomationlabs.com, click a button on the page, and verify that certain text is displayed
  So that I can see the content that the button reveals and confirm that the expected text is present

  Scenario: Click the button and verify text
    Given I am on the qaautomationlabs.com homepage
    When I click the "Read more" button
    Then I should see the content that the button reveals
    And I should see the text "Running End-to-End Cypress Test cases In Google Cloud Build Pipeline"

Feature: Navigate to qaautomationlabs.com and click a button
  As a user
  I want to visit qaautomationlabs.com and click a button on the page
  So that I can see the content that the button reveals

  Scenario: Click the button
    Given I am on the qaautomationlabs.com homepage
    When I click the "Read more" button
    Then I should see the content that the button reveals

Feature: Login feature
  As a user, I want to be able to log in to the website so that I can access my account.

  Scenario Outline: Successful login
    Given I am on the login page
    When I enter my email address "<email>" and password "<password>"
    And I click the login button
    Then I should be logged in

  Examples:
    | email                | password |
    | standard_user | secret_sauce |
    | locked_out_user | secret_sauce |
    | problem_user | secret_sauce |
    | performance_glitch_user | secret_sauce |