PWA-3331::System is getting crashed when selecting add to cart in cas…

[glo82145]

…e of translated language

Description

ISSUE: when using translate tools. I was able to reproduce on Chrome and Microsoft Edge.

STEPS TO REPLICATE:

Open Venia's clean instance Translate the site to a language with special characters not present in english (Tested with Hindi, Sanskrit) Open any PDP Click on add to cart ACTUAL RESULTS: System is getting crashed when selecting add to cart

EXPECTED RESULTS: Site should stills works normally

Related Issue

Closes https://jira.corp.adobe.com/browse/PWA-3331

Acceptance

Verification Stakeholders

Specification

Verification Steps

Test scenario(s) for direct fix/feature

Test scenario(s) for any existing impacted features/areas

Test scenario(s) for any Magento Backend Supported Configurations

Is Browser/Device testing needed?

Any ad-hoc/edge case scenarios that need to be considered?

Screenshots / Screen Captures (if appropriate)

Breaking Changes (if any)

Checklist

• I have added tests to cover my changes, if necessary.
• I have added translations for new strings, if necessary.
• I have updated the documentation accordingly, if necessary.

[pwa-studio-bot]

	Messages
:book:	Associated JIRA tickets: [PWA-3331](https://jira.corp.magento.com/browse/PWA-3331).
:book:	DangerCI Failures related to missing labels/description/linked issues/etc will persist until the next push or next pr-test build run (assuming they are fixed).
:book:	Access a deployed version of this PR [here](https://pr-4318.pwa-venia.com/). Make sure to wait for the "pwa-pull-request-deploy" job to complete.

Generated by :no_entry_sign: dangerJS against 5e4191e324e54d60bb9754a1be78b4de2526823c

[pwa-studio-bot]

	Fails
:no_entry_sign:	`node` failed.
:no_entry_sign:	Cypress tests in the following files did _not_ pass 😔. All tests must pass before this PR can be merged Verify content: Error: Image size (1280x1869) different than saved snapshot size (1280x1463). See diff for details: /venia-integration-tests/src/snapshots/snapshotTests/aboutUsPage/aboutUsPage.spec.js/__diff_output__/AboutUs.diff.png Verify content: Error: Image size (1280x2069) different than saved snapshot size (1280x1846). See diff for details: /venia-integration-tests/src/snapshots/snapshotTests/customerService/customerService.spec.js/__diff_output__/Customer-Service-Page.diff.png verify buttons content: Error: Image size (1280x8562) different than saved snapshot size (1280x7846). See diff for details: /venia-integration-tests/src/snapshots/snapshotTests/pageBuilder/buttons.spec.js/__diff_output__/Page-Builder-Buttons-Page.diff.png verify column content: Error: Image size (1280x7689) different than saved snapshot size (1280x6686). See diff for details: /venia-integration-tests/src/snapshots/snapshotTests/pageBuilder/column.spec.js/__diff_output__/Page-Builder-Column-Page.diff.png ,should apply mediaQuery styles: Error: Image size (1280x1564) different than saved snapshot size (1280x1404). See diff for details: /venia-integration-tests/src/snapshots/snapshotTests/pageBuilder/column.spec.js/__diff_output__/Column-media-query-(Desktop).diff.png verify divider content: Error: Image size (1280x3791) different than saved snapshot size (1280x2994). See diff for details: /venia-integration-tests/src/snapshots/snapshotTests/pageBuilder/divider.spec.js/__diff_output__/Page-Builder-Divider-Page.diff.png verify dynamic block content: Error: Image size (1280x1564) different than saved snapshot size (1280x1404). See diff for details: /venia-integration-tests/src/snapshots/snapshotTests/pageBuilder/dynamicBlock.spec.js/__diff_output__/Page-Builder-Dynamic-Block-Snapshot.diff.png verify google map api load with content: Error: Image size (1280x11380) different than saved snapshot size (1280x10130). See diff for details: /venia-integration-tests/src/snapshots/snapshotTests/pageBuilder/map.spec.js/__diff_output__/Page-Builder-Verify-Map---All-content.diff.png verify mocked google map api with two markers and click event: Error: Image size (1280x1580) different than saved snapshot size (1280x1404). See diff for details: /venia-integration-tests/src/snapshots/snapshotTests/pageBuilder/map.spec.js/__diff_output__/Page-Builder-Verify-Map---2-Locations.diff.png verify slider content: Error: Image size (1280x1564) different than saved snapshot size (1280x1404). See diff for details: /venia-integration-tests/src/snapshots/snapshotTests/pageBuilder/slider.spec.js/__diff_output__/Page-Builder-Slider-Page.diff.png verify slider content 2: Error: Image size (1280x1564) different than saved snapshot size (1280x1404). See diff for details: /venia-integration-tests/src/snapshots/snapshotTests/pageBuilder/slider.spec.js/__diff_output__/Page-Builder-Slider-Page-2.diff.png verify slider content 3: Error: Image size (1280x1564) different than saved snapshot size (1280x1404). See diff for details: /venia-integration-tests/src/snapshots/snapshotTests/pageBuilder/slider.spec.js/__diff_output__/Page-Builder-Slider-Page-3.diff.png verify slider content 4: Error: Image size (1280x1564) different than saved snapshot size (1280x1404). See diff for details: /venia-integration-tests/src/snapshots/snapshotTests/pageBuilder/slider.spec.js/__diff_output__/Page-Builder-Slider-Page-4.diff.png verify slider content 5: Error: Image size (1280x1564) different than saved snapshot size (1280x1404). See diff for details: /venia-integration-tests/src/snapshots/snapshotTests/pageBuilder/slider.spec.js/__diff_output__/Page-Builder-Slider-Page-5.diff.png verify slider content 6: Error: Image size (1280x1564) different than saved snapshot size (1280x1404). See diff for details: /venia-integration-tests/src/snapshots/snapshotTests/pageBuilder/slider.spec.js/__diff_output__/Page-Builder-Slider-Page-6.diff.png verify slider content 7: Error: Image size (1280x5265) different than saved snapshot size (1280x4828). See diff for details: /venia-integration-tests/src/snapshots/snapshotTests/pageBuilder/slider.spec.js/__diff_output__/Page-Builder-Slider-Page-7.diff.png verify slider content 8: Error: Image size (1280x2755) different than saved snapshot size (1280x2678). See diff for details: /venia-integration-tests/src/snapshots/snapshotTests/pageBuilder/slider.spec.js/__diff_output__/Page-Builder-Slider-Page-8.diff.png verify slider content 9: Error: Image size (1280x5359) different than saved snapshot size (1280x5282). See diff for details: /venia-integration-tests/src/snapshots/snapshotTests/pageBuilder/slider.spec.js/__diff_output__/Page-Builder-Slider-Page-9.diff.png verify slider content 10: Error: Image size (1280x2749) different than saved snapshot size (1280x2380). See diff for details: /venia-integration-tests/src/snapshots/snapshotTests/pageBuilder/slider.spec.js/__diff_output__/Page-Builder-Slider-Page-10.diff.png verify slider content 11: Error: Image size (1280x6179) different than saved snapshot size (1280x5510). See diff for details: /venia-integration-tests/src/snapshots/snapshotTests/pageBuilder/slider.spec.js/__diff_output__/Page-Builder-Slider-Page-11.diff.png verify slider content 12: Error: Image size (1280x5234) different than saved snapshot size (1280x4398). See diff for details: /venia-integration-tests/src/snapshots/snapshotTests/pageBuilder/slider.spec.js/__diff_output__/Page-Builder-Slider-Page-12.diff.png ,should apply mediaQuery styles: Error: Image size (1280x1614) different than saved snapshot size (1280x1454). See diff for details: /venia-integration-tests/src/snapshots/snapshotTests/pageBuilder/slider.spec.js/__diff_output__/Slider-media-query-(Desktop).diff.png verify banner content: Error: Image size (1280x2004) different than saved snapshot size (1280x1882). See diff for details: /venia-integration-tests/src/snapshots/snapshotTests/pageBuilder/banner.spec.js/__diff_output__/Page-Builder-Home-Page.diff.png verify banner content2: Error: Image size (1280x3994) different than saved snapshot size (1280x3872). See diff for details: /venia-integration-tests/src/snapshots/snapshotTests/pageBuilder/banner.spec.js/__diff_output__/Page-Builder-Home-Page2.diff.png verify banner content3: Error: Image size (1280x3994) different than saved snapshot size (1280x3872). See diff for details: /venia-integration-tests/src/snapshots/snapshotTests/pageBuilder/banner.spec.js/__diff_output__/Page-Builder-Home-Page3.diff.png verify banner content4: Error: Image size (1280x3434) different than saved snapshot size (1280x3312). See diff for details: /venia-integration-tests/src/snapshots/snapshotTests/pageBuilder/banner.spec.js/__diff_output__/Page-Builder-Home-Page4.diff.png verify banner content5: Error: Image size (1280x5054) different than saved snapshot size (1280x4932). See diff for details: /venia-integration-tests/src/snapshots/snapshotTests/pageBuilder/banner.spec.js/__diff_output__/Page-Builder-Home-Page5.diff.png verify banner content6: Error: Image size (1280x5939) different than saved snapshot size (1280x5580). See diff for details: /venia-integration-tests/src/snapshots/snapshotTests/pageBuilder/banner.spec.js/__diff_output__/Page-Builder-Home-Page6.diff.png verify banner content7: Error: Image size (1280x3826) different than saved snapshot size (1280x3320). See diff for details: /venia-integration-tests/src/snapshots/snapshotTests/pageBuilder/banner.spec.js/__diff_output__/Page-Builder-Home-Page7.diff.png verify banner content8: Error: Image size (1280x3115) different than saved snapshot size (1280x2801). See diff for details: /venia-integration-tests/src/snapshots/snapshotTests/pageBuilder/banner.spec.js/__diff_output__/Page-Builder-Home-Page8.diff.png verify banner content9: Error: Image size (1280x3568) different than saved snapshot size (1280x3401). See diff for details: /venia-integration-tests/src/snapshots/snapshotTests/pageBuilder/banner.spec.js/__diff_output__/Page-Builder-Home-Page9.diff.png verify banner content10: Error: Image size (1280x8574) different than saved snapshot size (1280x6700). See diff for details: /venia-integration-tests/src/snapshots/snapshotTests/pageBuilder/banner.spec.js/__diff_output__/Page-Builder-Home-Page10.diff.png ,should apply mediaQuery styles: Error: Image size (1280x2656) different than saved snapshot size (1280x2624). See diff for details: /venia-integration-tests/src/snapshots/snapshotTests/pageBuilder/banner.spec.js/__diff_output__/Banner-media-query-(Desktop).diff.png verify block content: CypressError: `cy.visit()` failed trying to load: https://pr-4318.pwa-venia.com/ The response we received from your web server was: > 502: Bad Gateway This was considered a failure because the status code was not `2xx`. If you do not want status codes to cause failures pass the option: `failOnStatusCode: false` verify block dynamic block content: CypressError: `cy.visit()` failed trying to load: https://pr-4318.pwa-venia.com/ The response we received from your web server was: > 502: Bad Gateway This was considered a failure because the status code was not `2xx`. If you do not want status codes to cause failures pass the option: `failOnStatusCode: false` verify block cms block content: CypressError: `cy.visit()` failed trying to load: https://pr-4318.pwa-venia.com/ The response we received from your web server was: > 502: Bad Gateway This was considered a failure because the status code was not `2xx`. If you do not want status codes to cause failures pass the option: `failOnStatusCode: false` verify block cms page content: CypressError: `cy.visit()` failed trying to load: https://pr-4318.pwa-venia.com/ The response we received from your web server was: > 502: Bad Gateway This was considered a failure because the status code was not `2xx`. If you do not want status codes to cause failures pass the option: `failOnStatusCode: false` verify row content: CypressError: `cy.visit()` failed trying to load: https://pr-4318.pwa-venia.com/ The response we received from your web server was: > 502: Bad Gateway This was considered a failure because the status code was not `2xx`. If you do not want status codes to cause failures pass the option: `failOnStatusCode: false` verify row content2: CypressError: `cy.visit()` failed trying to load: https://pr-4318.pwa-venia.com/ The response we received from your web server was: > 502: Bad Gateway This was considered a failure because the status code was not `2xx`. If you do not want status codes to cause failures pass the option: `failOnStatusCode: false` verify row min height: CypressError: `cy.visit()` failed trying to load: https://pr-4318.pwa-venia.com/ The response we received from your web server was: > 502: Bad Gateway This was considered a failure because the status code was not `2xx`. If you do not want status codes to cause failures pass the option: `failOnStatusCode: false` verify row video background: CypressError: `cy.visit()` failed trying to load: https://pr-4318.pwa-venia.com/ The response we received from your web server was: > 502: Bad Gateway This was considered a failure because the status code was not `2xx`. If you do not want status codes to cause failures pass the option: `failOnStatusCode: false` verify row video background2: CypressError: `cy.visit()` failed trying to load: https://pr-4318.pwa-venia.com/ The response we received from your web server was: > 502: Bad Gateway This was considered a failure because the status code was not `2xx`. If you do not want status codes to cause failures pass the option: `failOnStatusCode: false` verify row video background3: CypressError: `cy.visit()` failed trying to load: https://pr-4318.pwa-venia.com/ The response we received from your web server was: > 502: Bad Gateway This was considered a failure because the status code was not `2xx`. If you do not want status codes to cause failures pass the option: `failOnStatusCode: false` ,should apply mediaQuery styles: CypressError: `cy.visit()` failed trying to load: https://pr-4318.pwa-venia.com/ The response we received from your web server was: > 502: Bad Gateway This was considered a failure because the status code was not `2xx`. If you do not want status codes to cause failures pass the option: `failOnStatusCode: false` verify smoke test content: Error: Image size (1280x7437) different than saved snapshot size (1280x7661). See diff for details: /venia-integration-tests/src/snapshots/snapshotTests/pageBuilder/smokeTest.spec.js/__diff_output__/Page-Builder-Smoke-Test.diff.png verify smoke test cms block content: Error: Image size (1280x3604) different than saved snapshot size (1280x3760). See diff for details: /venia-integration-tests/src/snapshots/snapshotTests/pageBuilder/smokeTest.spec.js/__diff_output__/Page-Builder-Smoke-Test-CMS-Block-Content.diff.png verify smoke test dynamic block content: Error: Image size (1280x3604) different than saved snapshot size (1280x3760). See diff for details: /venia-integration-tests/src/snapshots/snapshotTests/pageBuilder/smokeTest.spec.js/__diff_output__/Page-Builder-Smoke-Test-Dynamic-Block-Content.diff.png verify tabs content: Error: Image size (1280x13858) different than saved snapshot size (1280x26956). See diff for details: /venia-integration-tests/src/snapshots/snapshotTests/pageBuilder/tabs.spec.js/__diff_output__/Page-Builder-Tabs-Page.diff.png ,should apply mediaQuery styles: Error: Image size (1280x1614) different than saved snapshot size (1280x1454). See diff for details: /venia-integration-tests/src/snapshots/snapshotTests/pageBuilder/tabs.spec.js/__diff_output__/Tabs-media-query-(Desktop).diff.png verify text content: Error: Image size (1280x7419) different than saved snapshot size (1280x5551). See diff for details: /venia-integration-tests/src/snapshots/snapshotTests/pageBuilder/text.spec.js/__diff_output__/Page-Builder-Text-Page.diff.png verify video content alignment: Error: Image size (1280x4501) different than saved snapshot size (1280x4019). See diff for details: /venia-integration-tests/src/snapshots/snapshotTests/pageBuilder/video.spec.js/__diff_output__/Page-Builder-Video-Alignment-Page.diff.png

Log

ERROR ON TASK: cypressTests

Error:  Danger had errors running. See message(s) above for more details.
danger-results://tmp/danger-results.json

Generated by :no_entry_sign: dangerJS against 047029eb2e6ed8197a13147978b719a1e7ebde8c

[pwa-studio-bot]

	Fails
:no_entry_sign:	`node` failed.
:no_entry_sign:	Cypress tests in the following files did _not_ pass 😔. All tests must pass before this PR can be merged user should be able to access the Categories via Home page and from Main Menu left drawer: AssertionError: Timed out retrying after 30000ms: expected '[ , 2 more... ]' to be 'visible' This element `[ , 2 more... ]` is not visible because its parent `` has CSS property: `visibility: hidden` user should be able to add and update gift options: CypressError: Timed out retrying after 30000ms: `cy.clear()` failed because this element: `` is being covered by another element: `` Fix this problem, or use {force: true} to disable error checking. https://on.cypress.io/element-cannot-be-interacted-with Verify venia anchor links: CypressError: Timed out retrying after 30000ms: `cy.clear()` failed because this element: `` is being covered by another element: `` Fix this problem, or use {force: true} to disable error checking. https://on.cypress.io/element-cannot-be-interacted-with user should be able to place an order as a registered customer: CypressError: Timed out retrying after 30000ms: `cy.clear()` failed because this element: `` is being covered by another element: `` Fix this problem, or use {force: true} to disable error checking. https://on.cypress.io/element-cannot-be-interacted-with Registered user should be able to sign in from toast suggestion in guest checkout page: CypressError: Timed out retrying after 30000ms: `cy.clear()` failed because this element: `` is being covered by another element: `` Fix this problem, or use {force: true} to disable error checking. https://on.cypress.io/element-cannot-be-interacted-with Discount summary dropdown renders correctly: CypressError: Timed out retrying after 30000ms: `cy.clear()` failed because this element: `` is being covered by another element: `` Fix this problem, or use {force: true} to disable error checking. https://on.cypress.io/element-cannot-be-interacted-with user should be able to remove an item from the cart: CypressError: Timed out retrying after 30000ms: `cy.clear()` failed because this element: `` is being covered by another element: `` Fix this problem, or use {force: true} to disable error checking. https://on.cypress.io/element-cannot-be-interacted-with user can edit account information with default badge position: CypressError: Timed out retrying after 30050ms: `cy.click()` failed because this element is not visible: `...` This element `` is not visible because its parent `` has CSS property: `visibility: hidden` Fix this problem, or use `{force: true}` to disable error checking. https://on.cypress.io/element-cannot-be-interacted-with user can edit account information with inline badge position: CypressError: Timed out retrying after 30050ms: `cy.click()` failed because this element is not visible: `...` This element `` is not visible because its parent `` has CSS property: `visibility: hidden` Fix this problem, or use `{force: true}` to disable error checking. https://on.cypress.io/element-cannot-be-interacted-with user should be able to add and remove products from wishlist: CypressError: Timed out retrying after 60000ms: `cy.wait()` timed out waiting `60000ms` for the 1st request to the route: `gqlSignInAfterCreateMutation`. No request ever occurred. https://on.cypress.io/wait user should be able to filter results in Category and Search pages: AssertionError: Timed out retrying after 30000ms: Expected to find content: '100-200' within the element: [ , 1 more... ] and with the selector: '[data-cy="FilterList-item"]' but never did. user should be able to use radio-boolean filter results in Category and Search pages: AssertionError: Timed out retrying after 30000ms: Expected to find content: '0-100' within the element: [ , 1 more... ] and with the selector: '[data-cy="FilterList-item"]' but never did. user should be able to add and remove promotions from cart: CypressError: Timed out retrying after 30000ms: `cy.clear()` failed because this element: `` is being covered by another element: `` Fix this problem, or use {force: true} to disable error checking. https://on.cypress.io/element-cannot-be-interacted-with user should be able to update their address book: CypressError: Timed out retrying after 60000ms: `cy.wait()` timed out waiting `60000ms` for the 1st request to the route: `gqlSignInAfterCreateMutation`. No request ever occurred. https://on.cypress.io/wait should be able to edit a configurable product and place an order: CypressError: Timed out retrying after 30000ms: `cy.clear()` failed because this element: `` is being covered by another element: `` Fix this problem, or use {force: true} to disable error checking. https://on.cypress.io/element-cannot-be-interacted-with user can fill and submit payment form and place order with inline badge position: CypressError: Timed out retrying after 30000ms: `cy.clear()` failed because this element: `` is being covered by another element: `` Fix this problem, or use {force: true} to disable error checking. https://on.cypress.io/element-cannot-be-interacted-with user can fill and submit payment form and place order with default badge position: CypressError: Timed out retrying after 30000ms: `cy.clear()` failed because this element: `` is being covered by another element: `` Fix this problem, or use {force: true} to disable error checking. https://on.cypress.io/element-cannot-be-interacted-with user should be able to place an order as a guest: CypressError: Timed out retrying after 30000ms: `cy.clear()` failed because this element: `` is being covered by another element: `` Fix this problem, or use {force: true} to disable error checking. https://on.cypress.io/element-cannot-be-interacted-with user should be able to create a new account and edit their information: CypressError: Timed out retrying after 60000ms: `cy.wait()` timed out waiting `60000ms` for the 1st request to the route: `gqlSignInAfterCreateMutation`. No request ever occurred. https://on.cypress.io/wait user should be able to place an order as a guest with an specified Region and a credit card: CypressError: Timed out retrying after 30000ms: `cy.clear()` failed because this element: `` is being covered by another element: `` Fix this problem, or use {force: true} to disable error checking. https://on.cypress.io/element-cannot-be-interacted-with should display Default Store View and USD currency by default: CypressError: `cy.visit()` failed trying to load: https://pr-4318.pwa-venia.com/ The response we received from your web server was: > 502: Bad Gateway This was considered a failure because the status code was not `2xx`. If you do not want status codes to cause failures pass the option: `failOnStatusCode: false` should display EUR currency by default if French Store View is selected: CypressError: `cy.visit()` failed trying to load: https://pr-4318.pwa-venia.com/ The response we received from your web server was: > 502: Bad Gateway This was considered a failure because the status code was not `2xx`. If you do not want status codes to cause failures pass the option: `failOnStatusCode: false` should be able to place an order in French store: CypressError: `cy.visit()` failed trying to load: https://pr-4318.pwa-venia.com/ The response we received from your web server was: > 502: Bad Gateway This was considered a failure because the status code was not `2xx`. If you do not want status codes to cause failures pass the option: `failOnStatusCode: false` should display English text and USD currency accross app if Default Store View is selected: CypressError: `cy.visit()` failed trying to load: https://pr-4318.pwa-venia.com/ The response we received from your web server was: > 502: Bad Gateway This was considered a failure because the status code was not `2xx`. If you do not want status codes to cause failures pass the option: `failOnStatusCode: false` should display French text and EUR currency accross app if French Store View is selected: CypressError: `cy.visit()` failed trying to load: https://pr-4318.pwa-venia.com/ The response we received from your web server was: > 502: Bad Gateway This was considered a failure because the status code was not `2xx`. If you do not want status codes to cause failures pass the option: `failOnStatusCode: false` should show USD currency across app if it is selected inside French Store View: CypressError: `cy.visit()` failed trying to load: https://pr-4318.pwa-venia.com/ The response we received from your web server was: > 502: Bad Gateway This was considered a failure because the status code was not `2xx`. If you do not want status codes to cause failures pass the option: `failOnStatusCode: false` user should be able to remove products: CypressError: `cy.visit()` failed trying to load: https://pr-4318.pwa-venia.com/valeria-two-layer-tank.html The response we received from your web server was: > 502: Bad Gateway This was considered a failure because the status code was not `2xx`. If you do not want status codes to cause failures pass the option: `failOnStatusCode: false` contains valid CMS Page data specific to the different store: CypressError: Timed out retrying after 30050ms: `cy.click()` failed because this element is not visible: `...` This element `` is not visible because its parent `` has CSS property: `visibility: hidden` Fix this problem, or use `{force: true}` to disable error checking. https://on.cypress.io/element-cannot-be-interacted-with shows categories specific to the different store: CypressError: `cy.visit()` failed trying to load: https://pr-4318.pwa-venia.com/ The response we received from your web server was: > 502: Bad Gateway This was considered a failure because the status code was not `2xx`. If you do not want status codes to cause failures pass the option: `failOnStatusCode: false` shows products specific to the categories in the different store: CypressError: `cy.visit()` failed trying to load: https://pr-4318.pwa-venia.com/ The response we received from your web server was: > 502: Bad Gateway This was considered a failure because the status code was not `2xx`. If you do not want status codes to cause failures pass the option: `failOnStatusCode: false` ,lets users add products to cart regardless of store view: AssertionError: Timed out retrying after 30000ms: Expected to find element: `[data-cy="Header-root"] [data-cy="CartTrigger-counter"]`, but never found it. user should be able to add and remove products from wishlist: CypressError: Timed out retrying after 60000ms: `cy.wait()` timed out waiting `60000ms` for the 1st request to the route: `gqlSignInAfterCreateMutation`. No request ever occurred. https://on.cypress.io/wait

Log

ERROR ON TASK: cypressTests

Error:  Danger had errors running. See message(s) above for more details.
danger-results://tmp/danger-results.json

Generated by :no_entry_sign: dangerJS against 047029eb2e6ed8197a13147978b719a1e7ebde8c