Vote-2826: Migrate Cypress Backend Test to Page Objects (#1041)

* init work

* saving work - footer menu

* adding data-test attribute to twig file

* update to cypress tests

testing/cypress/e2e/backEndTests/basic-page.cy.js

@@ -1,27 +1,43 @@
 /// <reference types="cypress" />
+import { pageObjects } from '../../support/pageObjects.js'
 
 describe('test for basic page', () => {
+
+  beforeEach('visit site', () => {
+    cy.signin(Cypress.env('roles').site_admin.username, Cypress.env('test_pass'))
+    cy.visit('/node/add/page')
+  })
+
     it('test url alias', () => {
 
-      cy.signin(Cypress.env('roles').site_admin.username, Cypress.env('test_pass'))
-
+
       // Can set url alias
-      cy.visit('/node/add/page')
-      cy.get('[data-drupal-selector="edit-title-0-value"]').type('Test Page')
 
-      cy.get('[class="ck-blurred ck ck-content ck-editor__editable ck-rounded-corners ck-editor__editable_inline"]').then(field => {
+      pageObjects
+      .pageTitle()
+      .type('Test Page')
+
+      pageObjects
+      .pageContent()
+      .then(field => {
         cy.get(field[0]).clear().realType('test page')
       })
-      cy.get('[class="claro-details__summary claro-details__summary--accordion-item"]').then(dropdown => {
+
+      pageObjects
+      .pageDetails().then(dropdown => {
         cy.get(dropdown[1]).click()
-        cy.get('[data-drupal-selector="edit-path-0"]').click()
-        cy.get('[data-drupal-selector="edit-path-0-pathauto"]').click()
-        cy.get('[data-drupal-selector="edit-path-0-alias"]').type('/cypress-url-alias-test')
+        pageObjects
+        .urlAlias().click()
+        pageObjects
+        .urlAuto().click()
+        pageObjects
+        .setAlias().type('/cypress-url-alias-test')
       })
-      cy.get('[data-drupal-selector="edit-submit"]').click()
+      pageObjects
+      .submitBtn().click()
       cy.url().should('contain', 'cypress-url-alias-test')
 
     cy.logout()
 
     })
-})
+})

testing/cypress/e2e/backEndTests/content-editor-access.cy.js

@@ -1,4 +1,5 @@
 /// <reference types="cypress" />
+import { pageObjects } from '../../support/pageObjects.js'
 
 describe('Test Content Editor Role Access', () => {
   beforeEach('login as content editor', () => {
@@ -8,7 +9,7 @@ describe('Test Content Editor Role Access', () => {
   after('logout of content editor role', () => {
     cy.logout()
   })
-  
+
   it('verify access to email signup', () => {
     cy.request({
           url: '/block/4',
@@ -102,9 +103,10 @@ describe('Test Content Editor Role Access', () => {
 
   it('verify ability to publish', () => {
     cy.visit('/node/add/page')
-    cy.get('[data-drupal-selector="edit-moderation-state-0-state"]').find('option').then(option => {
+    pageObjects
+    .publishState().find('option').then(option => {
       cy.wrap(option).should('not.contain', 'Published')
     })
   })
 
-})
+})

testing/cypress/e2e/backEndTests/content-manager-access.cy.js

@@ -1,4 +1,6 @@
-// <reference types="cypress" />
+/// <reference types="cypress" />
+import { pageObjects } from '../../support/pageObjects.js'
+
 
 describe('Test Content Manager Role Access', () => {
   beforeEach('login as content manager', () => {
@@ -33,7 +35,7 @@ describe('Test Content Manager Role Access', () => {
     cy.request('/node/63/edit').then((response) => {
       expect(response.status).to.eq(200)
         })
-    
+
       cy.request('/node/add/landing').then((response) => {
       expect(response.status).to.eq(200)
         })
@@ -78,8 +80,9 @@ describe('Test Content Manager Role Access', () => {
 
   it('verify ability to publish', () => {
     cy.visit('/node/add/page')
-    cy.get('[data-drupal-selector="edit-moderation-state-0-state"]').find('option').then(option => {
+    pageObjects
+    .publishState().find('option').then(option => {
       cy.wrap(option).should('contain', 'Published')
     })
   })
-})
+})

testing/cypress/e2e/backEndTests/footer-menu-editor.cy.js

@@ -1,5 +1,5 @@
-// <reference types="cypress" />
-
+/// <reference types="cypress" />
+import { pageObjects } from '../../support/pageObjects.js'
 
 describe('Footer Menu Function', () => {
 
@@ -9,18 +9,25 @@ describe('Footer Menu Function', () => {
     cy.signin(Cypress.env('roles').site_admin.username, Cypress.env('test_pass'))
 
     cy.visit('/admin/structure/menu/manage/footer/add')
-
-    cy.get('[data-drupal-selector="edit-title-0-value"]').type('Cypress Test Link')
-    cy.get('[data-drupal-selector="edit-link-0-uri"]').type('https://www.bixal.com/')
-    cy.get('[data-drupal-selector="edit-menu-link-display-settings"]').click().get('[data-drupal-selector="edit-weight-0-value"]').clear().type('-99')
-
-
-    cy.get('[data-drupal-selector="edit-submit"]').click()
+    pageObjects
+    .linkTitle().type('Cypress Test Link')
+    pageObjects
+    .linkUrl().type('https://www.bixal.com/')
+    pageObjects
+    .displaySettings().click()
+    pageObjects
+    .linkWeight().clear().type('-99')
+
+    pageObjects
+    .submitBtn().click()
 
     // check that the link is working as expected
     cy.visit('/')
 
-    cy.get('[data-test="footer"]').find('[data-test="footerLinks"]').then(link => {
+    pageObjects
+    .footer()
+    pageObjects
+    .footerLinks().then(link => {
       cy.get(link[0]).find('a').should('contain', 'Cypress Test Link')
       .should('have.attr', 'href').and('contain', 'bixal.com')
     })
@@ -29,11 +36,16 @@ describe('Footer Menu Function', () => {
 
     cy.visit('/admin/structure/menu/manage/footer')
 
-    cy.get('[class="edit dropbutton__item dropbutton-action"]').then(dropDown => {
+    pageObjects
+    .editDropdown()
+    .then(dropDown => {
       cy.get(dropDown[0]).click()
-      cy.get('[data-drupal-selector="edit-delete"]').click()
-
-      cy.get('[class="ui-dialog-buttonset form-actions"]').find('button').then(btn => {
+      pageObjects
+      .deleteBtn().click()
+
+      pageObjects
+      .confirmDelete()
+      .find('button').then(btn => {
         cy.get(btn[0]).click()
       })
     })

testing/cypress/e2e/backEndTests/site-admin-access.cy.js

@@ -1,5 +1,7 @@
 // <reference types="cypress" />
 
+import { pageObjects } from "../../support/pageObjects"
+
 describe('Test Site Admin Role access', () => {
   beforeEach('login as site admin', () => {
     cy.signin(Cypress.env('roles').site_admin.username, Cypress.env('test_pass'))
@@ -19,7 +21,7 @@ describe('Test Site Admin Role access', () => {
     cy.request('/block/1').then((response) => {
       expect(response.status).to.eq(200)
         })
-    
+
     // only site admin should be able to create banner
     cy.request('//block/add/government_banner').then((response) => {
       expect(response.status).to.eq(200)
@@ -30,7 +32,7 @@ describe('Test Site Admin Role access', () => {
     cy.request('/node/63/edit').then((response) => {
       expect(response.status).to.eq(200)
         })
-    
+
     cy.request('/node/add/landing').then((response) => {
       expect(response.status).to.eq(200)
         })
@@ -59,8 +61,8 @@ describe('Test Site Admin Role access', () => {
     cy.request('/media/add').then((response) => {
       expect(response.status).to.eq(200)
         })
-    
-    // admin cole should be able to delete 
+
+    // admin cole should be able to delete
     cy.request('/media/6/delete?').then((response) => {
       expect(response.status).to.eq(200)
         })
@@ -74,9 +76,10 @@ describe('Test Site Admin Role access', () => {
 
   it('verify ability to publish', () => {
     cy.visit('/node/add/page')
-    cy.get('[data-drupal-selector="edit-moderation-state-0-state"]').find('option').then(option => {
+    pageObjects
+    .publishState().find('option').then(option => {
       cy.wrap(option).should('contain', 'Published')
     })
   })
 
-})
+})