Lesson 4: Topic 2

cypress.config.js

@@ -2,6 +2,8 @@ const { defineConfig } = require("cypress");
 
 module.exports = defineConfig({
   e2e: {
+    supportFile: 'cypress/support/commands.js',
+    specPattern: 'cypress/integration/**/*.spec.js',
     setupNodeEvents(on, config) {
       // implement node event listeners here
     },

cypress/integration/alerts.spec.js

@@ -0,0 +1,56 @@
+describe('Alerts Handling on DEMOQA', () => {
+  beforeEach(() => {
+    cy.visitWithAdBlocker('https://demoqa.com/alerts');
+  });
+
+  it('tests the [Alert] button which shows an alert box', () => {
+    cy.on('window:alert', (text) => {
+      expect(text).to.contains('You clicked a button');
+    });
+    cy.get('#alertButton').click();
+  });
+
+  it('ensures the [Timer Alert] button triggers after exactly 5 seconds', () => {
+    cy.clock();
+
+    cy.on('window:alert', (text) => {
+      expect(text).to.equal('This alert appeared after 5 seconds');
+    });
+
+    cy.get('#timerAlertButton').click();
+
+    cy.get('#statusMessage').should('not.exist');
+
+    cy.tick(5000);
+  });
+
+
+  it('accepts a confirm alert and verifies actions taken on confirmation', () => {
+    cy.on('window:confirm', (str) => {
+      expect(str).to.eq('Do you confirm action?');
+      return true;
+    });
+
+    cy.get('#confirmButton').click();
+    cy.get('#confirmResult').should('contain', 'You selected Ok');
+  });
+
+  it('cancels a confirm alert and verifies actions taken on cancellation', () => {
+    cy.on('window:confirm', (str) => {
+      expect(str).to.eq('Do you confirm action?');
+      return false;
+    });
+
+    cy.get('#confirmButton').click();
+    cy.get('#confirmResult').should('contain', 'You selected Cancel');
+  });
+
+  it('accepts a prompt alert and verifies actions taken on confirmation', () => {
+    cy.window().then((win) => {
+      cy.stub(win, 'prompt').returns('Cypress Tester');
+    });
+
+    cy.get('#promtButton').click();
+    cy.get('#promptResult').should('contain', 'You entered Cypress Tester');
+  });
+});

cypress/integration/frames.spec.js

@@ -0,0 +1,29 @@
+describe('Frames Handling on DEMOQA', () => {
+  beforeEach(() => {
+    cy.visitWithAdBlocker('https://demoqa.com/frames');
+  });
+
+  // Test to check content and dimensions of frame1
+  it('verifies content and dimensions within frame1', () => {
+    cy.get('#frame1')
+      .should('have.attr', 'width', '500px')
+      .and('have.attr', 'height', '350px');
+
+    cy.enterFrame('#frame1').within(() => {
+      cy.get('h1#sampleHeading').should('exist')
+      .and('have.text', 'This is a sample page');
+    });
+  });
+
+  // Test to check content and dimensions of frame2
+  it('verifies content and dimensions within frame2', () => {
+    cy.get('#frame2')
+      .should('have.attr', 'width', '100px')
+      .and('have.attr', 'height', '100px');
+
+    cy.enterFrame('#frame2').within(() => {
+      cy.get('h1#sampleHeading').should('exist')
+      .and('have.text', 'This is a sample page');
+    });
+  });
+});

cypress/support/commands.js

@@ -22,4 +22,30 @@
 //
 //
 // -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+
+// visitWithAdBlocker: Visits a page and blocks ads
+Cypress.Commands.add('visitWithAdBlocker', (url) => {
+  // Setup intercepts
+  cy.intercept('https://pagead2.googlesyndication.com/**', {statusCode: 200, body: ''}).as('blockAds');
+  cy.intercept('https://www.googletagservices.com/tag/js/gpt.js', {statusCode: 200, body: ''}).as('blockGpt');
+  cy.intercept('https://www.googletagmanager.com/gtm.js?id=GTM-MX8DD4S', {statusCode: 200, body: ''}).as('blockGtm');
+  cy.intercept('https://cdn.ad.plus/player/adplus.js', {statusCode: 200, body: ''}).as('blockAdPlus');
+  cy.intercept('**/*.gif', {statusCode: 200, body: ''}).as('blockGif');
+  cy.intercept('**/usermatch.gif**', {statusCode: 200, body: ''}).as('blockUserMatch');
+  cy.intercept('**/merge**', {statusCode: 200, body: ''}).as('blockMerge');
+  cy.intercept('**/*.js', (req) => {
+      if (req.url.includes('google') || req.url.includes('adsbygoogle')) {
+          req.destroy();
+      }
+  }).as('blockScripts');
+
+  // Visit the page
+  cy.visit(url);
+});
+
+// enterFrame: Enters a frame by its selector
+Cypress.Commands.add('enterFrame', (selector) => {
+  return cy.get(selector).its('0.contentDocument.body').should('not.be.undefined')
+    .then(cy.wrap);
+});