diff --git a/cypress/e2e/default/learn/challenges/sass.ts b/cypress/e2e/default/learn/challenges/sass.ts
deleted file mode 100644
index c8fed4d9652..00000000000
--- a/cypress/e2e/default/learn/challenges/sass.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-const sassPathLocation =
-  '/learn/front-end-development-libraries/sass/' +
-  'use-for-to-create-a-sass-loop';
-
-const getIframeBody = () => {
-  return cy
-    .get('.challenge-preview iframe')
-    .its('0.contentDocument')
-    .should('exist')
-    .its('body')
-    .should('not.be.undefined')
-    .then(body => cy.wrap(body));
-};
-
-describe('Sass Challenge', () => {
-  before(() => {
-    cy.visit(sassPathLocation);
-    cy.wait(5000);
-  });
-
-  it('should render the sass preview', () => {
-    getIframeBody().find('.text-1');
-    getIframeBody().find('.text-2');
-    getIframeBody().find('.text-3');
-    getIframeBody().find('.text-4');
-    getIframeBody().find('.text-5');
-  });
-});
diff --git a/e2e/sass.spec.ts b/e2e/sass.spec.ts
new file mode 100644
index 00000000000..67fedb125db
--- /dev/null
+++ b/e2e/sass.spec.ts
@@ -0,0 +1,20 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Sass Challenge', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(
+      '/learn/front-end-development-libraries/sass/use-for-to-create-a-sass-loop'
+    );
+  });
+
+  test('should render the sass preview', async ({ page }) => {
+    const frame = page.frameLocator('.challenge-preview iframe');
+    expect(frame).not.toBeNull();
+
+    await expect(frame.locator('.text-1')).toBeVisible();
+    await expect(frame.locator('.text-2')).toBeVisible();
+    await expect(frame.locator('.text-3')).toBeVisible();
+    await expect(frame.locator('.text-4')).toBeVisible();
+    await expect(frame.locator('.text-5')).toBeVisible();
+  });
+});