diff --git a/packages/main/cypress/specs/ProgressIndicator.cy.tsx b/packages/main/cypress/specs/ProgressIndicator.cy.tsx
new file mode 100644
index 000000000000..eddc8d7e5664
--- /dev/null
+++ b/packages/main/cypress/specs/ProgressIndicator.cy.tsx
@@ -0,0 +1,69 @@
+import ProgressIndicator from "../../src/ProgressIndicator.js";
+import { setAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
+
+describe("API", () => {
+    before(() => {
+        cy.wrap({ setAnimationMode })
+            .then(api => {
+                return api.setAnimationMode("none");
+            });
+    })
+
+	it("tests value validation", () => {
+		cy.mount(<ProgressIndicator></ProgressIndicator>);
+
+		cy.get("[ui5-progress-indicator]").invoke("prop", "value", 50);
+		cy.get("[ui5-progress-indicator]").should("have.prop", "validatedValue", 50);
+
+		cy.get("[ui5-progress-indicator]").invoke("prop", "value", -10);
+		cy.get("[ui5-progress-indicator]").should("have.prop", "validatedValue", 0);
+
+		cy.get("[ui5-progress-indicator]").invoke("prop", "value", 110);
+		cy.get("[ui5-progress-indicator]").should("have.prop", "validatedValue", 100);
+	});
+
+	it("tests displayValue property", () => {
+		cy.mount(<ProgressIndicator value={50}></ProgressIndicator>);
+
+		const customDisplayValue = "Custom Display Value";
+
+		cy.get("[ui5-progress-indicator]").should("have.prop", "validatedValue", 50);
+
+		cy.get("[ui5-progress-indicator]").invoke("attr", "display-value", customDisplayValue);
+
+		cy.get("[ui5-progress-indicator]")
+			.shadow()
+			.find(".ui5-progress-indicator-value")
+			.should("contain.text", customDisplayValue);
+
+		cy.get("[ui5-progress-indicator]").invoke("attr", "display-value", "");
+
+		cy.get("[ui5-progress-indicator]")
+			.shadow()
+			.find(".ui5-progress-indicator-value")
+			.should("contain.text", "50%");
+	});
+
+	it("tests accessibleName property", () => {
+		const accName = "Hello world";
+		const accNameNew = "Hello world 2";
+
+		cy.mount(<ProgressIndicator value={100} accessibleName={accName}></ProgressIndicator>);
+
+		cy.get("[ui5-progress-indicator]").should("have.prop", "accessibleName", accName);
+		
+		cy.get("[ui5-progress-indicator]")
+			.shadow()
+			.find("div")
+			.should("have.attr", "aria-label", accName);
+
+		cy.get("[ui5-progress-indicator]").invoke("prop", "accessibleName", accNameNew);
+
+		cy.get("[ui5-progress-indicator]").should("have.prop", "accessibleName", accNameNew);
+
+		cy.get("[ui5-progress-indicator]")
+			.shadow()
+			.find("div")
+			.should("have.attr", "aria-label", accNameNew);
+	});
+});
\ No newline at end of file
diff --git a/packages/main/test/specs/ProgressIndicator.spec.js b/packages/main/test/specs/ProgressIndicator.spec.js
deleted file mode 100644
index c94e0d1bcca6..000000000000
--- a/packages/main/test/specs/ProgressIndicator.spec.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import { assert } from "chai";
-
-describe("API", () => {
-	before(async () => {
-		await browser.url(`test/pages/ProgressIndicator.html`);
-	});
-
-	it("tests value validation", async () => {
-		const progressIndicator = await browser.$("#test-progress-indicator");
-		const negativeButton = await browser.$("#sixthBtn");
-		const validButton = await browser.$("#thirdBtn");
-		const largerButton = await browser.$("#seventhBtn");
-
-		await validButton.click();
-		assert.strictEqual(await progressIndicator.getProperty("validatedValue"), 50, "The value is validated correctly.");
-
-		await negativeButton.click();
-		assert.strictEqual(await progressIndicator.getProperty("validatedValue"), 0, "The value is limited to 0 and it is validated correctly.");
-
-		await largerButton.click();
-		assert.strictEqual(await progressIndicator.getProperty("validatedValue"), 100, "The value is limited to 100 and it is validated correctly.");
-	});
-
-	it("tests displayValue property", async () => {
-		const progressIndicator = await browser.$("#test-progress-indicator");
-		const customDisplayValue = "Custom Display Value";
-		const originalPercentageValue = await progressIndicator.getProperty("validatedValue");
-		const valueShadowSpan = await progressIndicator.shadow$(".ui5-progress-indicator-value");
-
-		await progressIndicator.setAttribute("display-value", customDisplayValue);
-		assert.strictEqual(await valueShadowSpan.getText(), customDisplayValue,
-			"The value span is showing the custom set text by the display-value attribute.");
-
-		await progressIndicator.setAttribute("display-value", "");
-		assert.strictEqual(await valueShadowSpan.getText(), originalPercentageValue + "%",
-			"The value is row backed to the originally shown percentage value after the display value is set to empty string.");
-	});
-
-	it("tests accessibleName property", async () => {
-		// Arrange
-		const progressIndicator = await browser.$("#PI");
-		const progressIndicatorInternally = await browser.$("#PI").shadow$("div");;
-		const accName = "Hello world";
-		const accNameNew = "Hello world 2";
-
-		// Assert
-		assert.strictEqual(await progressIndicator.getProperty("accessibleName"), accName, "The aria-label is correctly set.");
-		assert.strictEqual(await progressIndicatorInternally.getAttribute("aria-label"), accName, "The aria-label is correctly set internally.");
-
-		//Act
-		await progressIndicator.setProperty("accessibleName", accNameNew);
-
-		// Assert
-		assert.strictEqual(await progressIndicator.getProperty("accessibleName"), accNameNew, "The aria-label is correctly changed.");
-		assert.strictEqual(await progressIndicatorInternally.getAttribute("aria-label"), accNameNew, "The aria-label is correctly changed internally.");
-
-
-	});
-});