diff --git a/.eslintrc.js b/.eslintrc.js index 4e872ecd..eb55fb89 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -17,7 +17,4 @@ module.exports = { 'no-console': ['error', { allow: ['warn', 'error', 'info'] }], 'no-unused-vars': ['error', { vars: 'all', args: 'after-used', ignoreRestSiblings: false }], }, - env: { - 'cypress/globals': true, - }, }; diff --git a/cypress/e2e/document-upload.cy.js b/cypress/e2e/document-upload.cy.js new file mode 100644 index 00000000..b092ebd3 --- /dev/null +++ b/cypress/e2e/document-upload.cy.js @@ -0,0 +1,157 @@ +describe('SmartCameraWeb - Document Upload', () => { + beforeEach(() => { + cy.visit('/document-upload'); + }); + + describe(' - default', () => { + it('should not have the document-capture-mode attribute set', () => { + cy + .get('smart-camera-web') + .should('not.have.attr', 'document-capture-modes'); + }); + + it('should only show the "Take Photo" button', () => { + cy.navigateFaceCaptureScreens(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen #take-photo') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen #upload-photo-label') + .should('not.exist'); + }); + }); + + describe(' - upload', () => { + beforeEach(() => { + cy + .get('smart-camera-web') + .invoke('attr', 'document-capture-modes', 'upload'); + }); + + it('should have the document-capture-modes attribute set to upload', () => { + cy + .get('smart-camera-web') + .should('have.attr', 'document-capture-modes', 'upload'); + }); + + it('should only show the "Upload Photo" button', () => { + cy.navigateFaceCaptureScreens(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen #take-photo') + .should('not.exist'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen #upload-photo-label') + .should('be.visible'); + }); + + it('should accept an image that is just-right by dimensions', () => { + cy.navigateFaceCaptureScreens(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen #upload-photo-label') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen #upload-photo-label') + .selectFile('cypress/fixtures/just-right.png'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-review-screen') + .should('be.visible'); + }); + + it('should show an error message when an image is too-large in memory size', () => { + cy.navigateFaceCaptureScreens(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen #upload-photo-label') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen #upload-photo-label') + .selectFile('cypress/fixtures/too-large.png'); + + cy + .get('smart-camera-web') + .shadow() + .find('#error') + .should('contain', 'too-large.png is too large. Please ensure that the file is less than'); + }); + }); + + describe(' - both', () => { + beforeEach(() => { + cy + .get('smart-camera-web') + .invoke('attr', 'document-capture-modes', 'camera, upload'); + }); + + it('should have the document-capture-mode attribute set to a combination of both modes', () => { + cy + .get('smart-camera-web') + .should('have.attr', 'document-capture-modes'); + }); + + it('should show both the "Take Photo" button and the "Upload Photo" button', () => { + cy.navigateFaceCaptureScreens(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen #take-photo') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen #upload-photo-label') + .should('be.visible'); + }); + }); +}); diff --git a/cypress/e2e/smart-camera-web-attribution.cy.js b/cypress/e2e/smart-camera-web-attribution.cy.js index 9d4f5819..39459eea 100644 --- a/cypress/e2e/smart-camera-web-attribution.cy.js +++ b/cypress/e2e/smart-camera-web-attribution.cy.js @@ -1,19 +1,19 @@ describe('SmartCameraWeb', () => { - it('shows attribution by default', () => { - cy.visit('/'); - cy - .get('smart-camera-web') - .shadow() - .find('.powered-by') - .should('contain.text', 'Powered By'); - }); + it('shows attribution by default', () => { + cy.visit('/'); + cy + .get('smart-camera-web') + .shadow() + .find('.powered-by') + .should('contain.text', 'Powered By'); + }); - it('hides attribution when `hide-attribution` attribute is passed', () => { - cy.visit('/capture-back-of-id-hide-attribution'); - cy - .get('smart-camera-web') - .shadow() - .find('.powered-by') - .should('not.exist'); - }); + it('hides attribution when `hide-attribution` attribute is passed', () => { + cy.visit('/capture-back-of-id-hide-attribution'); + cy + .get('smart-camera-web') + .shadow() + .find('.powered-by') + .should('not.exist'); + }); }); diff --git a/cypress/e2e/smart-camera-web-back-press.cy.js b/cypress/e2e/smart-camera-web-back-press.cy.js index 62814a8f..1bbfb667 100644 --- a/cypress/e2e/smart-camera-web-back-press.cy.js +++ b/cypress/e2e/smart-camera-web-back-press.cy.js @@ -6,406 +6,779 @@ // https://on.cypress.io/writing-first-test context('SmartCameraWeb', () => { - beforeEach(() => { - cy.visit('/capture-back-of-id-navigation'); - }); - - it('should find the button to request-camera-access', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .should('contain.text', 'Request Camera Access'); - }); - - it('should navigate to "back_pressed" when back button on request page button is pressed', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access'); - - cy - .get('smart-camera-web') - .shadow() - .find('#back-button-exit') - .click(); - - cy.location('pathname').should('eq', '/back_pressed') - cy - .get('smart-camera-web') - .should('not.exist'); - }); - - it('should navigate to "back_pressed" when back button is pressed in camera screen', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#request-screen') - .should('not.be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#camera-screen') - .should('be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('.back-button-exit') - .last() - .click(); - - cy.location('pathname').should('eq', '/back_pressed') - cy - .get('smart-camera-web') - .should('not.exist'); - }); - - it('should show selfie screen when back button is pressed', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#start-image-capture') - .click(); - - cy - .wait(8000); - - cy - .get('smart-camera-web') - .shadow() - .find('#select-selfie') - .click(); - - - cy - .get('smart-camera-web') - .shadow() - .find('#camera-screen') - .should('not.be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#id-camera-screen') - .should('be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#back-button-selfie') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#id-camera-screen') - .should('not.be.visible'); - cy - .get('smart-camera-web') - .shadow() - .find('#camera-screen') - .should('be.visible'); - }); - - it('should switch from the back of ID screen to the id screen on clicking the "back" button', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#start-image-capture') - .click(); - - cy - .wait(8000); - - cy - .get('smart-camera-web') - .shadow() - .find('#select-selfie') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#capture-id-image') - .click(); - - cy - .wait(2000); - - cy - .get('smart-camera-web') - .shadow() - .find('#select-id-image') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#back-of-id-camera-screen') - .should('be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#back-button-id-image') - .click(); - - // cy - // .wait(2000); - - cy - .get('smart-camera-web') - .shadow() - .find('#back-of-id-review-screen') - .should('not.be.visible'); - cy - .get('smart-camera-web') - .shadow() - .find('#id-camera-screen') - .should('be.visible'); - }); - - it('should navigate to "closed" when close button is pressed in request screen', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-screen-close') - .click(); - - cy.exitScreens(); - }); - - it('should navigate to "closed" when close button is pressed in selfie screen', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#camera-screen-close') - .last() - .click(); - - cy.exitScreens(); - }); - - it('should navigate to "closed" when close button is pressed in selfie review screen', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#start-image-capture') - .click(); - - cy - .wait(8000); - - cy - .get('smart-camera-web') - .shadow() - .find('#review-screen-close') - .click(); - - cy.exitScreens(); - }); - - it('should navigate to "closed" when close button is pressed in id screen', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#start-image-capture') - .click(); - - cy - .wait(8000); - - cy - .get('smart-camera-web') - .shadow() - .find('#select-selfie') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#id-screen-close') - .click(); - - cy.exitScreens(); - }); - - it('should navigate to "closed" when close button is pressed in id review screen', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#start-image-capture') - .click(); - - cy - .wait(8000); - - cy - .get('smart-camera-web') - .shadow() - .find('#select-selfie') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#capture-id-image') - .click(); - - cy - .wait(2000); - - cy - .get('smart-camera-web') - .shadow() - .find('#id-review-screen-close') - .click(); - - cy.exitScreens(); - }); - - it('should navigate to "closed" when close button is pressed in id back screen', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#start-image-capture') - .click(); - - cy - .wait(8000); - - cy - .get('smart-camera-web') - .shadow() - .find('#select-selfie') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#capture-id-image') - .click(); - - cy - .wait(2000); - - cy - .get('smart-camera-web') - .shadow() - .find('#select-id-image') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#back-screen-close') - .click(); - - cy.exitScreens(); - }); - - it('should navigate to "closed" when close button is pressed in id back review screen', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#start-image-capture') - .click(); - - cy - .wait(8000); - - cy - .get('smart-camera-web') - .shadow() - .find('#select-selfie') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#capture-id-image') - .click(); - - cy - .wait(2000); - - cy - .get('smart-camera-web') - .shadow() - .find('#select-id-image') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#capture-back-of-id-image') - .click(); - - cy - .wait(2000); - - cy - .get('smart-camera-web') - .shadow() - .find('#back-review-screen-close') - .click(); - - cy.exitScreens(); - }); + beforeEach(() => { + cy.visit('/capture-back-of-id-navigation'); + }); + + it('should find the button to request-camera-access', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .should('contain.text', 'Request Camera Access'); + }); + + it('should navigate to "back_pressed" when back button on request page button is pressed', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access'); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-button-exit') + .click(); + + cy.location('pathname').should('eq', '/back_pressed'); + cy + .get('smart-camera-web') + .should('not.exist'); + }); + + it('should navigate to "back_pressed" when back button is pressed in camera screen', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#request-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#camera-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('.back-button-exit') + .last() + .click(); + + cy.location('pathname').should('eq', '/back_pressed'); + cy + .get('smart-camera-web') + .should('not.exist'); + }); + + it('should switch from the idEntryScreen to the selfieScreen on clicking the back button', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#start-image-capture') + .click(); + + cy + .wait(8000); + + cy + .get('smart-camera-web') + .shadow() + .find('#select-selfie') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#camera-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-button-selfie') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#camera-screen') + .should('be.visible'); + }); + + it('should switch from the idCameraScreen to the idEntryScreen on clicking the "back" button', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#start-image-capture') + .click(); + + cy + .wait(8000); + + cy + .get('smart-camera-web') + .shadow() + .find('#select-selfie') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen #take-photo') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-button-id-entry') + .click(); + + // cy + // .wait(2000); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-camera-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('be.visible'); + }); + + it('should switch from the backOfIdEntryScreen to the idReviewScreen when the back button is clicked', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#start-image-capture') + .click(); + + cy + .wait(8000); + + cy + .get('smart-camera-web') + .shadow() + .find('#select-selfie') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen #take-photo') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#capture-id-image') + .click(); + + cy + .wait(2000); + + cy + .get('smart-camera-web') + .shadow() + .find('#select-id-image') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-entry-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-button-id-image') + .click(); + + // cy + // .wait(2000); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-entry-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-review-screen') + .should('be.visible'); + }); + + it('should switch from the backOfIdCameraScreen to the backOfIdEntryScreen on clicking the "back" button', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#start-image-capture') + .click(); + + cy + .wait(8000); + + cy + .get('smart-camera-web') + .shadow() + .find('#select-selfie') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen #take-photo') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#capture-id-image') + .click(); + + cy + .wait(2000); + + cy + .get('smart-camera-web') + .shadow() + .find('#select-id-image') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-entry-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-entry-screen #take-photo') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-button-back-id-entry') + .click(); + + // cy + // .wait(2000); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-camera-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-entry-screen') + .should('be.visible'); + }); + + it('should navigate to "closed" when close button is pressed in request screen', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-screen-close') + .click(); + + cy.exitScreens(); + }); + + it('should navigate to "closed" when close button is pressed in selfie screen', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#camera-screen-close') + .last() + .click(); + + cy.exitScreens(); + }); + + it('should navigate to "closed" when close button is pressed in selfie review screen', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#start-image-capture') + .click(); + + cy + .wait(8000); + + cy + .get('smart-camera-web') + .shadow() + .find('#review-screen-close') + .click(); + + cy.exitScreens(); + }); + + it('should navigate to "closed" when close button is pressed in id entry screen', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#start-image-capture') + .click(); + + cy + .wait(8000); + + cy + .get('smart-camera-web') + .shadow() + .find('#select-selfie') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-close') + .click(); + + cy.exitScreens(); + }); + + it('should navigate to "closed" when close button is pressed in id camera screen', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#start-image-capture') + .click(); + + cy + .wait(8000); + + cy + .get('smart-camera-web') + .shadow() + .find('#select-selfie') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen #take-photo') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-camera-close') + .click(); + + cy.exitScreens(); + }); + + it('should navigate to "closed" when close button is pressed in id review screen', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#start-image-capture') + .click(); + + cy + .wait(8000); + + cy + .get('smart-camera-web') + .shadow() + .find('#select-selfie') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen #take-photo') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#capture-id-image') + .click(); + + cy + .wait(2000); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-review-screen-close') + .click(); + + cy.exitScreens(); + }); + + it('should navigate to "closed" when close button is pressed in id back entry screen', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#start-image-capture') + .click(); + + cy + .wait(8000); + + cy + .get('smart-camera-web') + .shadow() + .find('#select-selfie') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen #take-photo') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#capture-id-image') + .click(); + + cy + .wait(2000); + + cy + .get('smart-camera-web') + .shadow() + .find('#select-id-image') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-entry-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-id-entry-close') + .click(); + + cy.exitScreens(); + }); + + it('should navigate to "closed" when close button is pressed in id back camera screen', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#start-image-capture') + .click(); + + cy + .wait(8000); + + cy + .get('smart-camera-web') + .shadow() + .find('#select-selfie') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen #take-photo') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#capture-id-image') + .click(); + + cy + .wait(2000); + + cy + .get('smart-camera-web') + .shadow() + .find('#select-id-image') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-entry-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-entry-screen #take-photo') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-id-camera-close') + .click(); + + cy.exitScreens(); + }); + + it('should navigate to "closed" when close button is pressed in id back review screen', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#start-image-capture') + .click(); + + cy + .wait(8000); + + cy + .get('smart-camera-web') + .shadow() + .find('#select-selfie') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen #take-photo') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#capture-id-image') + .click(); + + cy + .wait(2000); + + cy + .get('smart-camera-web') + .shadow() + .find('#select-id-image') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-entry-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-entry-screen #take-photo') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-entry-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#capture-back-of-id-image') + .click(); + + cy + .wait(2000); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-review-screen-close') + .click(); + + cy.exitScreens(); + }); }); diff --git a/cypress/e2e/smart-camera-web-hide-back-to-host.cy.js b/cypress/e2e/smart-camera-web-hide-back-to-host.cy.js index 4b988712..066470f3 100644 --- a/cypress/e2e/smart-camera-web-hide-back-to-host.cy.js +++ b/cypress/e2e/smart-camera-web-hide-back-to-host.cy.js @@ -1,19 +1,19 @@ describe('SmartCameraWeb', () => { - it('shows attribution by default', () => { - cy.visit('/'); - cy - .get('smart-camera-web') - .shadow() - .find('.back-button-exit') - .should('be.visible'); - }); + it('shows attribution by default', () => { + cy.visit('/'); + cy + .get('smart-camera-web') + .shadow() + .find('.back-button-exit') + .should('be.visible'); + }); - it('hides back exit button when `hide-back-to-host` attribute is passed', () => { - cy.visit('/capture-id-hide-back-to-host'); - cy - .get('smart-camera-web') - .shadow() - .find('.back-button-exit') - .should('not.visible'); - }); -}); \ No newline at end of file + it('hides back exit button when `hide-back-to-host` attribute is passed', () => { + cy.visit('/capture-id-hide-back-to-host'); + cy + .get('smart-camera-web') + .shadow() + .find('.back-button-exit') + .should('not.exist'); + }); +}); diff --git a/cypress/e2e/smart-camera-web-with-back-of-id-portrait.cy.js b/cypress/e2e/smart-camera-web-with-back-of-id-portrait.cy.js index a7d7b15c..1c363779 100644 --- a/cypress/e2e/smart-camera-web-with-back-of-id-portrait.cy.js +++ b/cypress/e2e/smart-camera-web-with-back-of-id-portrait.cy.js @@ -6,453 +6,615 @@ // https://on.cypress.io/writing-first-test context('SmartCameraWeb', () => { - beforeEach(() => { - cy.visit('/capture-back-of-id-portrait'); - }); - - it('should find the button to request-camera-access', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .should('contain.text', 'Request Camera Access'); - }); - - it('should switch from the request screen to the camera screen on clicking "Request Camera Access"', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#request-screen') - .should('not.be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#camera-screen') - .should('be.visible'); - }); - - it('should switch from the camera screen to the review screen on clicking "Take Selfie"', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#start-image-capture') - .click(); - - cy - .wait(8000); - - cy - .get('smart-camera-web') - .shadow() - .find('#camera-screen') - .should('not.be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#review-screen') - .should('be.visible'); - }); - - it('should show a "SMILE" prompt halfway through the video capture', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#smile-cta') - .should('not.be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#start-image-capture') - .click(); - - cy - .wait(3000); - - cy - .get('smart-camera-web') - .shadow() - .find('#smile-cta') - .should('be.visible'); - - cy - .wait(5000); - - cy - .get('smart-camera-web') - .shadow() - .find('#smile-cta') - .should('not.be.visible'); - }); - - it('should switch from the review screen back to the camera screen on clicking "Re-take selfie"', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#start-image-capture') - .click(); - - cy - .wait(8000); - - cy - .get('smart-camera-web') - .shadow() - .find('#restart-image-capture') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#camera-screen') - .should('be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#review-screen') - .should('not.be.visible'); - }); - - it('should switch from the review screen to the ID camera screen on clicking "Yes, use this one"', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#start-image-capture') - .click(); - - cy - .wait(8000); - - cy - .get('smart-camera-web') - .shadow() - .find('#select-selfie') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#review-screen') - .should('not.be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#id-camera-screen') - .should('be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#id-camera-screen .id-video-container.portrait') - .should('be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#id-camera-screen .id-video-container.portrait .actions') - .should('be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#id-camera-screen .id-video-container.portrait .image-frame-portrait') - .should('be.visible'); - }); - - it('should capture a photo when "capture-id-image" is clicked, and move to the "id-review-screen"', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#start-image-capture') - .click(); - - cy - .wait(8000); - - cy - .get('smart-camera-web') - .shadow() - .find('#select-selfie') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#capture-id-image') - .click(); - - cy - .wait(2000); - - cy - .get('smart-camera-web') - .shadow() - .find('#id-camera-screen') - .should('not.be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#id-review-screen') - .should('be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#id-review-screen .id-video-container.portrait img') - .should('have.css', 'transform', 'none'); - }); - - it('should switch from the review screen to the back of ID camera screen on clicking the "Approve" icon', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#start-image-capture') - .click(); - - cy - .wait(8000); - - cy - .get('smart-camera-web') - .shadow() - .find('#select-selfie') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#capture-id-image') - .click(); - - cy - .wait(2000); - - cy - .get('smart-camera-web') - .shadow() - .find('#select-id-image') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#id-review-screen') - .should('not.be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#back-of-id-camera-screen') - .should('be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#back-of-id-camera-screen .id-video-container.portrait') - .should('be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#back-of-id-camera-screen .id-video-container.portrait .actions') - .should('be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#back-of-id-camera-screen .id-video-container.portrait .image-frame-portrait') - .should('be.visible'); - }); - - it('should capture a photo, and move from the back of ID camera screen to the back of ID review screen on clicking the "capture" icon', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#start-image-capture') - .click(); - - cy - .wait(8000); - - cy - .get('smart-camera-web') - .shadow() - .find('#select-selfie') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#capture-id-image') - .click(); - - cy - .wait(2000); - - cy - .get('smart-camera-web') - .shadow() - .find('#select-id-image') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#back-of-id-camera-screen') - .should('be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#capture-back-of-id-image') - .click(); - - cy - .wait(2000); - - cy - .get('smart-camera-web') - .shadow() - .find('#back-of-id-camera-screen') - .should('not.be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#back-of-id-review-screen') - .should('be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#back-of-id-review-screen .id-video-container.portrait img') - .should('have.css', 'transform', 'none'); - }); - - it('should switch from the back of ID review screen to the back of ID camera screen on clicking the "Re-Capture" icon', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#start-image-capture') - .click(); - - cy - .wait(8000); - - cy - .get('smart-camera-web') - .shadow() - .find('#select-selfie') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#capture-id-image') - .click(); - - cy - .wait(2000); - - cy - .get('smart-camera-web') - .shadow() - .find('#select-id-image') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#back-of-id-camera-screen') - .should('be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#capture-back-of-id-image') - .click(); - - cy - .wait(2000); - - cy - .get('smart-camera-web') - .shadow() - .find('#re-capture-back-of-id-image') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#back-of-id-review-screen') - .should('not.be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#back-of-id-camera-screen') - .should('be.visible'); - - cy + beforeEach(() => { + cy.visit('/capture-back-of-id-portrait'); + }); + + it('should find the button to request-camera-access', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .should('contain.text', 'Request Camera Access'); + }); + + it('should switch from the request screen to the camera screen on clicking "Request Camera Access"', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#request-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#camera-screen') + .should('be.visible'); + }); + + it('should switch from the camera screen to the review screen on clicking "Take Selfie"', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#start-image-capture') + .click(); + + cy + .wait(8000); + + cy + .get('smart-camera-web') + .shadow() + .find('#camera-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#review-screen') + .should('be.visible'); + }); + + it('should show a "SMILE" prompt halfway through the video capture', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#smile-cta') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#start-image-capture') + .click(); + + cy + .wait(3000); + + cy + .get('smart-camera-web') + .shadow() + .find('#smile-cta') + .should('be.visible'); + + cy + .wait(5000); + + cy + .get('smart-camera-web') + .shadow() + .find('#smile-cta') + .should('not.be.visible'); + }); + + it('should switch from the review screen back to the camera screen on clicking "Re-take selfie"', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#start-image-capture') + .click(); + + cy + .wait(8000); + + cy + .get('smart-camera-web') + .shadow() + .find('#restart-image-capture') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#camera-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#review-screen') + .should('not.be.visible'); + }); + + it('should switch from the review screen to the ID camera screen on clicking "Yes, use this one"', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#start-image-capture') + .click(); + + cy + .wait(8000); + + cy + .get('smart-camera-web') + .shadow() + .find('#select-selfie') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#review-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen #take-photo') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-camera-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-camera-screen .id-video-container.portrait') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-camera-screen .id-video-container.portrait .actions') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-camera-screen .id-video-container.portrait .image-frame-portrait') + .should('be.visible'); + }); + + it('should capture a photo when "capture-id-image" is clicked, and move to the "id-review-screen"', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#start-image-capture') + .click(); + + cy + .wait(8000); + + cy + .get('smart-camera-web') + .shadow() + .find('#select-selfie') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen #take-photo') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#capture-id-image') + .click(); + + cy + .wait(2000); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-camera-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-review-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-review-screen .id-video-container.portrait img') + .should('have.css', 'transform', 'none'); + }); + + it('should switch from the review screen to the back of ID camera screen on clicking the "Approve" icon', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#start-image-capture') + .click(); + + cy + .wait(8000); + + cy + .get('smart-camera-web') + .shadow() + .find('#select-selfie') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen #take-photo') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#capture-id-image') + .click(); + + cy + .wait(2000); + + cy + .get('smart-camera-web') + .shadow() + .find('#select-id-image') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-review-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-entry-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-entry-screen #take-photo') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-entry-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-camera-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-camera-screen .id-video-container.portrait') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-camera-screen .id-video-container.portrait .actions') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-camera-screen .id-video-container.portrait .image-frame-portrait') + .should('be.visible'); + }); + + it('should capture a photo, and move from the back of ID camera screen to the back of ID review screen on clicking the "capture" icon', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#start-image-capture') + .click(); + + cy + .wait(8000); + + cy + .get('smart-camera-web') + .shadow() + .find('#select-selfie') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen #take-photo') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#capture-id-image') + .click(); + + cy + .wait(2000); + + cy + .get('smart-camera-web') + .shadow() + .find('#select-id-image') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-entry-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-entry-screen #take-photo') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-entry-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-camera-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#capture-back-of-id-image') + .click(); + + cy + .wait(2000); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-camera-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-review-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-review-screen .id-video-container.portrait img') + .should('have.css', 'transform', 'none'); + }); + + it('should switch from the back of ID review screen to the back of ID camera screen on clicking the "Re-Capture" icon', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#start-image-capture') + .click(); + + cy + .wait(8000); + + cy + .get('smart-camera-web') + .shadow() + .find('#select-selfie') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen #take-photo') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#capture-id-image') + .click(); + + cy + .wait(2000); + + cy + .get('smart-camera-web') + .shadow() + .find('#select-id-image') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-entry-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-entry-screen #take-photo') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-entry-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-camera-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#capture-back-of-id-image') + .click(); + + cy + .wait(2000); + + cy + .get('smart-camera-web') + .shadow() + .find('#re-capture-back-of-id-image') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-review-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-entry-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-entry-screen #take-photo') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-entry-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-camera-screen') + .should('be.visible'); + + cy .get('smart-camera-web') .shadow() .find('#back-of-id-camera-screen .id-video-container.portrait') @@ -475,76 +637,112 @@ context('SmartCameraWeb', () => { .shadow() .find('#back-of-id-camera-screen .id-video-container.landscape') .should('not.exist'); - }); - - it('should switch from the back of ID review screen to the thanks screen on clicking the "Approve" icon', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#start-image-capture') - .click(); - - cy - .wait(8000); - - cy - .get('smart-camera-web') - .shadow() - .find('#select-selfie') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#capture-id-image') - .click(); - - cy - .wait(2000); - - cy - .get('smart-camera-web') - .shadow() - .find('#select-id-image') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#back-of-id-camera-screen') - .should('be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#capture-back-of-id-image') - .click(); - - cy - .wait(2000); - - cy - .get('smart-camera-web') - .shadow() - .find('#select-back-of-id-image') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#back-of-id-review-screen') - .should('not.be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#thanks-screen') - .should('be.visible'); - }); + }); + + it('should switch from the back of ID review screen to the thanks screen on clicking the "Approve" icon', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#start-image-capture') + .click(); + + cy + .wait(8000); + + cy + .get('smart-camera-web') + .shadow() + .find('#select-selfie') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen #take-photo') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#capture-id-image') + .click(); + + cy + .wait(2000); + + cy + .get('smart-camera-web') + .shadow() + .find('#select-id-image') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-entry-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-entry-screen #take-photo') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-entry-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-camera-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#capture-back-of-id-image') + .click(); + + cy + .wait(2000); + + cy + .get('smart-camera-web') + .shadow() + .find('#select-back-of-id-image') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-review-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#thanks-screen') + .should('be.visible'); + }); }); diff --git a/cypress/e2e/smart-camera-web-with-back-of-id.cy.js b/cypress/e2e/smart-camera-web-with-back-of-id.cy.js index ce5466af..14cc5175 100644 --- a/cypress/e2e/smart-camera-web-with-back-of-id.cy.js +++ b/cypress/e2e/smart-camera-web-with-back-of-id.cy.js @@ -6,453 +6,615 @@ // https://on.cypress.io/writing-first-test context('SmartCameraWeb', () => { - beforeEach(() => { - cy.visit('/capture-back-of-id'); - }); - - it('should find the button to request-camera-access', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .should('contain.text', 'Request Camera Access'); - }); - - it('should switch from the request screen to the camera screen on clicking "Request Camera Access"', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#request-screen') - .should('not.be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#camera-screen') - .should('be.visible'); - }); - - it('should switch from the camera screen to the review screen on clicking "Take Selfie"', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#start-image-capture') - .click(); - - cy - .wait(8000); - - cy - .get('smart-camera-web') - .shadow() - .find('#camera-screen') - .should('not.be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#review-screen') - .should('be.visible'); - }); - - it('should show a "SMILE" prompt halfway through the video capture', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#smile-cta') - .should('not.be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#start-image-capture') - .click(); - - cy - .wait(3000); - - cy - .get('smart-camera-web') - .shadow() - .find('#smile-cta') - .should('be.visible'); - - cy - .wait(5000); - - cy - .get('smart-camera-web') - .shadow() - .find('#smile-cta') - .should('not.be.visible'); - }); - - it('should switch from the review screen back to the camera screen on clicking "Re-take selfie"', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#start-image-capture') - .click(); - - cy - .wait(8000); - - cy - .get('smart-camera-web') - .shadow() - .find('#restart-image-capture') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#camera-screen') - .should('be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#review-screen') - .should('not.be.visible'); - }); - - it('should switch from the review screen to the ID camera screen on clicking "Yes, use this one"', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#start-image-capture') - .click(); - - cy - .wait(8000); - - cy - .get('smart-camera-web') - .shadow() - .find('#select-selfie') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#review-screen') - .should('not.be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#id-camera-screen') - .should('be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#id-camera-screen .id-video-container.landscape') - .should('be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#id-camera-screen .id-video-container.landscape .actions') - .should('be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#id-camera-screen .id-video-container.landscape .image-frame') - .should('be.visible'); - }); - - it('should capture a photo when "capture-id-image" is clicked, and move to the "id-review-screen"', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#start-image-capture') - .click(); - - cy - .wait(8000); - - cy - .get('smart-camera-web') - .shadow() - .find('#select-selfie') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#capture-id-image') - .click(); - - cy - .wait(2000); - - cy - .get('smart-camera-web') - .shadow() - .find('#id-camera-screen') - .should('not.be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#id-review-screen') - .should('be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#id-review-screen .id-video-container.landscape img') - .should('not.have.css', 'transform', 'none'); - }); - - it('should switch from the review screen to the back of ID camera screen on clicking the "Approve" icon', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#start-image-capture') - .click(); - - cy - .wait(8000); - - cy - .get('smart-camera-web') - .shadow() - .find('#select-selfie') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#capture-id-image') - .click(); - - cy - .wait(2000); - - cy - .get('smart-camera-web') - .shadow() - .find('#select-id-image') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#id-review-screen') - .should('not.be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#back-of-id-camera-screen') - .should('be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#back-of-id-camera-screen .id-video-container.landscape') - .should('be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#back-of-id-camera-screen .id-video-container.landscape .actions') - .should('be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#back-of-id-camera-screen .id-video-container.landscape .image-frame') - .should('be.visible'); - }); - - it('should capture a photo, and move from the back of ID camera screen to the back of ID review screen on clicking the "capture" icon', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#start-image-capture') - .click(); - - cy - .wait(8000); - - cy - .get('smart-camera-web') - .shadow() - .find('#select-selfie') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#capture-id-image') - .click(); - - cy - .wait(2000); - - cy - .get('smart-camera-web') - .shadow() - .find('#select-id-image') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#back-of-id-camera-screen') - .should('be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#capture-back-of-id-image') - .click(); - - cy - .wait(2000); - - cy - .get('smart-camera-web') - .shadow() - .find('#back-of-id-camera-screen') - .should('not.be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#back-of-id-review-screen') - .should('be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#back-of-id-review-screen .id-video-container.landscape img') - .should('not.have.css', 'transform', 'none'); - }); - - it('should switch from the back of ID review screen to the back of ID camera screen on clicking the "Re-Capture" icon', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#start-image-capture') - .click(); - - cy - .wait(8000); - - cy - .get('smart-camera-web') - .shadow() - .find('#select-selfie') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#capture-id-image') - .click(); - - cy - .wait(2000); - - cy - .get('smart-camera-web') - .shadow() - .find('#select-id-image') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#back-of-id-camera-screen') - .should('be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#capture-back-of-id-image') - .click(); - - cy - .wait(2000); - - cy - .get('smart-camera-web') - .shadow() - .find('#re-capture-back-of-id-image') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#back-of-id-review-screen') - .should('not.be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#back-of-id-camera-screen') - .should('be.visible'); - - cy + beforeEach(() => { + cy.visit('/capture-back-of-id'); + }); + + it('should find the button to request-camera-access', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .should('contain.text', 'Request Camera Access'); + }); + + it('should switch from the request screen to the camera screen on clicking "Request Camera Access"', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#request-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#camera-screen') + .should('be.visible'); + }); + + it('should switch from the camera screen to the review screen on clicking "Take Selfie"', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#start-image-capture') + .click(); + + cy + .wait(8000); + + cy + .get('smart-camera-web') + .shadow() + .find('#camera-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#review-screen') + .should('be.visible'); + }); + + it('should show a "SMILE" prompt halfway through the video capture', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#smile-cta') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#start-image-capture') + .click(); + + cy + .wait(3000); + + cy + .get('smart-camera-web') + .shadow() + .find('#smile-cta') + .should('be.visible'); + + cy + .wait(5000); + + cy + .get('smart-camera-web') + .shadow() + .find('#smile-cta') + .should('not.be.visible'); + }); + + it('should switch from the review screen back to the camera screen on clicking "Re-take selfie"', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#start-image-capture') + .click(); + + cy + .wait(8000); + + cy + .get('smart-camera-web') + .shadow() + .find('#restart-image-capture') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#camera-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#review-screen') + .should('not.be.visible'); + }); + + it('should switch from the review screen to the ID camera screen on clicking "Yes, use this one"', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#start-image-capture') + .click(); + + cy + .wait(8000); + + cy + .get('smart-camera-web') + .shadow() + .find('#select-selfie') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen #take-photo') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#review-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-camera-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-camera-screen .id-video-container.landscape') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-camera-screen .id-video-container.landscape .actions') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-camera-screen .id-video-container.landscape .image-frame') + .should('be.visible'); + }); + + it('should capture a photo when "capture-id-image" is clicked, and move to the "id-review-screen"', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#start-image-capture') + .click(); + + cy + .wait(8000); + + cy + .get('smart-camera-web') + .shadow() + .find('#select-selfie') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen #take-photo') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#capture-id-image') + .click(); + + cy + .wait(2000); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-camera-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-review-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-review-screen .id-video-container.landscape img') + .should('not.have.css', 'transform', 'none'); + }); + + it('should switch from the review screen to the back of ID camera screen on clicking the "Approve" icon', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#start-image-capture') + .click(); + + cy + .wait(8000); + + cy + .get('smart-camera-web') + .shadow() + .find('#select-selfie') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen #take-photo') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#capture-id-image') + .click(); + + cy + .wait(2000); + + cy + .get('smart-camera-web') + .shadow() + .find('#select-id-image') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-entry-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-entry-screen #take-photo') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-entry-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-review-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-camera-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-camera-screen .id-video-container.landscape') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-camera-screen .id-video-container.landscape .actions') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-camera-screen .id-video-container.landscape .image-frame') + .should('be.visible'); + }); + + it('should capture a photo, and move from the back of ID camera screen to the back of ID review screen on clicking the "capture" icon', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#start-image-capture') + .click(); + + cy + .wait(8000); + + cy + .get('smart-camera-web') + .shadow() + .find('#select-selfie') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen #take-photo') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#capture-id-image') + .click(); + + cy + .wait(2000); + + cy + .get('smart-camera-web') + .shadow() + .find('#select-id-image') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-entry-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-entry-screen #take-photo') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-entry-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-camera-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#capture-back-of-id-image') + .click(); + + cy + .wait(2000); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-camera-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-review-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-review-screen .id-video-container.landscape img') + .should('not.have.css', 'transform', 'none'); + }); + + it.only('should switch from the back of ID review screen to the back of ID camera screen on clicking the "Re-Capture" icon', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#start-image-capture') + .click(); + + cy + .wait(8000); + + cy + .get('smart-camera-web') + .shadow() + .find('#select-selfie') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen #take-photo') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#capture-id-image') + .click(); + + cy + .wait(2000); + + cy + .get('smart-camera-web') + .shadow() + .find('#select-id-image') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-entry-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-entry-screen #take-photo') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-entry-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-camera-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#capture-back-of-id-image') + .click(); + + cy + .wait(2000); + + cy + .get('smart-camera-web') + .shadow() + .find('#re-capture-back-of-id-image') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-review-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-entry-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-entry-screen #take-photo') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-entry-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-camera-screen') + .should('be.visible'); + + cy .get('smart-camera-web') .shadow() .find('#back-of-id-camera-screen .id-video-container.landscape') @@ -475,76 +637,112 @@ context('SmartCameraWeb', () => { .shadow() .find('#back-of-id-camera-screen .id-video-container.portrait') .should('not.exist'); - }); - - it('should switch from the back of ID review screen to the thanks screen on clicking the "Approve" icon', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#start-image-capture') - .click(); - - cy - .wait(8000); - - cy - .get('smart-camera-web') - .shadow() - .find('#select-selfie') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#capture-id-image') - .click(); - - cy - .wait(2000); - - cy - .get('smart-camera-web') - .shadow() - .find('#select-id-image') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#back-of-id-camera-screen') - .should('be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#capture-back-of-id-image') - .click(); - - cy - .wait(2000); - - cy - .get('smart-camera-web') - .shadow() - .find('#select-back-of-id-image') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#back-of-id-review-screen') - .should('not.be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#thanks-screen') - .should('be.visible'); - }); + }); + + it('should switch from the back of ID review screen to the thanks screen on clicking the "Approve" icon', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#start-image-capture') + .click(); + + cy + .wait(8000); + + cy + .get('smart-camera-web') + .shadow() + .find('#select-selfie') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen #take-photo') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#capture-id-image') + .click(); + + cy + .wait(2000); + + cy + .get('smart-camera-web') + .shadow() + .find('#select-id-image') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-entry-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-entry-screen #take-photo') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-entry-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-camera-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#capture-back-of-id-image') + .click(); + + cy + .wait(2000); + + cy + .get('smart-camera-web') + .shadow() + .find('#select-back-of-id-image') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#back-of-id-review-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#thanks-screen') + .should('be.visible'); + }); }); diff --git a/cypress/e2e/smart-camera-web-with-id-portrait.cy.js b/cypress/e2e/smart-camera-web-with-id-portrait.cy.js index 0f4b8414..bf30d936 100644 --- a/cypress/e2e/smart-camera-web-with-id-portrait.cy.js +++ b/cypress/e2e/smart-camera-web-with-id-portrait.cy.js @@ -6,358 +6,448 @@ // https://on.cypress.io/writing-first-test context('SmartCameraWeb', () => { - beforeEach(() => { - cy.visit('/capture-id-portrait'); - }); - - it('should find the button to request-camera-access', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .should('contain.text', 'Request Camera Access'); - }); - - it('should switch from the request screen to the camera screen on clicking "Request Camera Access"', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#request-screen') - .should('not.be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#camera-screen') - .should('be.visible'); - }); - - it('should switch from the camera screen to the review screen on clicking "Take Selfie"', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#start-image-capture') - .click(); - - cy - .wait(8000); - - cy - .get('smart-camera-web') - .shadow() - .find('#camera-screen') - .should('not.be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#review-screen') - .should('be.visible'); - }); - - it('should show a "SMILE" prompt halfway through the video capture', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#smile-cta') - .should('not.be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#start-image-capture') - .click(); - - cy - .wait(3000); - - cy - .get('smart-camera-web') - .shadow() - .find('#smile-cta') - .should('be.visible'); - - cy - .wait(5000); - - cy - .get('smart-camera-web') - .shadow() - .find('#smile-cta') - .should('not.be.visible'); - }); - - it('should switch from the review screen back to the camera screen on clicking "Re-take selfie"', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#start-image-capture') - .click(); - - cy - .wait(8000); - - cy - .get('smart-camera-web') - .shadow() - .find('#restart-image-capture') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#camera-screen') - .should('be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#review-screen') - .should('not.be.visible'); - }); - - it('should switch from the review screen to the id camera screen on clicking "Yes, use this one"', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#start-image-capture') - .click(); - - cy - .wait(8000); - - cy - .get('smart-camera-web') - .shadow() - .find('#select-selfie') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#review-screen') - .should('not.be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#id-camera-screen') - .should('be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#id-camera-screen .id-video-container.portrait') - .should('be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#id-camera-screen .id-video-container.portrait .actions') - .should('be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#id-camera-screen .id-video-container.portrait .image-frame-portrait') - .should('be.visible'); - }); - - it('should capture a photo when "capture-id-image" is clicked, and move to the "id-review-screen"', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#start-image-capture') - .click(); - - cy - .wait(8000); - - cy - .get('smart-camera-web') - .shadow() - .find('#select-selfie') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#capture-id-image') - .click(); - - cy - .wait(2000); - - cy - .get('smart-camera-web') - .shadow() - .find('#id-camera-screen') - .should('not.be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#id-review-screen') - .should('be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#id-review-screen .id-video-container.portrait img') - .should('have.css', 'transform', 'none'); - }); - - it('should switch from the id review screen back to the camera screen on clicking the "Re-Capture" icon', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#start-image-capture') - .click(); - - cy - .wait(8000); - - cy - .get('smart-camera-web') - .shadow() - .find('#select-selfie') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#capture-id-image') - .click(); - - cy - .wait(2000); - - cy - .get('smart-camera-web') - .shadow() - .find('#re-capture-id-image') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#id-review-screen') - .should('not.be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#id-camera-screen') - .should('be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#id-camera-screen .id-video-container.portrait') - .should('be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#id-camera-screen .id-video-container.portrait .actions') - .should('be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#id-camera-screen .id-video-container.portrait .image-frame-portrait') - .should('be.visible'); - }); - - it('should switch from the review screen to the id camera screen on clicking the "Approve" icon', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#start-image-capture') - .click(); - - cy - .wait(8000); - - cy - .get('smart-camera-web') - .shadow() - .find('#select-selfie') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#capture-id-image') - .click(); - - cy - .wait(2000); - - cy - .get('smart-camera-web') - .shadow() - .find('#select-id-image') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#id-review-screen') - .should('not.be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#thanks-screen') - .should('be.visible'); - }); + beforeEach(() => { + cy.visit('/capture-id-portrait'); + }); + + it('should find the button to request-camera-access', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .should('contain.text', 'Request Camera Access'); + }); + + it('should switch from the request screen to the camera screen on clicking "Request Camera Access"', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#request-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#camera-screen') + .should('be.visible'); + }); + + it('should switch from the camera screen to the review screen on clicking "Take Selfie"', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#start-image-capture') + .click(); + + cy + .wait(8000); + + cy + .get('smart-camera-web') + .shadow() + .find('#camera-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#review-screen') + .should('be.visible'); + }); + + it('should show a "SMILE" prompt halfway through the video capture', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#smile-cta') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#start-image-capture') + .click(); + + cy + .wait(3000); + + cy + .get('smart-camera-web') + .shadow() + .find('#smile-cta') + .should('be.visible'); + + cy + .wait(5000); + + cy + .get('smart-camera-web') + .shadow() + .find('#smile-cta') + .should('not.be.visible'); + }); + + it('should switch from the review screen back to the camera screen on clicking "Re-take selfie"', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#start-image-capture') + .click(); + + cy + .wait(8000); + + cy + .get('smart-camera-web') + .shadow() + .find('#restart-image-capture') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#camera-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#review-screen') + .should('not.be.visible'); + }); + + it('should switch from the review screen to the id camera screen on clicking "Yes, use this one"', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#start-image-capture') + .click(); + + cy + .wait(8000); + + cy + .get('smart-camera-web') + .shadow() + .find('#select-selfie') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen #take-photo') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#review-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-camera-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-camera-screen .id-video-container.portrait') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-camera-screen .id-video-container.portrait .actions') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-camera-screen .id-video-container.portrait .image-frame-portrait') + .should('be.visible'); + }); + + it('should capture a photo when "capture-id-image" is clicked, and move to the "id-review-screen"', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#start-image-capture') + .click(); + + cy + .wait(8000); + + cy + .get('smart-camera-web') + .shadow() + .find('#select-selfie') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen #take-photo') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#capture-id-image') + .click(); + + cy + .wait(2000); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-camera-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-review-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-review-screen .id-video-container.portrait img') + .should('have.css', 'transform', 'none'); + }); + + it('should switch from the id review screen back to the camera screen on clicking the "Re-Capture" icon', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#start-image-capture') + .click(); + + cy + .wait(8000); + + cy + .get('smart-camera-web') + .shadow() + .find('#select-selfie') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen #take-photo') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#capture-id-image') + .click(); + + cy + .wait(2000); + + cy + .get('smart-camera-web') + .shadow() + .find('#re-capture-id-image') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-review-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen #take-photo') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-camera-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-camera-screen .id-video-container.portrait') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-camera-screen .id-video-container.portrait .actions') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-camera-screen .id-video-container.portrait .image-frame-portrait') + .should('be.visible'); + }); + + it('should switch from the review screen to the id camera screen on clicking the "Approve" icon', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#start-image-capture') + .click(); + + cy + .wait(8000); + + cy + .get('smart-camera-web') + .shadow() + .find('#select-selfie') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen #take-photo') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#capture-id-image') + .click(); + + cy + .wait(2000); + + cy + .get('smart-camera-web') + .shadow() + .find('#select-id-image') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-review-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#thanks-screen') + .should('be.visible'); + }); }); diff --git a/cypress/e2e/smart-camera-web-with-id.cy.js b/cypress/e2e/smart-camera-web-with-id.cy.js index 0d95f12c..c76f2b6f 100644 --- a/cypress/e2e/smart-camera-web-with-id.cy.js +++ b/cypress/e2e/smart-camera-web-with-id.cy.js @@ -6,358 +6,448 @@ // https://on.cypress.io/writing-first-test context('SmartCameraWeb', () => { - beforeEach(() => { - cy.visit('/capture-id'); - }); - - it('should find the button to request-camera-access', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .should('contain.text', 'Request Camera Access'); - }); - - it('should switch from the request screen to the camera screen on clicking "Request Camera Access"', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#request-screen') - .should('not.be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#camera-screen') - .should('be.visible'); - }); - - it('should switch from the camera screen to the review screen on clicking "Take Selfie"', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#start-image-capture') - .click(); - - cy - .wait(8000); - - cy - .get('smart-camera-web') - .shadow() - .find('#camera-screen') - .should('not.be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#review-screen') - .should('be.visible'); - }); - - it('should show a "SMILE" prompt halfway through the video capture', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#smile-cta') - .should('not.be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#start-image-capture') - .click(); - - cy - .wait(3000); - - cy - .get('smart-camera-web') - .shadow() - .find('#smile-cta') - .should('be.visible'); - - cy - .wait(5000); - - cy - .get('smart-camera-web') - .shadow() - .find('#smile-cta') - .should('not.be.visible'); - }); - - it('should switch from the review screen back to the camera screen on clicking "Re-take selfie"', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#start-image-capture') - .click(); - - cy - .wait(8000); - - cy - .get('smart-camera-web') - .shadow() - .find('#restart-image-capture') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#camera-screen') - .should('be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#review-screen') - .should('not.be.visible'); - }); - - it('should switch from the review screen to the id camera screen on clicking "Yes, use this one"', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#start-image-capture') - .click(); - - cy - .wait(8000); - - cy - .get('smart-camera-web') - .shadow() - .find('#select-selfie') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#review-screen') - .should('not.be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#id-camera-screen') - .should('be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#id-camera-screen .id-video-container.landscape') - .should('be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#id-camera-screen .id-video-container.landscape .actions') - .should('be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#id-camera-screen .id-video-container.landscape .image-frame') - .should('be.visible'); - }); - - it('should capture a photo when "capture-id-image" is clicked, and move to the "id-review-screen"', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#start-image-capture') - .click(); - - cy - .wait(8000); - - cy - .get('smart-camera-web') - .shadow() - .find('#select-selfie') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#capture-id-image') - .click(); - - cy - .wait(2000); - - cy - .get('smart-camera-web') - .shadow() - .find('#id-camera-screen') - .should('not.be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#id-review-screen') - .should('be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#id-review-screen .id-video-container.landscape img') - .should('not.have.css', 'transform', 'none'); - }); - - it('should switch from the id review screen back to the camera screen on clicking the "Re-Capture" icon', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#start-image-capture') - .click(); - - cy - .wait(8000); - - cy - .get('smart-camera-web') - .shadow() - .find('#select-selfie') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#capture-id-image') - .click(); - - cy - .wait(2000); - - cy - .get('smart-camera-web') - .shadow() - .find('#re-capture-id-image') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#id-review-screen') - .should('not.be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#id-camera-screen') - .should('be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#id-camera-screen .id-video-container.landscape') - .should('be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#id-camera-screen .id-video-container.landscape .actions') - .should('be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#id-camera-screen .id-video-container.landscape .image-frame') - .should('be.visible'); - }); - - it('should switch from the review screen to the id camera screen on clicking the "Approve" icon', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#start-image-capture') - .click(); - - cy - .wait(8000); - - cy - .get('smart-camera-web') - .shadow() - .find('#select-selfie') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#capture-id-image') - .click(); - - cy - .wait(2000); - - cy - .get('smart-camera-web') - .shadow() - .find('#select-id-image') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#id-review-screen') - .should('not.be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#thanks-screen') - .should('be.visible'); - }); + beforeEach(() => { + cy.visit('/capture-id'); + }); + + it('should find the button to request-camera-access', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .should('contain.text', 'Request Camera Access'); + }); + + it('should switch from the request screen to the camera screen on clicking "Request Camera Access"', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#request-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#camera-screen') + .should('be.visible'); + }); + + it('should switch from the camera screen to the review screen on clicking "Take Selfie"', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#start-image-capture') + .click(); + + cy + .wait(8000); + + cy + .get('smart-camera-web') + .shadow() + .find('#camera-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#review-screen') + .should('be.visible'); + }); + + it('should show a "SMILE" prompt halfway through the video capture', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#smile-cta') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#start-image-capture') + .click(); + + cy + .wait(3000); + + cy + .get('smart-camera-web') + .shadow() + .find('#smile-cta') + .should('be.visible'); + + cy + .wait(5000); + + cy + .get('smart-camera-web') + .shadow() + .find('#smile-cta') + .should('not.be.visible'); + }); + + it('should switch from the review screen back to the camera screen on clicking "Re-take selfie"', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#start-image-capture') + .click(); + + cy + .wait(8000); + + cy + .get('smart-camera-web') + .shadow() + .find('#restart-image-capture') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#camera-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#review-screen') + .should('not.be.visible'); + }); + + it('should switch from the review screen to the id camera screen on clicking "Yes, use this one"', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#start-image-capture') + .click(); + + cy + .wait(8000); + + cy + .get('smart-camera-web') + .shadow() + .find('#select-selfie') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen #take-photo') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#review-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-camera-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-camera-screen .id-video-container.landscape') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-camera-screen .id-video-container.landscape .actions') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-camera-screen .id-video-container.landscape .image-frame') + .should('be.visible'); + }); + + it('should capture a photo when "capture-id-image" is clicked, and move to the "id-review-screen"', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#start-image-capture') + .click(); + + cy + .wait(8000); + + cy + .get('smart-camera-web') + .shadow() + .find('#select-selfie') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen #take-photo') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#capture-id-image') + .click(); + + cy + .wait(2000); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-camera-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-review-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-review-screen .id-video-container.landscape img') + .should('not.have.css', 'transform', 'none'); + }); + + it('should switch from the id review screen back to the camera screen on clicking the "Re-Capture" icon', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#start-image-capture') + .click(); + + cy + .wait(8000); + + cy + .get('smart-camera-web') + .shadow() + .find('#select-selfie') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen #take-photo') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#capture-id-image') + .click(); + + cy + .wait(2000); + + cy + .get('smart-camera-web') + .shadow() + .find('#re-capture-id-image') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-review-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen #take-photo') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-camera-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-camera-screen .id-video-container.landscape') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-camera-screen .id-video-container.landscape .actions') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-camera-screen .id-video-container.landscape .image-frame') + .should('be.visible'); + }); + + it('should switch from the review screen to the id camera screen on clicking the "Approve" icon', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#start-image-capture') + .click(); + + cy + .wait(8000); + + cy + .get('smart-camera-web') + .shadow() + .find('#select-selfie') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen #take-photo') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-entry-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#capture-id-image') + .click(); + + cy + .wait(2000); + + cy + .get('smart-camera-web') + .shadow() + .find('#select-id-image') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#id-review-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#thanks-screen') + .should('be.visible'); + }); }); diff --git a/cypress/e2e/smart-camera-web.cy.js b/cypress/e2e/smart-camera-web.cy.js index 55b0ea84..2c0cf26a 100644 --- a/cypress/e2e/smart-camera-web.cy.js +++ b/cypress/e2e/smart-camera-web.cy.js @@ -6,213 +6,211 @@ // https://on.cypress.io/writing-first-test context('SmartCameraWeb', () => { - beforeEach(() => { - cy.visit('/'); - }); - - it('should find the button to request-camera-access', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .should('contain.text', 'Request Camera Access'); - }); - - it('should switch from the request screen to the camera screen on clicking "Request Camera Access"', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .wait(2000); - - cy - .get('smart-camera-web') - .shadow() - .find('#request-screen') - .should('not.be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#camera-screen') - .should('be.visible'); - }); - - it('should switch from the camera screen to the review screen on clicking "Take Selfie"', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#start-image-capture') - .click(); - - cy - .wait(8000); - - cy - .get('smart-camera-web') - .shadow() - .find('#camera-screen') - .should('not.be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#review-screen') - .should('be.visible'); - }); - - it('should show a "SMILE" prompt halfway through the video capture', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#smile-cta') - .should('not.be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#start-image-capture') - .click(); - - cy - .wait(3000); - - cy - .get('smart-camera-web') - .shadow() - .find('#smile-cta') - .should('be.visible'); - - cy - .wait(5000); - - cy - .get('smart-camera-web') - .shadow() - .find('#smile-cta') - .should('not.be.visible'); - }); - - it('should switch from the review screen back to the camera screen on clicking "Re-take selfie"', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#start-image-capture') - .click(); - - cy - .wait(8000); - - cy - .get('smart-camera-web') - .shadow() - .find('#restart-image-capture') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#camera-screen') - .should('be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#review-screen') - .should('not.be.visible'); - }); - - it('should switch from the review screen to the thanks screen on clicking "Yes, use this one"', () => { - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#start-image-capture') - .click(); - - cy - .wait(8000); - - cy - .get('smart-camera-web') - .shadow() - .find('#select-selfie') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#review-screen') - .should('not.be.visible'); - - - cy - .get('smart-camera-web') - .shadow() - .find('#thanks-screen') - .should('be.visible'); - }); - - it('should switch to request screen when "Rest"', () => { - - cy - .get('smart-camera-web').then((element) => { - element[0].reset(); - }); - - cy - .get('smart-camera-web') - .shadow() - .find('#request-camera-access') - .click(); - - cy - .get('smart-camera-web') - .shadow() - .find('#request-screen') - .should('not.be.visible'); - - cy - .get('smart-camera-web') - .shadow() - .find('#camera-screen') - .should('be.visible'); - - cy - .get('smart-camera-web').then((element) => { - element[0].reset(); - }); - - cy - .get('smart-camera-web') - .shadow() - .find('#request-screen') - .should('be.visible'); - }); + beforeEach(() => { + cy.visit('/'); + }); + + it('should find the button to request-camera-access', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .should('contain.text', 'Request Camera Access'); + }); + + it('should switch from the request screen to the camera screen on clicking "Request Camera Access"', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .wait(2000); + + cy + .get('smart-camera-web') + .shadow() + .find('#request-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#camera-screen') + .should('be.visible'); + }); + + it('should switch from the camera screen to the review screen on clicking "Take Selfie"', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#start-image-capture') + .click(); + + cy + .wait(8000); + + cy + .get('smart-camera-web') + .shadow() + .find('#camera-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#review-screen') + .should('be.visible'); + }); + + it('should show a "SMILE" prompt halfway through the video capture', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#smile-cta') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#start-image-capture') + .click(); + + cy + .wait(3000); + + cy + .get('smart-camera-web') + .shadow() + .find('#smile-cta') + .should('be.visible'); + + cy + .wait(5000); + + cy + .get('smart-camera-web') + .shadow() + .find('#smile-cta') + .should('not.be.visible'); + }); + + it('should switch from the review screen back to the camera screen on clicking "Re-take selfie"', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#start-image-capture') + .click(); + + cy + .wait(8000); + + cy + .get('smart-camera-web') + .shadow() + .find('#restart-image-capture') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#camera-screen') + .should('be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#review-screen') + .should('not.be.visible'); + }); + + it('should switch from the review screen to the thanks screen on clicking "Yes, use this one"', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#start-image-capture') + .click(); + + cy + .wait(8000); + + cy + .get('smart-camera-web') + .shadow() + .find('#select-selfie') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#review-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#thanks-screen') + .should('be.visible'); + }); + + it('should switch to request screen when "Rest"', () => { + cy + .get('smart-camera-web').then((element) => { + element[0].reset(); + }); + + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#request-screen') + .should('not.be.visible'); + + cy + .get('smart-camera-web') + .shadow() + .find('#camera-screen') + .should('be.visible'); + + cy + .get('smart-camera-web').then((element) => { + element[0].reset(); + }); + + cy + .get('smart-camera-web') + .shadow() + .find('#request-screen') + .should('be.visible'); + }); }); diff --git a/cypress/fixtures/just-right.png b/cypress/fixtures/just-right.png new file mode 100644 index 00000000..09f949ea Binary files /dev/null and b/cypress/fixtures/just-right.png differ diff --git a/cypress/fixtures/too-large.png b/cypress/fixtures/too-large.png new file mode 100644 index 00000000..7f356b62 Binary files /dev/null and b/cypress/fixtures/too-large.png differ diff --git a/cypress/fixtures/too-small.png b/cypress/fixtures/too-small.png new file mode 100644 index 00000000..0d703945 Binary files /dev/null and b/cypress/fixtures/too-small.png differ diff --git a/cypress/pages/capture-back-of-id-navigation.html b/cypress/pages/capture-back-of-id-navigation.html index 4f8aed85..0805bcbb 100644 --- a/cypress/pages/capture-back-of-id-navigation.html +++ b/cypress/pages/capture-back-of-id-navigation.html @@ -51,8 +51,7 @@ - + diff --git a/cypress/pages/document-upload.html b/cypress/pages/document-upload.html new file mode 100644 index 00000000..821d0ff9 --- /dev/null +++ b/cypress/pages/document-upload.html @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js index 31f84687..f15c4b33 100644 --- a/cypress/plugins/index.js +++ b/cypress/plugins/index.js @@ -19,10 +19,10 @@ module.exports = (on, config) => { // `on` is used to hook into various events Cypress emits // `config` is the resolved Cypress config - require('@cypress/code-coverage/task')(on, config) + require('@cypress/code-coverage/task')(on, config); // include any other plugin code... // It's IMPORTANT to return the config object // with any changed environment variables - return config -} + return config; +}; diff --git a/cypress/support/commands.js b/cypress/support/commands.js index 856b09d6..b8e9792d 100644 --- a/cypress/support/commands.js +++ b/cypress/support/commands.js @@ -30,3 +30,32 @@ Cypress.Commands.add('exitScreens', () => { .get('smart-camera-web') .should('not.exist'); }); + +Cypress.Commands.add('navigateFaceCaptureScreens', () => { + cy + .get('smart-camera-web') + .shadow() + .find('#request-camera-access') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#start-image-capture') + .click(); + + cy + .wait(8000); + + cy + .get('smart-camera-web') + .shadow() + .find('#select-selfie') + .click(); + + cy + .get('smart-camera-web') + .shadow() + .find('#review-screen') + .should('not.be.visible'); +}); diff --git a/cypress/support/e2e.js b/cypress/support/e2e.js index 42835785..83b6f9dd 100644 --- a/cypress/support/e2e.js +++ b/cypress/support/e2e.js @@ -13,9 +13,9 @@ // https://on.cypress.io/configuration // *********************************************************** -import '@cypress/code-coverage/support' +import '@cypress/code-coverage/support'; // Import commands.js using ES2015 syntax: -import './commands' +import './commands'; // Alternatively you can use CommonJS syntax: // require('./commands') diff --git a/package.json b/package.json index 4a7f3ffb..0a79c2bc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@smile_identity/smart-camera-web", - "version": "1.0.0-beta.17", + "version": "1.0.0-beta.18", "description": "WebComponent for smartly capturing images on the web, for use with SmileIdentity", "main": "smart-camera-web.js", "scripts": { diff --git a/smart-camera-web.js b/smart-camera-web.js index 14e7293f..33127029 100644 --- a/smart-camera-web.js +++ b/smart-camera-web.js @@ -1,6 +1,4 @@ -'use strict'; - -const VERSION = '1.0.0-beta.17'; +const VERSION = '1.0.0-beta.18'; const DEFAULT_NO_OF_LIVENESS_FRAMES = 8; const PORTRAIT_ID_PREVIEW_WIDTH = 396; const PORTRAIT_ID_PREVIEW_HEIGHT = 527; @@ -53,14 +51,79 @@ function getLivenessFramesIndices(totalNoOfFrames, numberOfFramesRequired = DEFA return selectedFrames; } +class SmartFileUpload { + static memoryLimit = 10240000; + + static supportedTypes = ['image/jpeg', 'image/png']; + + static getHumanSize(numberOfBytes) { + // Approximate to the closest prefixed unit + const units = [ + 'B', + 'kB', + 'MB', + 'GB', + 'TB', + 'PB', + 'EB', + 'ZB', + 'YB', + ]; + const exponent = Math.min( + Math.floor(Math.log(numberOfBytes) / Math.log(1024)), + units.length - 1, + ); + const approx = numberOfBytes / 1024 ** exponent; + const output = exponent === 0 + ? `${numberOfBytes} bytes` + : `${approx.toFixed(0)} ${units[exponent]}`; + + return output; + } + + static getData(file) { + return new Promise((resolve, reject) => { + const reader = new FileReader(); + + reader.onload = (e) => { + resolve(e.target.result); + }; + reader.onerror = () => { + reject(new Error('An error occurred reading the file. Please check the file, and try again')); + }; + reader.readAsDataURL(file); + }); + } + + static async retrieve(files) { + if (files.length > 1) { + throw new Error('Only one file upload is permitted at a time'); + } + + const file = files[0]; + + if (!SmartFileUpload.supportedTypes.includes(file.type)) { + throw new Error('Unsupported file format. Please ensure that you are providing a JPG or PNG image'); + } + + if (file.size > SmartFileUpload.memoryLimit) { + throw new Error(`${file.name} is too large. Please ensure that the file is less than ${SmartFileUpload.getHumanSize(SmartFileUpload.memoryLimit)}.`); + } + + const imageAsDataUrl = await SmartFileUpload.getData(file); + + return imageAsDataUrl; + } +} + function scwTemplateString() { return ` - + + +
+

+

+
+
-
-
- +
Back
+
+ `} + -
Back
- -
+ ` : ''}
-

-

- ${this.hideAttribution ? '' : `

@@ -477,22 +609,26 @@ function scwTemplateString() {

+ ` : ''}

Take a Selfie

@@ -518,7 +654,7 @@ function scwTemplateString() {
- + @@ -531,14 +667,16 @@ function scwTemplateString() { - +
+ + + + + + + + + + +
+

Make sure it's in focus

+

+ Ensure the photo of the ID document you submit is not blurry: you should be able to read the text on the document. +

+
+
+ +
+ ${this.supportBothCaptureModes || this.documentCaptureModes === 'camera' ? ` + + ` : ''} + ${this.supportBothCaptureModes || this.documentCaptureModes === 'upload' ? ` + + ` : ''}
+ ${this.hideAttribution ? '' : ` +

+ + + + + + Powered By + Smile Identity +

+ `} + + +