solution

cypress.config.js

@@ -1,8 +1,35 @@
+const { faker } = require('@faker-js/faker');
 const { defineConfig } = require('cypress');
 
 module.exports = defineConfig({
   e2e: {
+    baseUrl: 'https://demoqa.com',
     setupNodeEvents(on, config) {
+      on('task', {
+        generateUser() {
+          const arrOfGender =
+           ['#gender-radio-1', '#gender-radio-2', '#gender-radio-3'];
+          const randomGender = Math.floor(Math.random() * arrOfGender.length);
+
+          const randomHobbies = Math.floor(Math.random() * 2) + 1;
+          const hobbies = ['Sport', 'Reading', 'Music']; // hobbySelect
+
+          return {
+            firstName: faker.person.firstName(),
+            lastName: faker.person.lastName(),
+            email: faker.internet.email(),
+            genderId: randomGender,
+            phoneNumber: faker.phone.number('##########'),
+            birth: {
+              year: Math.floor(2000 + Math.random() * 20).toString(),
+              month: faker.date.month(),
+              day: Math.ceil(Math.random() * 27)
+            },
+            hobby: hobbies[randomHobbies],
+            address: faker.location.streetAddress()
+          };
+        }
+      });
     }
   }
 });

cypress/e2e/registration.cy.js

@@ -1,11 +1,52 @@
 /// <reference types='cypress' />
+// const { ExitStatus } = require("typescript");
+let user;
 
 describe('Student Registration page', () => {
   before(() => {
-
+    cy.visit('/automation-practice-form');
+    cy.task('generateUser').then((generatedUser) => {
+      user = generatedUser;
+    });
   });
 
-  it('', () => {
+  it('Should sign up a new user', () => {
+    cy.findByPlaceholder('First Name').type(user.firstName);
+    cy.findByPlaceholder('Last Name').type(user.lastName);
+
+    cy.get('#userEmail').type(user.email);
+
+    cy.get(`label[for="gender-radio-${user.genderId}"]`).click();
+
+    cy.get('#userNumber').type(user.phoneNumber);
+
+    cy.get('#dateOfBirthInput').click();
+    cy.get('.react-datepicker__month-select').select(user.birth.month);
+    cy.get('.react-datepicker__year-select').select(user.birth.year);
+    cy.get('.react-datepicker__day').contains(user.birth.day).click();
+
+    cy.get('.subjects-auto-complete__input').type('en{enter}');
+
+    cy.contains('.custom-control-label', user.hobby).click({ multiple: true });
+
+    cy.findByPlaceholder('Current Address').type(user.address);
+
+    cy.get('#state').type('{downarrow}{enter}');
+    cy.get('#city').type('{downarrow}{enter}');
+
+    cy.get('#submit').click();
 
+    cy.contains('tr', 'Student Name').should('contain', user.firstName);
+    cy.contains('tr', 'Student Name').should('contain', user.lastName);
+    cy.contains('tr', 'Student Email').should('contain', user.email);
+    cy.contains('tr', 'Gender').should('exist');
+    cy.contains('tr', 'Mobile').should('contain', user.phoneNumber);
+    cy.contains('tr', 'Date of Birth')
+      .should('contain', user.birth.day, user.birth.month, user.birth.year);
+    cy.contains('tr', 'Subjects').should('contain', 'En');
+    cy.contains('tr', 'Hobbies').should('contain', user.hobby);
+    cy.contains('tr', 'Address').should('contain', user.address);
+    cy.contains('tr', 'State and City')
+      .should('contain', 'Uttar Pradesh Lucknow');
   });
 });

cypress/support/commands.js

@@ -7,19 +7,28 @@
 // commands please read more here:
 // https://on.cypress.io/custom-commands
 // ***********************************************
-//
-//
 // -- This is a parent command --
 // Cypress.Commands.add('login', (email, password) => { ... })
 //
 //
 // -- This is a child command --
-// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+// Cypress.Commands.add('drag', { prevSubject: 'element'},
+//  (subject, options) => { ... })
 //
 //
 // -- This is a dual command --
-// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'},
+// (subject, options) => { ... })
 //
 //
 // -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+// Cypress.Commands.overwrite('visit',
+// (originalFn, url, options) => { ... })
+
+Cypress.Commands.add('findByPlaceholder', (placeholder) => {
+  cy.get(`[placeholder="${placeholder}"]`);
+});
+
+Cypress.Commands.add('pickDate', (date) => {
+  cy.get(`.react-datepicker__${date}`);
+});