diff --git a/packages/web-component/cypress/e2e/annotated.cy.js b/packages/web-component/cypress/e2e/annotated.cy.js
index 1bc8acc7..857a0f73 100644
--- a/packages/web-component/cypress/e2e/annotated.cy.js
+++ b/packages/web-component/cypress/e2e/annotated.cy.js
@@ -33,7 +33,7 @@ context("Readalong Component with annotation", () => {
     it(" toggle button testing", () => {
       cy.wait(["@text", "@audio"]);
       cy.readalong().within(() => {
-        cy.get("[data-cy=play-button]").should("be.enabled");
+        cy.get("[data-test-id=play-button]").should("be.enabled");
         cy.get("[annotation-id]").should("have.class", "invisible");
         cy.get("#annotationsMenu").should("not.exist");
         cy.get("[data-test-id=annotations-toggle]").click();
diff --git a/packages/web-component/cypress/e2e/basic.cy.js b/packages/web-component/cypress/e2e/basic.cy.js
index 6393bb4a..c6e9357f 100644
--- a/packages/web-component/cypress/e2e/basic.cy.js
+++ b/packages/web-component/cypress/e2e/basic.cy.js
@@ -25,7 +25,7 @@ context("The Readalong Component", () => {
     cy.readalong().within(() => {
       cy.playReadAlong();
       cy.wait(FOR_ERIC_TO_TALK_A_BIT);
-      cy.get("[data-cy=stop-button]").click();
+      cy.get("[data-test-id=stop-button]").click();
     });
   });
 
@@ -34,7 +34,7 @@ context("The Readalong Component", () => {
 
     cy.readalong().within(() => {
       //wait for initialization process to be completed
-      cy.get("[data-cy=play-button]").should("be.enabled");
+      cy.get("[data-test-id=play-button]").should("be.enabled");
       cy.get("span").contains("technologies").click();
     });
   });
@@ -45,21 +45,21 @@ context("The Readalong Component", () => {
 
       cy.readalong().within(() => {
         cy.playReadAlong();
-        cy.get("[data-cy=page-count__current]")
+        cy.get("[data-test-id=page-count__current]")
           .filter("*:visible")
           .invoke("text")
           .should("eq", "1");
 
-        cy.get("[data-cy=progress-bar]")
+        cy.get("[data-test-id=progress-bar]")
           .as("progress-bar")
           .then((el) => {
             // click 3/4 of the way in the readalong (should be second page)
             cy.get("@progress-bar").click(el.width() * 0.75, el.height() * 0.5);
           });
-        cy.get("[data-cy=stop-button]").click();
+        cy.get("[data-test-id=stop-button]").click();
         cy.wait(FOR_PAGE_TURN_ANIMATION);
 
-        cy.get("[data-cy=page-count__current]")
+        cy.get("[data-test-id=page-count__current]")
           .filter("*:visible")
           .invoke("text")
           .should("eq", "2");
@@ -74,12 +74,12 @@ context("The Readalong Component", () => {
       cy.wait("@audio").then(() => {
         cy.readalong().within(() => {
           //wait for initialization process to be completed
-          cy.get("[data-cy=play-button]").should("be.enabled");
+          cy.get("[data-test-id=play-button]").should("be.enabled");
           //word corpus and robuste should hidden
           cy.get("#t0b0d1p0s2w1").should("not.be.visible");
           cy.get("#t0b0d1p1s0w14").should("not.be.visible");
           //advance to about 61%
-          cy.get("[data-cy=progress-bar]")
+          cy.get("[data-test-id=progress-bar]")
             .as("progress-bar")
             .then((el) => {
               // click 3/4 of the way in the readalong (should be second page)
@@ -91,7 +91,7 @@ context("The Readalong Component", () => {
           //word corpus and robuste should now be visible
           cy.get("#t0b0d1p0s2w1").should("be.visible");
           cy.get("#t0b0d1p1s0w14").should("be.visible");
-          cy.get("[data-cy=play-button]")
+          cy.get("[data-test-id=play-button]")
             .click()
             .then(() => {
               cy.wait(FOR_PAGE_TURN_ANIMATION);
diff --git a/packages/web-component/cypress/e2e/customizations.cy.js b/packages/web-component/cypress/e2e/customizations.cy.js
index 6856e0ab..2a779925 100644
--- a/packages/web-component/cypress/e2e/customizations.cy.js
+++ b/packages/web-component/cypress/e2e/customizations.cy.js
@@ -10,7 +10,7 @@ context("Testing creator enabled settings", () => {
     cy.readalong().within(() => {
       cy.get("#t0b0d0p0s0w0").should("be.visible");
       cy.get("#t0b0d0p0s0trtext0").should("not.be.visible");
-      cy.get("[data-cy=translation-toggle]").should("be.visible");
+      cy.get("[data-test-id=translation-toggle]").should("be.visible");
     });
   });
 
@@ -20,7 +20,7 @@ context("Testing creator enabled settings", () => {
     cy.readalong().within(() => {
       cy.get("#t0b0d0p0s0w0").should("be.visible");
       cy.get("#t0b0d0p0s0trtext0").should("be.visible");
-      cy.get("[data-cy=translation-toggle]").should("be.visible");
+      cy.get("[data-test-id=translation-toggle]").should("be.visible");
     });
   });
 
diff --git a/packages/web-component/cypress/e2e/edit.cy.js b/packages/web-component/cypress/e2e/edit.cy.js
index 7ea50bf9..b1abab7e 100644
--- a/packages/web-component/cypress/e2e/edit.cy.js
+++ b/packages/web-component/cypress/e2e/edit.cy.js
@@ -14,21 +14,21 @@ context("The Readalong Component", () => {
 
     cy.readalong().within(() => {
       // Click first line add translation
-      cy.get("[data-cy=add-translation-button]").first().click();
+      cy.get("[data-test-id=add-translation-button]").first().click();
       // Check translation line was added
-      cy.get("[data-cy=translation-line]").should("have.length", 1);
+      cy.get("[data-test-id=translation-line]").should("have.length", 1);
       // Check you can type into the new translation line
-      cy.get("[data-cy=translation-line]").type("this is a test", {
+      cy.get("[data-test-id=translation-line]").type("this is a test", {
         force: true,
       });
       // Create a new translation line with the last sentence
-      cy.get("[data-cy=add-translation-button]").last().click();
+      cy.get("[data-test-id=add-translation-button]").last().click();
       // Check it was added
-      cy.get("[data-cy=translation-line]").should("have.length", 2);
+      cy.get("[data-test-id=translation-line]").should("have.length", 2);
       // Remove the first line
-      cy.get("[data-cy=remove-translation-button]").first().click();
+      cy.get("[data-test-id=remove-translation-button]").first().click();
       // Check it was removed
-      cy.get("[data-cy=translation-line]").should("have.length", 1);
+      cy.get("[data-test-id=translation-line]").should("have.length", 1);
     });
   });
 });
diff --git a/packages/web-component/cypress/e2e/embedded.cy.js b/packages/web-component/cypress/e2e/embedded.cy.js
index 22f1e36a..a9401a54 100644
--- a/packages/web-component/cypress/e2e/embedded.cy.js
+++ b/packages/web-component/cypress/e2e/embedded.cy.js
@@ -21,7 +21,7 @@ context("The Readalong Component", () => {
     cy.readalong().within(() => {
       cy.playReadAlong();
       cy.wait(FOR_ERIC_TO_TALK_A_BIT);
-      cy.get("[data-cy=stop-button]").click();
+      cy.get("[data-test-id=stop-button]").click();
     });
   });
 
@@ -37,21 +37,21 @@ context("The Readalong Component", () => {
 
       cy.readalong().within(() => {
         cy.playReadAlong();
-        cy.get("[data-cy=page-count__current]")
+        cy.get("[data-test-id=page-count__current]")
           .filter("*:visible")
           .invoke("text")
           .should("eq", "1");
 
-        cy.get("[data-cy=progress-bar]")
+        cy.get("[data-test-id=progress-bar]")
           .as("progress-bar")
           .then((el) => {
             // click 3/4 of the way in the readalong (should be second page)
             cy.get("@progress-bar").click(el.width() * 0.75, el.height() * 0.5);
           });
-        cy.get("[data-cy=stop-button]").click();
+        cy.get("[data-test-id=stop-button]").click();
         cy.wait(FOR_PAGE_TURN_ANIMATION);
 
-        cy.get("[data-cy=page-count__current]")
+        cy.get("[data-test-id=page-count__current]")
           .filter("*:visible")
           .invoke("text")
           .should("eq", "2");
diff --git a/packages/web-component/cypress/e2e/missing.assets.feedback.cy.js b/packages/web-component/cypress/e2e/missing.assets.feedback.cy.js
index 2db22353..1a64f13d 100644
--- a/packages/web-component/cypress/e2e/missing.assets.feedback.cy.js
+++ b/packages/web-component/cypress/e2e/missing.assets.feedback.cy.js
@@ -4,15 +4,15 @@ context("Readalong Component with missing assets", () => {
     cy.readalongElement().should("be.visible");
 
     cy.readalong().within(() => {
-      cy.get("[data-cy=text-container]").should(($el) => {
+      cy.get("[data-test-id=text-container]").should(($el) => {
         expect($el.children().length).equal(0, "has text");
       });
-      cy.get("[data-cy=AUDIO-error]").should("not.exist");
-      cy.get("[data-cy=alignment-error]").should("not.exist");
-      cy.get("[data-cy=control-panel]")
+      cy.get("[data-test-id=AUDIO-error]").should("not.exist");
+      cy.get("[data-test-id=alignment-error]").should("not.exist");
+      cy.get("[data-test-id=control-panel]")
         .should("have.length", 1)
         .should("be.visible");
-      cy.get("[data-cy=RAS-error]")
+      cy.get("[data-test-id=RAS-error]")
         .should(($el) => {
           expect($el.hasClass("fade")).equal(
             false,
@@ -25,7 +25,7 @@ context("Readalong Component with missing assets", () => {
           );
         })
         .should("be.visible");
-      cy.get("[data-cy=progress-bar]").should("have.length", 0);
+      cy.get("[data-test-id=progress-bar]").should("have.length", 0);
     });
   });
 
@@ -34,15 +34,15 @@ context("Readalong Component with missing assets", () => {
     cy.readalongElement().should("be.visible");
 
     cy.readalong().within(() => {
-      cy.get("[data-cy=text-container]").should(($el) => {
+      cy.get("[data-test-id=text-container]").should(($el) => {
         expect($el.children().length).equal(0, "has text");
       });
-      cy.get("[data-cy=AUDIO-error]").should("not.exist");
-      cy.get("[data-cy=alignment-error]").should("not.exist");
-      cy.get("[data-cy=control-panel]")
+      cy.get("[data-test-id=AUDIO-error]").should("not.exist");
+      cy.get("[data-test-id=alignment-error]").should("not.exist");
+      cy.get("[data-test-id=control-panel]")
         .should("have.length", 1)
         .should("be.visible");
-      cy.get("[data-cy=RAS-error]")
+      cy.get("[data-test-id=RAS-error]")
         .should(($el) => {
           expect($el.hasClass("fade")).equal(
             false,
@@ -55,7 +55,7 @@ context("Readalong Component with missing assets", () => {
           );
         })
         .should("be.visible");
-      cy.get("[data-cy=progress-bar]").should("have.length", 0);
+      cy.get("[data-test-id=progress-bar]").should("have.length", 0);
     });
   });
 
@@ -65,7 +65,7 @@ context("Readalong Component with missing assets", () => {
 
     cy.readalong().within(() => {
       cy.contains("Page");
-      cy.get("[data-cy=AUDIO-error]")
+      cy.get("[data-test-id=AUDIO-error]")
         .should(($el) => {
           expect($el.hasClass("fade")).equal(false);
           //check that message is visible
@@ -74,10 +74,10 @@ context("Readalong Component with missing assets", () => {
           );
         })
         .should("be.visible");
-      cy.get("[data-cy=control-panel]").should("have.length", 0);
-      cy.get("[data-cy=RAS-error]").should("not.exist");
-      cy.get("[data-cy=alignment-error]").should("not.exist");
-      cy.get("[data-cy=progress-bar]").should("have.length", 1);
+      cy.get("[data-test-id=control-panel]").should("have.length", 0);
+      cy.get("[data-test-id=RAS-error]").should("not.exist");
+      cy.get("[data-test-id=alignment-error]").should("not.exist");
+      cy.get("[data-test-id=progress-bar]").should("have.length", 1);
     });
   });
 
@@ -87,19 +87,19 @@ context("Readalong Component with missing assets", () => {
 
     cy.readalong().within(() => {
       cy.contains("Page");
-      cy.get("[data-cy=AUDIO-error]").should("not.exist");
-      cy.get("[data-cy=control-panel]")
+      cy.get("[data-test-id=AUDIO-error]").should("not.exist");
+      cy.get("[data-test-id=control-panel]")
         .should("have.length", 1)
         .should("be.visible");
-      cy.get("[data-cy=RAS-error]").should("not.exist");
-      cy.get("[data-cy=alignment-error]")
+      cy.get("[data-test-id=RAS-error]").should("not.exist");
+      cy.get("[data-test-id=alignment-error]")
         .should(($el) => {
           expect($el.hasClass("fade")).equal(false);
           // check that message is visible
           expect($el.text()).contains("Error: No alignments were found");
         })
         .should("be.visible");
-      cy.get("[data-cy=progress-bar]").should("have.length", 0);
+      cy.get("[data-test-id=progress-bar]").should("have.length", 0);
     });
   });
 
@@ -108,9 +108,9 @@ context("Readalong Component with missing assets", () => {
     cy.readalongElement().should("be.visible");
 
     cy.readalong().within(() => {
-      cy.get("[data-cy=alignment-error]").should("not.exist");
-      cy.get("[data-cy=RAS-error]").should("be.visible");
-      cy.get("[data-cy=AUDIO-error]").should("be.visible");
+      cy.get("[data-test-id=alignment-error]").should("not.exist");
+      cy.get("[data-test-id=RAS-error]").should("be.visible");
+      cy.get("[data-test-id=AUDIO-error]").should("be.visible");
     });
   });
 });
diff --git a/packages/web-component/cypress/e2e/settings.cy.js b/packages/web-component/cypress/e2e/settings.cy.js
index 47d2e3c5..e71579c5 100644
--- a/packages/web-component/cypress/e2e/settings.cy.js
+++ b/packages/web-component/cypress/e2e/settings.cy.js
@@ -57,7 +57,7 @@ context("Testing end user enabled settings", () => {
       cy.wait(7000); //6740 timestamp of the first word on second page
       cy.get("#t0b0d1p0s0w0").should("not.be.visible");
 
-      cy.get("[data-cy=play-button]").should("be.visible");
+      cy.get("[data-test-id=play-button]").should("be.visible");
     });
   });
   it("can save user preference", () => {
diff --git a/packages/web-component/cypress/e2e/translated.cy.js b/packages/web-component/cypress/e2e/translated.cy.js
index 21f4eb7f..b26a6900 100644
--- a/packages/web-component/cypress/e2e/translated.cy.js
+++ b/packages/web-component/cypress/e2e/translated.cy.js
@@ -22,16 +22,16 @@ context("Readalong Component with translation", () => {
         cy.get(".sentence__translation")
           .should("have.length.above", 0)
           .should("be.visible");
-        cy.get("[data-cy=translation-toggle]").should("be.visible");
+        cy.get("[data-test-id=translation-toggle]").should("be.visible");
       });
     });
 
     it(" toggle button testing", () => {
       cy.readalong().within(() => {
         cy.get(".sentence__translation").should("not.have.class", "invisible");
-        cy.get("[data-cy=translation-toggle]").click();
+        cy.get("[data-test-id=translation-toggle]").click();
         cy.get(".sentence__translation").should("have.class", "invisible");
-        cy.get("[data-cy=translation-toggle]").click();
+        cy.get("[data-test-id=translation-toggle]").click();
         cy.get(".sentence__translation").should("not.have.class", "invisible");
       });
     });
diff --git a/packages/web-component/cypress/support/commands.js b/packages/web-component/cypress/support/commands.js
index 64547174..e73a40ec 100644
--- a/packages/web-component/cypress/support/commands.js
+++ b/packages/web-component/cypress/support/commands.js
@@ -30,7 +30,7 @@ Cypress.Commands.add("readalongElement", () => {
 });
 
 Cypress.Commands.add("playReadAlong", () => {
-  cy.get("[data-cy=play-button]", { timeout: 10000 })
+  cy.get("[data-test-id=play-button]", { timeout: 10000 })
     .should("be.enabled")
     .click();
 });
diff --git a/packages/web-component/src/components/read-along-component/read-along.tsx b/packages/web-component/src/components/read-along-component/read-along.tsx
index b5df3ea6..fa4bac17 100644
--- a/packages/web-component/src/components/read-along-component/read-along.tsx
+++ b/packages/web-component/src/components/read-along-component/read-along.tsx
@@ -1408,7 +1408,7 @@ export class ReadAlongComponent {
   RemoveImg = (props: { pageIndex: number }): Element => {
     return (
       <button
-        data-cy="delete-button"
+        data-test-id="delete-button"
         aria-label="Delete"
         title="Delete image"
         onClick={() => this.deleteImage(props.pageIndex)}
@@ -1469,9 +1469,9 @@ export class ReadAlongComponent {
   PageCount = (props: { pgCount: number; currentPage: number }): Element => (
     <div class={"page__counter color--" + this.theme}>
       {this.getI18nString("page")}{" "}
-      <span data-cy="page-count__current">{props.currentPage}</span>
+      <span data-test-id="page-count__current">{props.currentPage}</span>
       {" / "}
-      <span data-cy="page-count__total">{props.pgCount}</span>
+      <span data-test-id="page-count__total">{props.pgCount}</span>
     </div>
   );
 
@@ -1687,7 +1687,7 @@ export class ReadAlongComponent {
                   <button
                     title="Remove translation"
                     aria-label="Remove translation"
-                    data-cy="remove-translation-button"
+                    data-test-id="remove-translation-button"
                     onClick={() => this.removeLine(props.sentenceData)}
                     class="sentence__translation__button remove"
                   >
@@ -1695,7 +1695,7 @@ export class ReadAlongComponent {
                   </button>
                   <p
                     id={sentenceID + "translation"}
-                    data-cy="translation-line"
+                    data-test-id="translation-line"
                     class="sentence__text editable__translation"
                     onInput={(e: any) => {
                       this.updateTranslation(
@@ -1716,7 +1716,7 @@ export class ReadAlongComponent {
                 <button
                   title={this.getI18nString("add-translation")}
                   aria-label="Add translation"
-                  data-cy="add-translation-button"
+                  data-test-id="add-translation-button"
                   class="sentence__translation sentence__translation__button"
                   onClick={() => this.addLine(props.sentenceData)}
                 >
@@ -1805,7 +1805,7 @@ export class ReadAlongComponent {
 
   PlayControl = (): Element => (
     <button
-      data-cy="play-button"
+      data-test-id="play-button"
       disabled={!this.isReadyToPlay()}
       aria-label="Play"
       title={this.getI18nString("play-tooltip")}
@@ -1826,7 +1826,7 @@ export class ReadAlongComponent {
 
   ReplayControl = (): Element => (
     <button
-      data-cy="replay-button"
+      data-test-id="replay-button"
       disabled={this.hasLoaded < 2}
       aria-label="Rewind"
       title={this.getI18nString("rewind-tooltip")}
@@ -1844,7 +1844,7 @@ export class ReadAlongComponent {
 
   StopControl = (): Element => (
     <button
-      data-cy="stop-button"
+      data-test-id="stop-button"
       disabled={this.hasLoaded < 2}
       aria-label="Stop"
       title={this.getI18nString("stop-tooltip")}
@@ -1938,7 +1938,7 @@ export class ReadAlongComponent {
 
   TextTranslationDisplayControl = (): Element => (
     <button
-      data-cy="translation-toggle"
+      data-test-id="translation-toggle"
       aria-label="Toggle Translation"
       title={this.getI18nString("translation-tooltip")}
       onClick={() => this.toggleTextTranslation()}
@@ -1972,14 +1972,14 @@ export class ReadAlongComponent {
     </button>
   );
   ErrorMessage = (props: { msg: string; data_cy: string }): Element => (
-    <p data-cy={props.data_cy} class="alert status-error">
+    <p data-test-id={props.data_cy} class="alert status-error">
       <span class="material-icons">error_outline</span> {props.msg}
     </p>
   );
 
   ControlPanel = (): Element => (
     <div
-      data-cy="control-panel"
+      data-test-id="control-panel"
       class={
         "control-panel theme--" + this.theme + " background--" + this.theme
       }
@@ -2242,7 +2242,7 @@ export class ReadAlongComponent {
           onScroll={() => {
             this.handleScrollEvent();
           }}
-          data-cy="text-container"
+          data-test-id="text-container"
           class={
             "pages__container" +
             " theme--" +
@@ -2270,7 +2270,7 @@ export class ReadAlongComponent {
           <div
             onClick={(e) => this.goToSeekFromProgress(e)}
             id="all"
-            data-cy="progress-bar"
+            data-test-id="progress-bar"
             class={
               "overlay__container theme--" +
               this.theme +