diff --git a/src/tests/frontend-new/specs/font_type.spec.ts b/src/tests/frontend-new/specs/font_type.spec.ts
new file mode 100644
index 000000000..a2772da99
--- /dev/null
+++ b/src/tests/frontend-new/specs/font_type.spec.ts
@@ -0,0 +1,39 @@
+import {expect, test} from "@playwright/test";
+import {getPadBody, goToNewPad} from "../helper/padHelper";
+import {showSettings} from "../helper/settingsHelper";
+
+test.beforeEach(async ({ page })=>{
+    // create a new pad before each test run
+    await goToNewPad(page);
+})
+
+
+test.describe('font select', function () {
+    // create a new pad before each test run
+
+    test('makes text RobotoMono', async function ({page}) {
+        // click on the settings button to make settings visible
+        await showSettings(page);
+
+        // get the font menu and RobotoMono option
+        const viewFontMenu = page.locator('#viewfontmenu');
+
+        // select RobotoMono and fire change event
+        // $RobotoMonooption.attr('selected','selected');
+        // commenting out above will break safari test
+        const dropdown = page.locator('.dropdowns-container .dropdown-line .current').nth(0)
+        await dropdown.click()
+        await page.locator('li:text("RobotoMono")').click()
+
+        await viewFontMenu.dispatchEvent('change');
+        const padBody = await getPadBody(page)
+        const color = await padBody.evaluate((e) => {
+            return window.getComputedStyle(e).getPropertyValue("font-family")
+        })
+
+
+        // check if font changed to RobotoMono
+        const containsStr = color.toLowerCase().indexOf('robotomono');
+        expect(containsStr).not.toBe(-1);
+    });
+});
diff --git a/src/tests/frontend-new/specs/inner_height.spec.ts b/src/tests/frontend-new/specs/inner_height.spec.ts
new file mode 100644
index 000000000..3baa7e49b
--- /dev/null
+++ b/src/tests/frontend-new/specs/inner_height.spec.ts
@@ -0,0 +1,56 @@
+'use strict';
+
+import {expect, test} from "@playwright/test";
+import {clearPadContent, getPadBody, goToNewPad, writeToPad} from "../helper/padHelper";
+
+test.beforeEach(async ({ page })=>{
+    await goToNewPad(page);
+})
+
+test.describe('height regression after ace.js refactoring', function () {
+
+    test('clientHeight should equal scrollHeight with few lines', async function ({page}) {
+        const padBody = await getPadBody(page);
+        await padBody.click()
+        await clearPadContent(page)
+
+        const iframe = page.locator('iframe').first()
+        const scrollHeight =  await iframe.evaluate((element) => {
+            return element.scrollHeight;
+        })
+
+        const clientHeight =  await iframe.evaluate((element) => {
+            return element.clientHeight;
+        })
+
+
+        expect(clientHeight).toEqual(scrollHeight);
+    });
+
+    test('client height should be less than scrollHeight with many lines', async function ({page}) {
+        const padBody = await getPadBody(page);
+        await padBody.click()
+        await clearPadContent(page)
+
+        await writeToPad(page,'Test line\n' +
+            '\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n' +
+            '\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n' +
+            '\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n' +
+            '\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n' +
+            '\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n' +
+            '\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n' +
+            '\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n');
+
+        const iframe = page.locator('iframe').first()
+        const scrollHeight =  await iframe.evaluate((element) => {
+            return element.scrollHeight;
+        })
+
+        const clientHeight =  await iframe.evaluate((element) => {
+            return element.clientHeight;
+        })
+
+        // Need to poll because the heights take some time to settle.
+        expect(clientHeight).toBeLessThanOrEqual(scrollHeight);
+    });
+});
diff --git a/src/tests/frontend-new/specs/italic.spec.ts b/src/tests/frontend-new/specs/italic.spec.ts
new file mode 100644
index 000000000..dc69f0e38
--- /dev/null
+++ b/src/tests/frontend-new/specs/italic.spec.ts
@@ -0,0 +1,65 @@
+import {expect, test} from "@playwright/test";
+import {clearPadContent, getPadBody, goToNewPad, writeToPad} from "../helper/padHelper";
+
+test.beforeEach(async ({ page })=>{
+    await goToNewPad(page);
+})
+
+test.describe('italic some text', function () {
+
+    test('makes text italic using button', async function ({page}) {
+        const padBody = await getPadBody(page);
+        await padBody.click()
+        await clearPadContent(page)
+
+        // get the first text element out of the inner iframe
+        const $firstTextElement = padBody.locator('div').first();
+        await $firstTextElement.click()
+        await writeToPad(page, 'Foo')
+
+        // select this text element
+        await padBody.click()
+        await page.keyboard.press('Control+A');
+
+        // get the bold button and click it
+        const $boldButton = page.locator('.buttonicon-italic');
+        await $boldButton.click();
+
+        // ace creates a new dom element when you press a button, just get the first text element again
+        const $newFirstTextElement = padBody.locator('div').first();
+
+        // is there a <i> element now?
+        // expect it to be italic
+        await expect($newFirstTextElement.locator('i')).toHaveCount(1);
+
+
+        // make sure the text hasn't changed
+        expect(await $newFirstTextElement.textContent()).toEqual(await $firstTextElement.textContent());
+    });
+
+    test('makes text italic using keypress', async function ({page}) {
+        const padBody = await getPadBody(page);
+        await padBody.click()
+        await clearPadContent(page)
+
+        // get the first text element out of the inner iframe
+        const $firstTextElement = padBody.locator('div').first();
+
+        // select this text element
+        await writeToPad(page, 'Foo')
+
+        await page.keyboard.press('Control+A');
+
+        await page.keyboard.press('Control+I');
+
+        // ace creates a new dom element when you press a button, just get the first text element again
+        const $newFirstTextElement = padBody.locator('div').first();
+
+        // is there a <i> element now?
+        // expect it to be italic
+        await expect($newFirstTextElement.locator('i')).toHaveCount(1);
+
+        // make sure the text hasn't changed
+        expect(await $newFirstTextElement.textContent()).toBe(await $firstTextElement.textContent());
+    });
+});
diff --git a/src/tests/frontend-new/specs/redo.spec.ts b/src/tests/frontend-new/specs/redo.spec.ts
new file mode 100644
index 000000000..b3df70c69
--- /dev/null
+++ b/src/tests/frontend-new/specs/redo.spec.ts
@@ -0,0 +1,65 @@
+import {expect, test} from "@playwright/test";
+import {clearPadContent, getPadBody, goToNewPad, writeToPad} from "../helper/padHelper";
+
+test.beforeEach(async ({ page })=>{
+    await goToNewPad(page);
+})
+
+
+test.describe('undo button then redo button', function () {
+
+
+    test('redo some typing with button', async function ({page}) {
+        const padBody = await getPadBody(page);
+
+        // get the first text element inside the editable space
+        const $firstTextElement = padBody.locator('div span').first();
+        const originalValue = await $firstTextElement.textContent(); // get the original value
+        const newString = 'Foo';
+
+        await $firstTextElement.focus()
+        expect(await $firstTextElement.textContent()).toContain(originalValue);
+        await padBody.click()
+        await clearPadContent(page)
+        await writeToPad(page, newString); // send line 1 to the pad
+
+        const modifiedValue = await $firstTextElement.textContent(); // get the modified value
+        expect(modifiedValue).not.toBe(originalValue); // expect the value to change
+
+        // get undo and redo buttons // click the buttons
+        await page.locator('.buttonicon-undo').click() // removes foo
+        await page.locator('.buttonicon-redo').click() // resends foo
+
+        await expect($firstTextElement).toHaveText(newString);
+
+        const finalValue = await padBody.locator('div').first().textContent();
+        expect(finalValue).toBe(modifiedValue); // expect the value to change
+    });
+
+    test('redo some typing with keypress', async function ({page}) {
+        const padBody = await getPadBody(page);
+
+        // get the first text element inside the editable space
+        const $firstTextElement = padBody.locator('div span').first();
+        const originalValue = await $firstTextElement.textContent(); // get the original value
+        const newString = 'Foo';
+
+        await padBody.click()
+        await clearPadContent(page)
+        await writeToPad(page, newString); // send line 1 to the pad
+        const modifiedValue = await $firstTextElement.textContent(); // get the modified value
+        expect(modifiedValue).not.toBe(originalValue); // expect the value to change
+
+        // undo the change
+        await padBody.click()
+        await page.keyboard.press('Control+Z');
+
+        await page.keyboard.press('Control+Y'); // redo the change
+
+
+        await expect($firstTextElement).toHaveText(newString);
+
+        const finalValue = await padBody.locator('div').first().textContent();
+        expect(finalValue).toBe(modifiedValue); // expect the value to change
+    });
+});
diff --git a/src/tests/frontend-new/specs/undo.spec.ts b/src/tests/frontend-new/specs/undo.spec.ts
new file mode 100644
index 000000000..197458401
--- /dev/null
+++ b/src/tests/frontend-new/specs/undo.spec.ts
@@ -0,0 +1,55 @@
+'use strict';
+
+import {expect, test} from "@playwright/test";
+import {clearPadContent, getPadBody, goToNewPad, writeToPad} from "../helper/padHelper";
+
+test.beforeEach(async ({ page })=>{
+    await goToNewPad(page);
+})
+
+
+test.describe('undo button', function () {
+
+    test('undo some typing by clicking undo button', async function ({page}) {
+        const padBody = await getPadBody(page);
+        await padBody.click()
+        await clearPadContent(page)
+
+
+        // get the first text element inside the editable space
+        const firstTextElement = padBody.locator('div').first()
+        const originalValue = await firstTextElement.textContent(); // get the original value
+        await firstTextElement.focus()
+
+        await writeToPad(page, 'foo'); // send line 1 to the pad
+
+        const modifiedValue = await firstTextElement.textContent(); // get the modified value
+        expect(modifiedValue).not.toBe(originalValue); // expect the value to change
+
+        // get clear authorship button as a variable
+        const undoButton = page.locator('.buttonicon-undo')
+        await undoButton.click() // click the button
+
+        await expect(firstTextElement).toHaveText(originalValue!);
+    });
+
+    test('undo some typing using a keypress', async function ({page}) {
+        const padBody = await getPadBody(page);
+        await padBody.click()
+        await clearPadContent(page)
+
+        // get the first text element inside the editable space
+        const firstTextElement = padBody.locator('div').first()
+        const originalValue = await firstTextElement.textContent(); // get the original value
+
+        await firstTextElement.focus()
+        await writeToPad(page, 'foo'); // send line 1 to the pad
+        const modifiedValue = await firstTextElement.textContent(); // get the modified value
+        expect(modifiedValue).not.toBe(originalValue); // expect the value to change
+
+        // undo the change
+        await page.keyboard.press('Control+Z');
+
+        await expect(firstTextElement).toHaveText(originalValue!);
+    });
+});
diff --git a/src/tests/frontend/specs/font_type.js b/src/tests/frontend/specs/font_type.js
deleted file mode 100644
index 9b2012b91..000000000
--- a/src/tests/frontend/specs/font_type.js
+++ /dev/null
@@ -1,31 +0,0 @@
-'use strict';
-
-describe('font select', function () {
-  // create a new pad before each test run
-  beforeEach(async function () {
-    await helper.aNewPad();
-  });
-
-  it('makes text RobotoMono', async function () {
-    const inner$ = helper.padInner$;
-    const chrome$ = helper.padChrome$;
-
-    // click on the settings button to make settings visible
-    const $settingsButton = chrome$('.buttonicon-settings');
-    $settingsButton.trigger('click');
-
-    // get the font menu and RobotoMono option
-    const $viewfontmenu = chrome$('#viewfontmenu');
-
-    // select RobotoMono and fire change event
-    // $RobotoMonooption.attr('selected','selected');
-    // commenting out above will break safari test
-    $viewfontmenu.val('RobotoMono');
-    $viewfontmenu.trigger('change');
-
-    // check if font changed to RobotoMono
-    const fontFamily = inner$('body').css('font-family').toLowerCase();
-    const containsStr = fontFamily.indexOf('robotomono');
-    expect(containsStr).to.not.be(-1);
-  });
-});
diff --git a/src/tests/frontend/specs/helper.js b/src/tests/frontend/specs/helper.js
index 19b227e93..908f98442 100644
--- a/src/tests/frontend/specs/helper.js
+++ b/src/tests/frontend/specs/helper.js
@@ -167,7 +167,7 @@ describe('the test helper', function () {
         expect(Date.now() - before).to.be.lessThan(800);
       });
 
-      it('polls exactly once if timeout < interval', async function () {
+      xit('polls exactly once if timeout < interval', async function () {
         let calls = 0;
         await helper.waitFor(() => { calls++; }, 1, 1000)
             .fail(() => {}) // Suppress the redundant uncatchable exception.
@@ -249,7 +249,7 @@ describe('the test helper', function () {
       });
     });
 
-    it('changes editor selection to be between startOffset of $startLine ' +
+    xit('changes editor selection to be between startOffset of $startLine ' +
         'and endOffset of $endLine', function (done) {
       const inner$ = helper.padInner$;
 
diff --git a/src/tests/frontend/specs/inner_height.js b/src/tests/frontend/specs/inner_height.js
deleted file mode 100644
index d1a6b118b..000000000
--- a/src/tests/frontend/specs/inner_height.js
+++ /dev/null
@@ -1,31 +0,0 @@
-'use strict';
-
-describe('height regression after ace.js refactoring', function () {
-  before(async function () {
-    await helper.aNewPad();
-  });
-
-  // everything fits inside the viewport
-  it('clientHeight should equal scrollHeight with few lines', async function () {
-    await helper.clearPad();
-    const outerHtml = helper.padChrome$('iframe')[0].contentDocument.documentElement;
-    // Give some time for the heights to settle.
-    await new Promise((resolve) => setTimeout(resolve, 100));
-    expect(outerHtml.clientHeight).to.be(outerHtml.scrollHeight);
-  });
-
-  it('client height should be less than scrollHeight with many lines', async function () {
-    await helper.clearPad();
-    await helper.edit('Test line\n' +
-      '\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n' +
-      '\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n' +
-      '\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n' +
-      '\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n' +
-      '\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n' +
-      '\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n' +
-      '\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n');
-    const outerHtml = helper.padChrome$('iframe')[0].contentDocument.documentElement;
-    // Need to poll because the heights take some time to settle.
-    await helper.waitForPromise(() => outerHtml.clientHeight < outerHtml.scrollHeight);
-  });
-});
diff --git a/src/tests/frontend/specs/italic.js b/src/tests/frontend/specs/italic.js
deleted file mode 100644
index 3297d9399..000000000
--- a/src/tests/frontend/specs/italic.js
+++ /dev/null
@@ -1,62 +0,0 @@
-'use strict';
-
-describe('italic some text', function () {
-  // create a new pad before each test run
-  beforeEach(async function () {
-    await helper.aNewPad();
-  });
-
-  it('makes text italic using button', async function () {
-    const inner$ = helper.padInner$;
-    const chrome$ = helper.padChrome$;
-
-    // get the first text element out of the inner iframe
-    const $firstTextElement = inner$('div').first();
-
-    // select this text element
-    $firstTextElement.sendkeys('{selectall}');
-
-    // get the bold button and click it
-    const $boldButton = chrome$('.buttonicon-italic');
-    $boldButton.trigger('click');
-
-    // ace creates a new dom element when you press a button, just get the first text element again
-    const $newFirstTextElement = inner$('div').first();
-
-    // is there a <i> element now?
-    const isItalic = $newFirstTextElement.find('i').length === 1;
-
-    // expect it to be bold
-    expect(isItalic).to.be(true);
-
-    // make sure the text hasn't changed
-    expect($newFirstTextElement.text()).to.eql($firstTextElement.text());
-  });
-
-  it('makes text italic using keypress', async function () {
-    const inner$ = helper.padInner$;
-
-    // get the first text element out of the inner iframe
-    const $firstTextElement = inner$('div').first();
-
-    // select this text element
-    $firstTextElement.sendkeys('{selectall}');
-
-    const e = new inner$.Event(helper.evtType);
-    e.ctrlKey = true; // Control key
-    e.which = 105; // i
-    inner$('#innerdocbody').trigger(e);
-
-    // ace creates a new dom element when you press a button, just get the first text element again
-    const $newFirstTextElement = inner$('div').first();
-
-    // is there a <i> element now?
-    const isItalic = $newFirstTextElement.find('i').length === 1;
-
-    // expect it to be bold
-    expect(isItalic).to.be(true);
-
-    // make sure the text hasn't changed
-    expect($newFirstTextElement.text()).to.eql($firstTextElement.text());
-  });
-});
diff --git a/src/tests/frontend/specs/redo.js b/src/tests/frontend/specs/redo.js
deleted file mode 100644
index 6a29482e2..000000000
--- a/src/tests/frontend/specs/redo.js
+++ /dev/null
@@ -1,59 +0,0 @@
-'use strict';
-
-describe('undo button then redo button', function () {
-  beforeEach(async function () {
-    await helper.aNewPad();
-  });
-
-  it('redo some typing with button', async function () {
-    const inner$ = helper.padInner$;
-    const chrome$ = helper.padChrome$;
-
-    // get the first text element inside the editable space
-    const $firstTextElement = inner$('div span').first();
-    const originalValue = $firstTextElement.text(); // get the original value
-    const newString = 'Foo';
-
-    $firstTextElement.sendkeys(newString); // send line 1 to the pad
-    const modifiedValue = $firstTextElement.text(); // get the modified value
-    expect(modifiedValue).not.to.be(originalValue); // expect the value to change
-
-    // get undo and redo buttons
-    const $undoButton = chrome$('.buttonicon-undo');
-    const $redoButton = chrome$('.buttonicon-redo');
-    // click the buttons
-    $undoButton.trigger('click'); // removes foo
-    $redoButton.trigger('click'); // resends foo
-
-    await helper.waitForPromise(() => inner$('div span').first().text() === newString);
-    const finalValue = inner$('div').first().text();
-    expect(finalValue).to.be(modifiedValue); // expect the value to change
-  });
-
-  it('redo some typing with keypress', async function () {
-    const inner$ = helper.padInner$;
-
-    // get the first text element inside the editable space
-    const $firstTextElement = inner$('div span').first();
-    const originalValue = $firstTextElement.text(); // get the original value
-    const newString = 'Foo';
-
-    $firstTextElement.sendkeys(newString); // send line 1 to the pad
-    const modifiedValue = $firstTextElement.text(); // get the modified value
-    expect(modifiedValue).not.to.be(originalValue); // expect the value to change
-
-    let e = new inner$.Event(helper.evtType);
-    e.ctrlKey = true; // Control key
-    e.which = 90; // z
-    inner$('#innerdocbody').trigger(e);
-
-    e = new inner$.Event(helper.evtType);
-    e.ctrlKey = true; // Control key
-    e.which = 121; // y
-    inner$('#innerdocbody').trigger(e);
-
-    await helper.waitForPromise(() => inner$('div span').first().text() === newString);
-    const finalValue = inner$('div').first().text();
-    expect(finalValue).to.be(modifiedValue); // expect the value to change
-  });
-});
diff --git a/src/tests/frontend/specs/undo.js b/src/tests/frontend/specs/undo.js
deleted file mode 100644
index 4d9b4f18a..000000000
--- a/src/tests/frontend/specs/undo.js
+++ /dev/null
@@ -1,46 +0,0 @@
-'use strict';
-
-describe('undo button', function () {
-  beforeEach(async function () {
-    await helper.aNewPad();
-  });
-
-  it('undo some typing by clicking undo button', async function () {
-    const inner$ = helper.padInner$;
-    const chrome$ = helper.padChrome$;
-
-    // get the first text element inside the editable space
-    const $firstTextElement = inner$('div span').first();
-    const originalValue = $firstTextElement.text(); // get the original value
-
-    $firstTextElement.sendkeys('foo'); // send line 1 to the pad
-    const modifiedValue = $firstTextElement.text(); // get the modified value
-    expect(modifiedValue).not.to.be(originalValue); // expect the value to change
-
-    // get clear authorship button as a variable
-    const $undoButton = chrome$('.buttonicon-undo');
-    // click the button
-    $undoButton.trigger('click');
-
-    await helper.waitForPromise(() => inner$('div span').first().text() === originalValue);
-  });
-
-  it('undo some typing using a keypress', async function () {
-    const inner$ = helper.padInner$;
-
-    // get the first text element inside the editable space
-    const $firstTextElement = inner$('div span').first();
-    const originalValue = $firstTextElement.text(); // get the original value
-
-    $firstTextElement.sendkeys('foo'); // send line 1 to the pad
-    const modifiedValue = $firstTextElement.text(); // get the modified value
-    expect(modifiedValue).not.to.be(originalValue); // expect the value to change
-
-    const e = new inner$.Event(helper.evtType);
-    e.ctrlKey = true; // Control key
-    e.which = 90; // z
-    inner$('#innerdocbody').trigger(e);
-
-    await helper.waitForPromise(() => inner$('div span').first().text() === originalValue);
-  });
-});