From 9fa645ed41a7e07c1ca7350a684ad516adc9234f Mon Sep 17 00:00:00 2001 From: Simon Priet Date: Thu, 2 Sep 2021 12:07:34 +0200 Subject: [PATCH] refactor(Cypress): Finished first VSC configuration to help run and debug cypress. I can start writing tests now. --- .vscode/launch.json | 19 ++ .vscode/settings.json | 5 + README.md | 11 +- .../2-advanced-examples/actions.spec.js | 299 ------------------ .../2-advanced-examples/aliasing.spec.js | 39 --- .../2-advanced-examples/assertions.spec.js | 177 ----------- .../2-advanced-examples/connectors.spec.js | 97 ------ .../2-advanced-examples/cookies.spec.js | 77 ----- .../2-advanced-examples/cypress_api.spec.js | 202 ------------ .../2-advanced-examples/files.spec.js | 88 ------ .../2-advanced-examples/local_storage.spec.js | 52 --- .../2-advanced-examples/location.spec.js | 32 -- .../2-advanced-examples/misc.spec.js | 104 ------ .../2-advanced-examples/navigation.spec.js | 56 ---- .../network_requests.spec.js | 163 ---------- .../2-advanced-examples/querying.spec.js | 114 ------- .../spies_stubs_clocks.spec.js | 205 ------------ .../2-advanced-examples/traversal.spec.js | 121 ------- .../2-advanced-examples/utilities.spec.js | 110 ------- .../2-advanced-examples/viewport.spec.js | 59 ---- .../2-advanced-examples/waiting.spec.js | 31 -- .../2-advanced-examples/window.spec.js | 22 -- .../integration/lifen-inbox/inbox.spec.js | 0 cypress_app/package.json | 2 +- 24 files changed, 35 insertions(+), 2050 deletions(-) create mode 100644 .vscode/launch.json create mode 100644 .vscode/settings.json delete mode 100644 cypress_app/cypress/integration/2-advanced-examples/actions.spec.js delete mode 100644 cypress_app/cypress/integration/2-advanced-examples/aliasing.spec.js delete mode 100644 cypress_app/cypress/integration/2-advanced-examples/assertions.spec.js delete mode 100644 cypress_app/cypress/integration/2-advanced-examples/connectors.spec.js delete mode 100644 cypress_app/cypress/integration/2-advanced-examples/cookies.spec.js delete mode 100644 cypress_app/cypress/integration/2-advanced-examples/cypress_api.spec.js delete mode 100644 cypress_app/cypress/integration/2-advanced-examples/files.spec.js delete mode 100644 cypress_app/cypress/integration/2-advanced-examples/local_storage.spec.js delete mode 100644 cypress_app/cypress/integration/2-advanced-examples/location.spec.js delete mode 100644 cypress_app/cypress/integration/2-advanced-examples/misc.spec.js delete mode 100644 cypress_app/cypress/integration/2-advanced-examples/navigation.spec.js delete mode 100644 cypress_app/cypress/integration/2-advanced-examples/network_requests.spec.js delete mode 100644 cypress_app/cypress/integration/2-advanced-examples/querying.spec.js delete mode 100644 cypress_app/cypress/integration/2-advanced-examples/spies_stubs_clocks.spec.js delete mode 100644 cypress_app/cypress/integration/2-advanced-examples/traversal.spec.js delete mode 100644 cypress_app/cypress/integration/2-advanced-examples/utilities.spec.js delete mode 100644 cypress_app/cypress/integration/2-advanced-examples/viewport.spec.js delete mode 100644 cypress_app/cypress/integration/2-advanced-examples/waiting.spec.js delete mode 100644 cypress_app/cypress/integration/2-advanced-examples/window.spec.js create mode 100644 cypress_app/cypress/integration/lifen-inbox/inbox.spec.js diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 00000000..1dc234cb --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,19 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "name": "Test Cypress via NPM", + "cwd": "${workspaceFolder}/cypress_app", + "type": "node", + "request": "launch", + "runtimeExecutable": "npm", + "runtimeArgs": [ + "run-script", + "test" + ] + } + ] +} \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..b4dec6a7 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,5 @@ +{ + "conventionalCommits.scopes": [ + "Cypress" + ] +} \ No newline at end of file diff --git a/README.md b/README.md index 3a3e331d..f79dbc41 100644 --- a/README.md +++ b/README.md @@ -2,4 +2,13 @@ Description -# Installation \ No newline at end of file +# Installation + +The code has been written with VSC in mind, so a launch.json is available to help run and debug the softwares. No helpers are available for other IDE. + +2. Clone the repo to your local computer. You will need the following requierement: + * Node.js 16 + * Git +4. In VS code, run `Test Cypress via NPM`. The `Launch.json` file will trigger the `test` script configured in the `package.json`. +3. Alternatively, open a terminal and go to the `./cypress_app/` subfolder. +5. Then, type `npm run test` to launch the script via CLI. \ No newline at end of file diff --git a/cypress_app/cypress/integration/2-advanced-examples/actions.spec.js b/cypress_app/cypress/integration/2-advanced-examples/actions.spec.js deleted file mode 100644 index 09263799..00000000 --- a/cypress_app/cypress/integration/2-advanced-examples/actions.spec.js +++ /dev/null @@ -1,299 +0,0 @@ -/// - -context('Actions', () => { - beforeEach(() => { - cy.visit('https://example.cypress.io/commands/actions') - }) - - // https://on.cypress.io/interacting-with-elements - - it('.type() - type into a DOM element', () => { - // https://on.cypress.io/type - cy.get('.action-email') - .type('fake@email.com').should('have.value', 'fake@email.com') - - // .type() with special character sequences - .type('{leftarrow}{rightarrow}{uparrow}{downarrow}') - .type('{del}{selectall}{backspace}') - - // .type() with key modifiers - .type('{alt}{option}') //these are equivalent - .type('{ctrl}{control}') //these are equivalent - .type('{meta}{command}{cmd}') //these are equivalent - .type('{shift}') - - // Delay each keypress by 0.1 sec - .type('slow.typing@email.com', { delay: 100 }) - .should('have.value', 'slow.typing@email.com') - - cy.get('.action-disabled') - // Ignore error checking prior to type - // like whether the input is visible or disabled - .type('disabled error checking', { force: true }) - .should('have.value', 'disabled error checking') - }) - - it('.focus() - focus on a DOM element', () => { - // https://on.cypress.io/focus - cy.get('.action-focus').focus() - .should('have.class', 'focus') - .prev().should('have.attr', 'style', 'color: orange;') - }) - - it('.blur() - blur off a DOM element', () => { - // https://on.cypress.io/blur - cy.get('.action-blur').type('About to blur').blur() - .should('have.class', 'error') - .prev().should('have.attr', 'style', 'color: red;') - }) - - it('.clear() - clears an input or textarea element', () => { - // https://on.cypress.io/clear - cy.get('.action-clear').type('Clear this text') - .should('have.value', 'Clear this text') - .clear() - .should('have.value', '') - }) - - it('.submit() - submit a form', () => { - // https://on.cypress.io/submit - cy.get('.action-form') - .find('[type="text"]').type('HALFOFF') - - cy.get('.action-form').submit() - .next().should('contain', 'Your form has been submitted!') - }) - - it('.click() - click on a DOM element', () => { - // https://on.cypress.io/click - cy.get('.action-btn').click() - - // You can click on 9 specific positions of an element: - // ----------------------------------- - // | topLeft top topRight | - // | | - // | | - // | | - // | left center right | - // | | - // | | - // | | - // | bottomLeft bottom bottomRight | - // ----------------------------------- - - // clicking in the center of the element is the default - cy.get('#action-canvas').click() - - cy.get('#action-canvas').click('topLeft') - cy.get('#action-canvas').click('top') - cy.get('#action-canvas').click('topRight') - cy.get('#action-canvas').click('left') - cy.get('#action-canvas').click('right') - cy.get('#action-canvas').click('bottomLeft') - cy.get('#action-canvas').click('bottom') - cy.get('#action-canvas').click('bottomRight') - - // .click() accepts an x and y coordinate - // that controls where the click occurs :) - - cy.get('#action-canvas') - .click(80, 75) // click 80px on x coord and 75px on y coord - .click(170, 75) - .click(80, 165) - .click(100, 185) - .click(125, 190) - .click(150, 185) - .click(170, 165) - - // click multiple elements by passing multiple: true - cy.get('.action-labels>.label').click({ multiple: true }) - - // Ignore error checking prior to clicking - cy.get('.action-opacity>.btn').click({ force: true }) - }) - - it('.dblclick() - double click on a DOM element', () => { - // https://on.cypress.io/dblclick - - // Our app has a listener on 'dblclick' event in our 'scripts.js' - // that hides the div and shows an input on double click - cy.get('.action-div').dblclick().should('not.be.visible') - cy.get('.action-input-hidden').should('be.visible') - }) - - it('.rightclick() - right click on a DOM element', () => { - // https://on.cypress.io/rightclick - - // Our app has a listener on 'contextmenu' event in our 'scripts.js' - // that hides the div and shows an input on right click - cy.get('.rightclick-action-div').rightclick().should('not.be.visible') - cy.get('.rightclick-action-input-hidden').should('be.visible') - }) - - it('.check() - check a checkbox or radio element', () => { - // https://on.cypress.io/check - - // By default, .check() will check all - // matching checkbox or radio elements in succession, one after another - cy.get('.action-checkboxes [type="checkbox"]').not('[disabled]') - .check().should('be.checked') - - cy.get('.action-radios [type="radio"]').not('[disabled]') - .check().should('be.checked') - - // .check() accepts a value argument - cy.get('.action-radios [type="radio"]') - .check('radio1').should('be.checked') - - // .check() accepts an array of values - cy.get('.action-multiple-checkboxes [type="checkbox"]') - .check(['checkbox1', 'checkbox2']).should('be.checked') - - // Ignore error checking prior to checking - cy.get('.action-checkboxes [disabled]') - .check({ force: true }).should('be.checked') - - cy.get('.action-radios [type="radio"]') - .check('radio3', { force: true }).should('be.checked') - }) - - it('.uncheck() - uncheck a checkbox element', () => { - // https://on.cypress.io/uncheck - - // By default, .uncheck() will uncheck all matching - // checkbox elements in succession, one after another - cy.get('.action-check [type="checkbox"]') - .not('[disabled]') - .uncheck().should('not.be.checked') - - // .uncheck() accepts a value argument - cy.get('.action-check [type="checkbox"]') - .check('checkbox1') - .uncheck('checkbox1').should('not.be.checked') - - // .uncheck() accepts an array of values - cy.get('.action-check [type="checkbox"]') - .check(['checkbox1', 'checkbox3']) - .uncheck(['checkbox1', 'checkbox3']).should('not.be.checked') - - // Ignore error checking prior to unchecking - cy.get('.action-check [disabled]') - .uncheck({ force: true }).should('not.be.checked') - }) - - it('.select() - select an option in a