Solution

.eslintrc.js

@@ -1,37 +1,37 @@
-module.exports = {
-  env: {
-    browser: true,
-    es2021: true,
-    'cypress/globals': true
-  },
-  extends: [
-    'plugin:cypress/recommended',
-    'standard-with-typescript'
-  ],
-  overrides: [
-  ],
-  parserOptions: {
-    ecmaVersion: 'latest'
-  },
-  plugins: [
-    'cypress'
-  ],
-  rules: {
-    semi: ['error', 'always'],
-    'space-before-function-paren': 'off',
-    'cypress/no-assigning-return-values': 'error',
-    'cypress/no-unnecessary-waiting': 'error',
-    'cypress/assertion-before-screenshot': 'warn',
-    'cypress/no-force': 'warn',
-    'cypress/no-async-tests': 'error',
-    'cypress/no-pause': 'error',
-    'max-len': ['error', 80, {
-      ignoreTemplateLiterals: true,
-      ignoreRegExpLiterals: true,
-      ignoreComments: true
-    }],
-    'arrow-parens': ['error', 'always'],
-    quotes: ['error', 'single', { allowTemplateLiterals: true }],
-    'no-console': ['error']
-  }
-};
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+    'cypress/globals': true
+  },
+  extends: [
+    'plugin:cypress/recommended',
+    'standard-with-typescript'
+  ],
+  overrides: [
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  },
+  plugins: [
+    'cypress'
+  ],
+  rules: {
+    semi: ['error', 'always'],
+    'space-before-function-paren': 'off',
+    'cypress/no-assigning-return-values': 'error',
+    'cypress/no-unnecessary-waiting': 'error',
+    'cypress/assertion-before-screenshot': 'warn',
+    'cypress/no-force': 'warn',
+    'cypress/no-async-tests': 'error',
+    'cypress/no-pause': 'error',
+    'max-len': ['error', 80, {
+      ignoreTemplateLiterals: true,
+      ignoreRegExpLiterals: true,
+      ignoreComments: true
+    }],
+    'arrow-parens': ['error', 'always'],
+    quotes: ['error', 'single', { allowTemplateLiterals: true }],
+    'no-console': ['error']
+  }
+};

.gitignore

@@ -1,6 +1,6 @@
-# Mac OS DS_Store files.
-.DS_Store
-.favorites.json
-
-# Ignore node_modules
-node_modules
+# Mac OS DS_Store files.
+.DS_Store
+.favorites.json
+
+# Ignore node_modules
+node_modules

.husky/pre-commit

@@ -1,4 +1,4 @@
-#!/bin/sh
-  . "$(dirname "$0")/_/husky.sh"
-
+#!/bin/sh
+  . "$(dirname "$0")/_/husky.sh"
+
   npx lint-staged

LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2022 Mate academy
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2022 Mate academy
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

cypress.config.js

@@ -1,8 +1,9 @@
-const { defineConfig } = require('cypress');
-
-module.exports = defineConfig({
-  e2e: {
-    setupNodeEvents(on, config) {
-    }
-  }
-});
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({
+  e2e: {
+    baseUrl: 'https://demoqa.com/automation-practice-form',
+    setupNodeEvents(on, config) {
+    }
+  }
+});

cypress/e2e/registration.cy.js

@@ -1,11 +1,59 @@
-/// <reference types='cypress' />
-
-describe('Student Registration page', () => {
-  before(() => {
-
-  });
-
-  it('', () => {
-
-  });
-});
+/// <reference types='cypress' />
+
+describe('Student Registration page', () => {
+  const firstName = 'John';
+  const lastName = 'Doe';
+  const email = '[email protected]';
+  const mobileNumber = '0966313444';
+  const currentAddress = 'Wilhelm-Kalle-Straße 18';
+
+  before(() => {
+    cy.visit('');
+  });
+
+  it(`should fill all fields except "picture"`, () => {
+    // Fill in the form fields
+    cy.get('#firstName').type(firstName);
+    cy.get('#lastName').type(lastName);
+    cy.get('#userEmail').type(email);
+    cy.get('label[for="gender-radio-1"]').click();
+    cy.get('#userNumber').type(mobileNumber);
+    cy.get('.subjects-auto-complete__value-container')
+      .type('Math{enter}');
+    cy.get('#currentAddress').type(currentAddress);
+
+    // Select date of birth
+    cy.get('#dateOfBirthInput').click();
+    cy.get('.react-datepicker__month-select').select('February');
+    cy.get('.react-datepicker__year-select').select('1986');
+    cy.get('.react-datepicker__day--020').click();
+
+    // Select hobbies
+    cy.get('label[for="hobbies-checkbox-2"]').click();
+
+    // Select state and city
+    cy.get('#state').click();
+    cy.get('#react-select-3-option-1').click();
+    cy.get('#city').click();
+    cy.get('#react-select-4-option-2').click();
+
+    // Submit the form
+    cy.get('#submit').click();
+
+    // Assert modal window content
+    cy.get('.modal-header').contains('Thanks for submitting the form');
+
+    cy.contains('tr', 'Student Name').should('contain.text', `${firstName} ${lastName}`);
+    cy.contains('tr', 'Student Email').should('contain.text', email);
+    cy.contains('tr', 'Gender').should('contain.text', 'Male');
+    cy.contains('tr', 'Mobile').should('contain.text', mobileNumber);
+    cy.contains('tr', 'Date of Birth')
+      .should('contain.text', '20 February,1986');
+    cy.contains('tr', 'Subjects').should('contain.text', 'Maths');
+    cy.contains('tr', 'Hobbies').should('contain.text', 'Reading');
+    cy.contains('tr', 'Address')
+      .should('contain.text', currentAddress);
+    cy.contains('tr', 'State and City')
+      .should('contain.text', 'Uttar Pradesh Merrut');
+  });
+});

cypress/support/commands.js

@@ -1,25 +1,25 @@
-// ***********************************************
-// This example commands.js shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// 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) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// 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) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

cypress/support/e2e.js

@@ -1,34 +1,34 @@
-// ***********************************************************
-// This example support/index.js is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-// Import commands.js using ES2015 syntax:
-import './commands';
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')
-
-Cypress.on('uncaught:exception', () => {
-  return false;
-});
-
-const app = window.top;
-if (!app.document.head.querySelector('[data-hide-command-log-request]')) {
-  const style = app.document.createElement('style');
-  style.innerHTML =
-    '.command-name-request, .command-name-xhr { display: none }';
-  style.setAttribute('data-hide-command-log-request', '');
-
-  app.document.head.appendChild(style);
-};
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+Cypress.on('uncaught:exception', () => {
+  return false;
+});
+
+const app = window.top;
+if (!app.document.head.querySelector('[data-hide-command-log-request]')) {
+  const style = app.document.createElement('style');
+  style.innerHTML =
+    '.command-name-request, .command-name-xhr { display: none }';
+  style.setAttribute('data-hide-command-log-request', '');
+
+  app.document.head.appendChild(style);
+};