diff --git a/src/tests/frontend-new/specs/enter.spec.ts b/src/tests/frontend-new/specs/enter.spec.ts
new file mode 100644
index 000000000..fd9c732c2
--- /dev/null
+++ b/src/tests/frontend-new/specs/enter.spec.ts
@@ -0,0 +1,63 @@
+'use strict';
+import {expect, test} from "@playwright/test";
+import {getPadBody, goToNewPad, writeToPad} from "../helper/padHelper";
+
+test.beforeEach(async ({ page })=>{
+    await goToNewPad(page);
+})
+
+test.describe('enter keystroke', function () {
+
+    test('creates a new line & puts cursor onto a new line', async function ({page}) {
+        const padBody = await getPadBody(page);
+
+        // get the first text element out of the inner iframe
+        const firstTextElement = padBody.locator('div').nth(0)
+
+        // get the original string value minus the last char
+        const originalTextValue = await firstTextElement.textContent();
+
+        // simulate key presses to enter content
+        await firstTextElement.click()
+        await page.keyboard.press('Home');
+        await page.keyboard.press('Enter');
+
+        const updatedFirstElement = padBody.locator('div').nth(0)
+        expect(await updatedFirstElement.textContent()).toBe('')
+
+        const newSecondLine = padBody.locator('div').nth(1);
+        // expect the second line to be the same as the original first line.
+        expect(await newSecondLine.textContent()).toBe(originalTextValue);
+    });
+
+    test('enter is always visible after event', async function ({page}) {
+        const padBody = await getPadBody(page);
+        const originalLength = await padBody.locator('div').count();
+        let lastLine = padBody.locator('div').last();
+
+        // simulate key presses to enter content
+        let i = 0;
+        const numberOfLines = 15;
+        while (i < numberOfLines) {
+            lastLine = padBody.locator('div').last();
+            await lastLine.focus();
+            await page.keyboard.press('End');
+            await page.keyboard.press('Enter');
+
+            // check we can see the caret..
+            i++;
+        }
+
+        expect(await padBody.locator('div').count()).toBe(numberOfLines + originalLength);
+
+        // is edited line fully visible?
+        const lastDiv = padBody.locator('div').last()
+        const lastDivOffset = await lastDiv.boundingBox();
+        const bottomOfLastLine = lastDivOffset!.y + lastDivOffset!.height;
+        const scrolledWindow = page.frames()[0];
+        const windowOffset = await scrolledWindow.evaluate(() => window.pageYOffset);
+        const windowHeight = await scrolledWindow.evaluate(() => window.innerHeight);
+
+        expect(windowOffset + windowHeight).toBeGreaterThan(bottomOfLastLine);
+    });
+});
diff --git a/src/tests/frontend/specs/enter.js b/src/tests/frontend/specs/enter.js
deleted file mode 100644
index a32a90c6e..000000000
--- a/src/tests/frontend/specs/enter.js
+++ /dev/null
@@ -1,61 +0,0 @@
-'use strict';
-
-describe('enter keystroke', function () {
-  // create a new pad before each test run
-  beforeEach(async function () {
-    await helper.aNewPad();
-  });
-
-  it('creates a new line & puts cursor onto a new line', async function () {
-    this.timeout(2000);
-    const inner$ = helper.padInner$;
-
-    // get the first text element out of the inner iframe
-    const $firstTextElement = inner$('div').first();
-
-    // get the original string value minus the last char
-    const originalTextValue = $firstTextElement.text();
-
-    // simulate key presses to enter content
-    $firstTextElement.sendkeys('{enter}');
-
-    await helper.waitForPromise(() => inner$('div').first().text() === '');
-
-    const $newSecondLine = inner$('div').first().next();
-    const newFirstTextElementValue = inner$('div').first().text();
-    expect(newFirstTextElementValue).to.be(''); // expect the first line to be blank
-    // expect the second line to be the same as the original first line.
-    expect($newSecondLine.text()).to.be(originalTextValue);
-  });
-
-  it('enter is always visible after event', async function () {
-    const originalLength = helper.padInner$('div').length;
-    let $lastLine = helper.padInner$('div').last();
-
-    // simulate key presses to enter content
-    let i = 0;
-    const numberOfLines = 15;
-    let previousLineLength = originalLength;
-    while (i < numberOfLines) {
-      $lastLine = helper.padInner$('div').last();
-      $lastLine.sendkeys('{enter}');
-      await helper.waitForPromise(() => helper.padInner$('div').length > previousLineLength);
-      previousLineLength = helper.padInner$('div').length;
-      // check we can see the caret..
-
-      i++;
-    }
-    await helper.waitForPromise(
-        () => helper.padInner$('div').length === numberOfLines + originalLength);
-
-    // is edited line fully visible?
-    const lastLine = helper.padInner$('div').last();
-    const bottomOfLastLine = lastLine.offset().top + lastLine.height();
-    const scrolledWindow = helper.padChrome$('iframe')[0];
-    await helper.waitForPromise(() => {
-      const scrolledAmount =
-          scrolledWindow.contentWindow.pageYOffset + scrolledWindow.contentWindow.innerHeight;
-      return scrolledAmount >= bottomOfLastLine;
-    });
-  });
-});