From ccdf8ed69c07d5fcf5a67d5d96210e8a1c4a78fb Mon Sep 17 00:00:00 2001 From: "hatem.hadrich" Date: Mon, 30 Oct 2017 16:05:09 +0100 Subject: [PATCH] Adapt the new architecture on cookie banner module --- package.json | 1 + .../1-Check_cookie_banner_position.js | 70 ++++++ .../2-Edit_and_check_configuration.js | 32 +++ .../cookie-banner/cookieBanner-client.js | 231 ++++++++++++++++++ test/globals.webdriverio.js | 30 ++- 5 files changed, 362 insertions(+), 2 deletions(-) create mode 100644 test/campaigns/cookieBanner/1-Check_cookie_banner_position.js create mode 100644 test/campaigns/cookieBanner/2-Edit_and_check_configuration.js create mode 100644 test/clients/cookie-banner/cookieBanner-client.js diff --git a/package.json b/package.json index bfe62d1..bdcdc20 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "parsed-url": "0.0.0", "q": "1.4", "req": "0.1", + "rgb-hex": "^2.1.0", "should": "13.1.0", "webdriverio": "4.0", "window": "4.2.0" diff --git a/test/campaigns/cookieBanner/1-Check_cookie_banner_position.js b/test/campaigns/cookieBanner/1-Check_cookie_banner_position.js new file mode 100644 index 0000000..eae1fc2 --- /dev/null +++ b/test/campaigns/cookieBanner/1-Check_cookie_banner_position.js @@ -0,0 +1,70 @@ +scenario('Check the cookie banner in front office', client => { + scenario('Test case 1 : Check the cookie banner in the bottom of front office', () => { + test('should open the browser', () => client.open()); + test('should access to front office', () => client.accessToFrontOffice()); + test('should check the cookie banner on the bottom', () => client.checkPositionBanner('bottom')); + }, "cookie-banner/cookieBanner-client", true); + scenario('Test case 2 : Check the cookie banner in the top of front office', client => { + scenario('Log in in Back Office', client => { + test('should open the browser', () => client.open()); + test('should log in successfully in BO', () => client.signInBO()); + }, "cookie-banner/cookieBanner-client"); + scenario('Configure the cookie banner in the top', client => { + test('should access to module page', () => client.goToModulePage()); + test('should search the module page', () => client.searchModule("pscookiebanner")); + test('should go to the module configuration page', () => client.clickOnConfigureButton()); + test('should switch the position of banner in the top', () => client.positionBanner("top")); + test('should click on save button', () => client.clickOnSaveButton()); + }, "cookie-banner/cookieBanner-client"); + scenario('Logout from Back Office', client => { + test('should logout', () => client.signOutBO()); + }, "cookie-banner/cookieBanner-client", true); + scenario('Check the cookie banner in the top of front office', () => { + test('should open the browser', () => client.open()); + test('should access to front office', () => client.accessToFrontOffice()); + test('should check the cookie banner on the bottom', () => client.checkPositionBanner('fixedtop')); + }, "cookie-banner/cookieBanner-client"); + }, "cookie-banner/cookieBanner-client", true); + scenario('Test case 3 : Check the cookie banner in the bottom right of front office', client => { + scenario('Log in in Back Office', client => { + test('should open the browser', () => client.open()); + test('should log in successfully in BO', () => client.signInBO()); + }, "cookie-banner/cookieBanner-client"); + scenario('Configure the cookie banner in the bottom right', client => { + test('should access to module page', () => client.goToModulePage()); + test('should search the module page', () => client.searchModule("pscookiebanner")); + test('should go to the module configuration page', () => client.clickOnConfigureButton()); + test('should switch the position of the banner in bottom right', () => client.positionBanner("bottomright")); + test('should click on save button', () => client.clickOnSaveButton()); + }, "cookie-banner/cookieBanner-client"); + scenario('Logout from Back Office', client => { + test('should logout', () => client.signOutBO()); + }, "cookie-banner/cookieBanner-client", true); + scenario('Check the cookie banner in the bottom right of front office', () => { + test('should open the browser', () => client.open()); + test('should access to front office', () => client.accessToFrontOffice()); + test('should check the cookie banner in the bottom right', () => client.checkPositionBanner('bottomright')); + }, "cookie-banner/cookieBanner-client"); + }, "cookie-banner/cookieBanner-client", true); + scenario('Test case 4 : Check the cookie banner in the bottom left of front office', client => { + scenario('Log in in Back Office', client => { + test('should open the browser', () => client.open()); + test('should log in successfully in BO', () => client.signInBO()); + }, "cookie-banner/cookieBanner-client"); + scenario('Configure the cookie banner in the bottom left', client => { + test('should access to module page', () => client.goToModulePage()); + test('should search the module page', () => client.searchModule("pscookiebanner")); + test('should go to the module configuration page', () => client.clickOnConfigureButton()); + test('should switch the position of banner in the bottom left', () => client.positionBanner("bottomleft")); + test('should click on save button', () => client.clickOnSaveButton()); + }, "cookie-banner/cookieBanner-client"); + scenario('Logout from Back Office', client => { + test('should logout', () => client.signOutBO()); + }, "cookie-banner/cookieBanner-client", true); + scenario('Check the cookie banner in the top of front office', () => { + test('should open the browser', () => client.open()); + test('should access to front office', () => client.accessToFrontOffice()); + test('should check the cookie banner in the bottom left', () => client.checkPositionBanner('bottomleft')); + }, "cookie-banner/cookieBanner-client"); + }, "cookie-banner/cookieBanner-client", true); +}, "cookie-banner/cookieBanner-client", true); \ No newline at end of file diff --git a/test/campaigns/cookieBanner/2-Edit_and_check_configuration.js b/test/campaigns/cookieBanner/2-Edit_and_check_configuration.js new file mode 100644 index 0000000..a441d19 --- /dev/null +++ b/test/campaigns/cookieBanner/2-Edit_and_check_configuration.js @@ -0,0 +1,32 @@ +scenario('Edit and check configuration of cookie banner', client => { + scenario('Log in in Back Office', client => { + test('should open the browser', () => client.open()); + test('should log in successfully in BO', () => client.signInBO()); + }, "cookie-banner/cookieBanner-client"); + scenario('Configure the cookie banner', client => { + test('should access to module page', () => client.goToModulePage()); + test('should search the module page', () => client.searchModule("pscookiebanner")); + test('should go to the module configuration page', () => client.clickOnConfigureButton()); + test('should switch the position of banner in the bottom', () => client.positionBanner()); + test('should edit the background color', () => client.editBackgroundColor("#ff0000")); + test('should edit the text', () => client.editText()); + test('should edit the text color', () => client.editTextColor("#0000ff")); + test('should edit the text for "Learn more"', () => client.editLearnMoreText()); + test('should select CMS page for "Learn more"', () => client.selectCmsPage()); + test('should edit the text button', () => client.editTextButton("Agree")); + test('should edit the background button color', () => client.editBackgroundButtonColor("#8b8b8b")); + test('should edit on mouse over color', () => client.editOnMouseOverColor("#ff4cc3")); + test('should edit the text button color', () => client.editTextButtonColor("#ffd550")); + test('should click on save button', () => client.clickOnSaveButton()); + }, "cookie-banner/cookieBanner-client"); + scenario('Logout from Back Office', client => { + test('should logout', () => client.signOutBO()); + }, "cookie-banner/cookieBanner-client", true); + scenario('Check the configuration of cookie banner in the front office', () => { + test('should open the browser', () => client.open()); + test('should access to front office', () => client.accessToFrontOffice()); + test('should check the cookie banner', () => client.checkBanner()); + test('should click on view cookies', () => client.clickOnViewCookiesLink()); + test('should conditions of use page is shown', () => client.waitForConditionsPage()); + }, "cookie-banner/cookieBanner-client"); +}, "cookie-banner/cookieBanner-client", true); \ No newline at end of file diff --git a/test/clients/cookie-banner/cookieBanner-client.js b/test/clients/cookie-banner/cookieBanner-client.js new file mode 100644 index 0000000..62bb9ad --- /dev/null +++ b/test/clients/cookie-banner/cookieBanner-client.js @@ -0,0 +1,231 @@ +var {getClient} = require('../../common.webdriverio'); +var {selector} = require('../../globals.webdriverio.js'); +const rgbHex = require('rgb-hex'); + +class CookieBanner { + constructor() { + this.client = getClient(); + } + + signInBO() { + return this.client.signinBO(); + } + + signOutBO() { + return this.client.signoutBO(); + } + + accessToFrontOffice() { + return this.client + .url(`https://${URL}/`) + .waitForExist(selector.FO.AccessPage.logo_home_page, 90000) + .pause(3000) + } + + close() { + return this.client.end(); + }; + + open() { + return this.client.init().windowHandleSize({width: 1280, height: 1024}); + } + + checkPositionBanner(position){ + return this.client + .waitForExist(selector.FO.CookieBanner.configuration_banner, 90000) + .then(() => this.client.getAttribute(selector.FO.CookieBanner.configuration_banner, 'class')) + .then((classElement) => { + var checkPosition = classElement.split('eupopup-container eupopup-container-').pop().split(' eupopup-color-default').shift(); + expect(checkPosition).to.eql(position); + }) + .pause(5000); + } + + goToModulePage() { + return this.client + .waitForExist(selector.BO.ModulesPage.modules_subtab, 90000) + .click(selector.BO.ModulesPage.modules_subtab) + .pause(5000); + } + + clickOnConfigureButton() { + return this.client + .click(selector.BO.ModulesPage.actions_module_dropdown) + .click(selector.BO.ModulesPage.configure_module_button) + .pause(5000); + } + + searchModule(name) { + return this.client + .waitForExist(selector.BO.ModulesPage.search_input, 60000) + .setValue(selector.BO.ModulesPage.search_input, name) + .click(selector.BO.ModulesPage.search_button) + .pause(5000); + } + + clickOnSearchButton() { + return this.client + .pause(3000) + .waitForExist(selector.BO.CustomersPage.customer_search_button, 90000) + .click(selector.BO.CustomersPage.customer_search_button) + } + + positionBanner(position) { + switch (position){ + case "top": { + return this.client + .pause(3000) + .waitForExist(selector.BO.ModulePageCookieBanner.banner_position_top, 90000) + .click(selector.BO.ModulePageCookieBanner.banner_position_top); + } + case "bottomright": { + return this.client + .pause(3000) + .waitForExist(selector.BO.ModulePageCookieBanner.banner_position_bottomright, 90000) + .click(selector.BO.ModulePageCookieBanner.banner_position_bottomright); + } + case "bottomleft": { + return this.client + .pause(3000) + .waitForExist(selector.BO.ModulePageCookieBanner.banner_position_bottomleft, 90000) + .click(selector.BO.ModulePageCookieBanner.banner_position_bottomleft); + } + default: { + return this.client + .pause(3000) + .waitForExist(selector.BO.ModulePageCookieBanner.banner_position_bottom, 90000) + .click(selector.BO.ModulePageCookieBanner.banner_position_bottom); + } + } + } + + editBackgroundColor(color) { + return this.client + .waitForExist(selector.BO.ModulePageCookieBanner.background_color_input, 90000) + .setValue(selector.BO.ModulePageCookieBanner.background_color_input, color); + } + + editText() { + return this.client + .waitForExist(selector.BO.ModulePageCookieBanner.text_textarea, 90000) + .setValue(selector.BO.ModulePageCookieBanner.text_textarea, "This site uses cookies. Using your site means your agree to our use of cookies. We have published a new cookies policy, which you should need to find out more about the cookies we use."); + } + + editTextColor(color) { + return this.client + .waitForExist(selector.BO.ModulePageCookieBanner.color_text_input, 90000) + .setValue(selector.BO.ModulePageCookieBanner.color_text_input, color); + } + + editLearnMoreText() { + return this.client + .waitForExist(selector.BO.ModulePageCookieBanner.text_learn_more_input, 90000) + .setValue(selector.BO.ModulePageCookieBanner.text_learn_more_input, "View cookies."); + } + + clickOnSaveButton() { + return this.client + .pause(3000) + .waitForExist(selector.BO.ModulePageCookieBanner.save_button, 90000) + .click(selector.BO.ModulePageCookieBanner.save_button); + } + + selectCmsPage() { + return this.client + .waitForExist(selector.BO.ModulePageCookieBanner.cms_page_select, 90000) + .selectByValue(selector.BO.ModulePageCookieBanner.cms_page_select, 3); + } + + editTextButton(text_button) { + return this.client + .waitForExist(selector.BO.ModulePageCookieBanner.accept_button_text_input, 90000) + .setValue(selector.BO.ModulePageCookieBanner.accept_button_text_input, text_button); + } + + editBackgroundButtonColor(color) { + return this.client + .waitForExist(selector.BO.ModulePageCookieBanner.background_button_color_input, 90000) + .setValue(selector.BO.ModulePageCookieBanner.background_button_color_input, color); + } + + editOnMouseOverColor(color) { + return this.client + .waitForExist(selector.BO.ModulePageCookieBanner.on_mouse_over_input, 90000) + .setValue(selector.BO.ModulePageCookieBanner.on_mouse_over_input, color); + } + + editTextButtonColor(color) { + return this.client + .waitForExist(selector.BO.ModulePageCookieBanner.button_text_color_input, 90000) + .setValue(selector.BO.ModulePageCookieBanner.button_text_color_input, color); + } + + clickOnViewCookiesLink() { + return this.client + .waitForExist(selector.FO.CookieBanner.configuration_banner_body_link, 90000) + .click(selector.FO.CookieBanner.configuration_banner_body_link) + .then(() => this.client.getTabIds()) + .then(ids => this.client.switchTab(ids[1])) + } + + waitForConditionsPage() { + return this.client + .waitForExist(selector.FO.CookieBanner.page_title, 90000) + .then(() => this.client.getTabIds()) + .then(ids => this.client.switchTab(ids[0])) + } + + checkBanner() { + return this.client + //check background color + .waitForExist(selector.FO.CookieBanner.configuration_banner, 90000) + .then(() => this.client.getAttribute(selector.FO.CookieBanner.configuration_banner, 'style')) + .then((style) => { + var checkColor = '#'+(rgbHex(style.split('background-color: ').pop().split('; display: block;').shift())).substr(0,6); + expect(checkColor).to.eql("#ff0000"); + }) + //check text color + .waitForExist(selector.FO.CookieBanner.configuration_banner_body, 90000) + .then(() => this.client.getAttribute(selector.FO.CookieBanner.configuration_banner_body, 'style')) + .then((style) => { + var checkColor = '#'+(rgbHex(style.split('color: ').pop().split('; font-size').shift())).substr(0,6); + expect(checkColor).to.eql("#0000ff"); + }) + //check text link + .moveToObject(selector.FO.CookieBanner.configuration_banner_body_link, 90000) + .then(() => this.client.getText(selector.FO.CookieBanner.configuration_banner_body_link)) + .then((text) => {expect(text).to.eql("View cookies.")}) + //check text button + .waitForExist(selector.FO.CookieBanner.configuration_banner_body_button, 90000) + .then(() => this.client.getText(selector.FO.CookieBanner.configuration_banner_body_button)) + .then((text) => {expect(text).to.eql("Agree")}) + //check background button color + .waitForExist(selector.FO.CookieBanner.configuration_banner_body_button, 90000) + .then(() => this.client.getAttribute(selector.FO.CookieBanner.configuration_banner_body_button, 'style')) + .then((style) => { + var checkColor = '#'+(rgbHex(style.split('background-color: ').pop().split('; border').shift())).substr(0,6); + expect(checkColor).to.eql("#8b8b8b"); + }) + //check on mouse over button color + .moveToObject(selector.FO.CookieBanner.configuration_banner_body_button, 90000) + .then(() => this.client.getAttribute(selector.FO.CookieBanner.configuration_banner_body_button, 'style')) + .then((style) => { + var checkColor = '#'+(rgbHex(style.split('background-color: ').pop().split('; border').shift())).substr(0,6); + expect(checkColor).to.eql("#ff4cc3"); + }) + //check text button color + .waitForExist(selector.FO.CookieBanner.configuration_banner_body_button, 90000) + .then(() => this.client.getAttribute(selector.FO.CookieBanner.configuration_banner_body_button, 'style')) + .then((style) => { + var checkColor = '#'+(rgbHex(style.split('color: ').pop().split('; font-size').shift())).substr(0,6); + expect(checkColor).to.eql("#ffd550"); + }) + } + + takeScreenshot() { + return this.client.saveScreenshot(`test/screenshots/${this.client.desiredCapabilities.browserName}_exception_${global.date_time}.png`); + } +} + +module.exports = CookieBanner; + diff --git a/test/globals.webdriverio.js b/test/globals.webdriverio.js index 313c2ac..8d974b5 100644 --- a/test/globals.webdriverio.js +++ b/test/globals.webdriverio.js @@ -38,7 +38,9 @@ module.exports = { number_of_module_found:'//*[@id="main-div"]/div[3]/div/div/div[2]/div/div[7]/span[1]', configuration_button:'//*[@id="modules-list-container-all"]/div/div/div/div[5]/div[2]/form/button', module_menu_button: '[class="btn btn-primary-outline dropdown-toggle"]', - enable_module_button: '[class="dropdown-item module_action_menu_enable"]' + enable_module_button: '[class="dropdown-item module_action_menu_enable"]', + configure_module_button: '[class="dropdown-item module_action_menu_configure"]', + actions_module_dropdown:'//*[@id="modules-list-container-all"]/div/div/div/div[5]/div[2]/button' }, //Customer page selectors CustomersPage: { @@ -183,6 +185,22 @@ module.exports = { phone_input: '//*[@id="conf_id_PS_SHOP_PHONE"]/div/input', fax_input: '//*[@id="conf_id_PS_SHOP_FAX"]/div/input', save_button: '//*[@id="store_fieldset_contact"]/div[3]/button', + }, + ModulePageCookieBanner: { + banner_position_top: '//*[@class="radio-banner-position"]/ul/li[1]', + banner_position_bottom: '//*[@class="radio-banner-position"]/ul/li[2]', + banner_position_bottomright: '//*[@class="radio-banner-position"]/ul/li[3]', + banner_position_bottomleft: '//*[@class="radio-banner-position"]/ul/li[4]', + save_button: '//*[@id="submitCookieBannerModule"]', + background_color_input: '//*[@id="color_0"]', + color_text_input: '//*[@id="color_3"]', + text_textarea: 'textarea.CB-TEXT', + text_learn_more_input: 'input.CB-LINK-TEXT', + cms_page_select: '//*[@id="CB-CMS"]', + accept_button_text_input: 'input.CB-BUTTON-TEXT', + background_button_color_input: '//*[@id="color_2"]', + on_mouse_over_input: '//*[@id="color_4"]', + button_text_color_input: '//*[@id="color_5"]' } }, //FO @@ -364,8 +382,16 @@ module.exports = { footer: '//*[@id="footer"]', payment_option_radio: '//*[@id="payment-option-1"]', first_logo: '//a[@class="%SOCIAL custom-social-button-all custom-social-button-2"]' - } + }, + //cookie banner selectors + CookieBanner: { + configuration_banner:'//body/div[1]', + configuration_banner_body:'//body/div[1]/div[2]', + configuration_banner_body_link:'//body/div[1]/div[2]/a', + configuration_banner_body_button:'//body/div[1]/div[2]/div/button', + page_title: '//*[@id="main"]/header/h1' + } } }, shouldExist: function(err, existing) {