diff --git a/src/tests/frontend-new/specs/change_user_color.spec.ts b/src/tests/frontend-new/specs/change_user_color.spec.ts
new file mode 100644
index 000000000..bc6b609a1
--- /dev/null
+++ b/src/tests/frontend-new/specs/change_user_color.spec.ts
@@ -0,0 +1,103 @@
+import {expect, test} from "@playwright/test";
+import {goToNewPad, sendChatMessage, showChat} from "../helper/padHelper";
+
+test.beforeEach(async ({page}) => {
+    await goToNewPad(page);
+})
+
+test.describe('change user color', function () {
+
+    test('Color picker matches original color and remembers the user color after a refresh',
+        async function ({page}) {
+
+            // click on the settings button to make settings visible
+            let $userButton = page.locator('.buttonicon-showusers');
+            await $userButton.click()
+
+            let $userSwatch = page.locator('#myswatch');
+            await $userSwatch.click()
+            // Change the color value of the Farbtastic color picker
+
+            const $colorPickerSave = page.locator('#mycolorpickersave');
+            let $colorPickerPreview = page.locator('#mycolorpickerpreview');
+
+            // Same color represented in two different ways
+            const testColorHash = '#abcdef';
+            const testColorRGB = 'rgb(171, 205, 239)';
+
+            // Check that the color picker matches the automatically assigned random color on the swatch.
+            // NOTE: This has a tiny chance of creating a false positive for passing in the
+            // off-chance the randomly assigned color is the same as the test color.
+            expect(await $colorPickerPreview.getAttribute('style')).toContain(await $userSwatch.getAttribute('style'));
+
+            // The swatch updates as the test color is picked.
+            await page.evaluate((testRGBColor) => {
+                document.getElementById('mycolorpickerpreview')!.style.backgroundColor = testRGBColor;
+            }, testColorRGB
+            )
+
+            await $colorPickerSave.click();
+
+            // give it a second to save the color on the server side
+            await page.waitForTimeout(1000)
+
+
+            // get a new pad, but don't clear the cookies
+            await goToNewPad(page)
+
+
+            // click on the settings button to make settings visible
+            await $userButton.click()
+
+            await $userSwatch.click()
+
+
+
+            expect(await $colorPickerPreview.getAttribute('style')).toContain(await $userSwatch.getAttribute('style'));
+        });
+
+    test('Own user color is shown when you enter a chat', async function ({page}) {
+
+        const colorOption = page.locator('#options-colorscheck');
+        if (!(await colorOption.isChecked())) {
+            await colorOption.check();
+        }
+
+        // click on the settings button to make settings visible
+        const $userButton = page.locator('.buttonicon-showusers');
+        await $userButton.click()
+
+        const $userSwatch = page.locator('#myswatch');
+        await $userSwatch.click()
+
+        const $colorPickerSave = page.locator('#mycolorpickersave');
+
+        // Same color represented in two different ways
+        const testColorHash = '#abcdef';
+        const testColorRGB = 'rgb(171, 205, 239)';
+
+        // The swatch updates as the test color is picked.
+        await page.evaluate((testRGBColor) => {
+                document.getElementById('mycolorpickerpreview')!.style.backgroundColor = testRGBColor;
+            }, testColorRGB
+        )
+
+
+        await $colorPickerSave.click();
+        // click on the chat button to make chat visible
+        await showChat(page)
+        await sendChatMessage(page, 'O hi');
+
+        // wait until the chat message shows up
+        const chatP = page.locator('#chattext').locator('p')
+        const chatText = await chatP.innerText();
+
+        expect(chatText).toContain('O hi');
+
+        const color = await chatP.evaluate((el) => {
+            return window.getComputedStyle(el).getPropertyValue('background-color');
+        }, chatText);
+
+        expect(color).toBe(testColorRGB);
+    });
+});
diff --git a/src/tests/frontend-new/specs/urls_become_clickable.spec.ts b/src/tests/frontend-new/specs/urls_become_clickable.spec.ts
new file mode 100644
index 000000000..0397502bc
--- /dev/null
+++ b/src/tests/frontend-new/specs/urls_become_clickable.spec.ts
@@ -0,0 +1,51 @@
+import {expect, test} from "@playwright/test";
+import {clearPadContent, getPadBody, goToNewPad, writeToPad} from "../helper/padHelper";
+
+test.beforeEach(async ({ page })=>{
+    await goToNewPad(page);
+})
+
+test.describe('entering a URL makes a link', function () {
+    for (const url of ['https://etherpad.org', 'www.etherpad.org', 'https://www.etherpad.org']) {
+        test(url, async function ({page}) {
+            const padBody = await getPadBody(page);
+            await clearPadContent(page)
+            const url = 'https://etherpad.org';
+            await writeToPad(page, url);
+            await expect(padBody.locator('div').first()).toHaveText(url);
+            await expect(padBody.locator('a')).toHaveText(url);
+            await expect(padBody.locator('a')).toHaveAttribute('href', url);
+        });
+    }
+});
+
+
+test.describe('special characters inside URL', async function () {
+    for (const char of '-:@_.,~%+/?=&#!;()[]$\'*') {
+        const url = `https://etherpad.org/${char}foo`;
+        test(url, async function ({page}) {
+            const padBody = await getPadBody(page);
+            await clearPadContent(page)
+            await padBody.click()
+            await clearPadContent(page)
+            await writeToPad(page, url);
+            await expect(padBody.locator('div').first()).toHaveText(url);
+            await expect(padBody.locator('a')).toHaveText(url);
+            await expect(padBody.locator('a')).toHaveAttribute('href', url);
+        });
+    }
+});
+
+test.describe('punctuation after URL is ignored', ()=> {
+    for (const char of ':.,;?!)]\'*') {
+        const want = 'https://etherpad.org';
+        const input = want + char;
+        test(input, async function ({page}) {
+            const padBody = await getPadBody(page);
+            await clearPadContent(page)
+            await writeToPad(page, input);
+            await expect(padBody.locator('a')).toHaveCount(1);
+            await expect(padBody.locator('a')).toHaveAttribute('href', want);
+        });
+    }
+});
diff --git a/src/tests/frontend/specs/change_user_color.js b/src/tests/frontend/specs/change_user_color.js
deleted file mode 100644
index 9025b1a54..000000000
--- a/src/tests/frontend/specs/change_user_color.js
+++ /dev/null
@@ -1,102 +0,0 @@
-'use strict';
-
-describe('change user color', function () {
-  // create a new pad before each test run
-  beforeEach(async function () {
-    await helper.aNewPad();
-  });
-
-  it('Color picker matches original color and remembers the user color' +
-      ' after a refresh', async function () {
-    this.timeout(10000);
-    let chrome$ = helper.padChrome$;
-
-    // click on the settings button to make settings visible
-    let $userButton = chrome$('.buttonicon-showusers');
-    $userButton.trigger('click');
-
-    let $userSwatch = chrome$('#myswatch');
-    $userSwatch.trigger('click');
-
-    const fb = chrome$.farbtastic('#colorpicker');
-    const $colorPickerSave = chrome$('#mycolorpickersave');
-    let $colorPickerPreview = chrome$('#mycolorpickerpreview');
-
-    // Same color represented in two different ways
-    const testColorHash = '#abcdef';
-    const testColorRGB = 'rgb(171, 205, 239)';
-
-    // Check that the color picker matches the automatically assigned random color on the swatch.
-    // NOTE: This has a tiny chance of creating a false positive for passing in the
-    // off-chance the randomly assigned color is the same as the test color.
-    expect($colorPickerPreview.css('background-color')).to.be($userSwatch.css('background-color'));
-
-    // The swatch updates as the test color is picked.
-    fb.setColor(testColorHash);
-    expect($colorPickerPreview.css('background-color')).to.be(testColorRGB);
-    $colorPickerSave.trigger('click');
-    expect($userSwatch.css('background-color')).to.be(testColorRGB);
-
-    // give it a second to save the color on the server side
-    await new Promise((resolve) => setTimeout(resolve, 1000));
-
-    // get a new pad, but don't clear the cookies
-    await helper.aNewPad({clearCookies: false});
-
-    chrome$ = helper.padChrome$;
-
-    // click on the settings button to make settings visible
-    $userButton = chrome$('.buttonicon-showusers');
-    $userButton.trigger('click');
-
-    $userSwatch = chrome$('#myswatch');
-    $userSwatch.trigger('click');
-
-    $colorPickerPreview = chrome$('#mycolorpickerpreview');
-
-    expect($colorPickerPreview.css('background-color')).to.be(testColorRGB);
-    expect($userSwatch.css('background-color')).to.be(testColorRGB);
-  });
-
-  it('Own user color is shown when you enter a chat', function (done) {
-    this.timeout(1000);
-    const chrome$ = helper.padChrome$;
-
-    const $colorOption = helper.padChrome$('#options-colorscheck');
-    if (!$colorOption.is(':checked')) {
-      $colorOption.trigger('click');
-    }
-
-    // click on the settings button to make settings visible
-    const $userButton = chrome$('.buttonicon-showusers');
-    $userButton.trigger('click');
-
-    const $userSwatch = chrome$('#myswatch');
-    $userSwatch.trigger('click');
-
-    const fb = chrome$.farbtastic('#colorpicker');
-    const $colorPickerSave = chrome$('#mycolorpickersave');
-
-    // Same color represented in two different ways
-    const testColorHash = '#abcdef';
-    const testColorRGB = 'rgb(171, 205, 239)';
-
-    fb.setColor(testColorHash);
-    $colorPickerSave.trigger('click');
-
-    // click on the chat button to make chat visible
-    const $chatButton = chrome$('#chaticon');
-    $chatButton.trigger('click');
-    const $chatInput = chrome$('#chatinput');
-    $chatInput.sendkeys('O hi'); // simulate a keypress of typing user
-    $chatInput.sendkeys('{enter}');
-
-    // wait until the chat message shows up
-    helper.waitFor(() => chrome$('#chattext').children('p').length !== 0).done(() => {
-      const $firstChatMessage = chrome$('#chattext').children('p');
-      // expect the first chat message to be of the user's color
-      expect($firstChatMessage.css('background-color')).to.be(testColorRGB);
-      done();
-    });
-  });
-});
diff --git a/src/tests/frontend/specs/urls_become_clickable.js b/src/tests/frontend/specs/urls_become_clickable.js
deleted file mode 100644
index bb3f00b34..000000000
--- a/src/tests/frontend/specs/urls_become_clickable.js
+++ /dev/null
@@ -1,56 +0,0 @@
-'use strict';
-
-describe('urls', function () {
-  // Returns the first text element. Note that any change to the text element will result in the
-  // element being replaced with another object.
-  const txt = () => helper.padInner$('div').first();
-
-  before(async function () {
-    await helper.aNewPad();
-  });
-
-  beforeEach(async function () {
-    await helper.clearPad();
-  });
-
-  describe('entering a URL makes a link', function () {
-    for (const url of ['https://etherpad.org', 'www.etherpad.org']) {
-      it(url, async function () {
-        this.timeout(5000);
-        const url = 'https://etherpad.org';
-        await helper.edit(url);
-        await helper.waitForPromise(() => txt().find('a').length === 1, 2000);
-        const link = txt().find('a');
-        expect(link.attr('href')).to.be(url);
-        expect(link.text()).to.be(url);
-      });
-    }
-  });
-
-  describe('special characters inside URL', function () {
-    for (const char of '-:@_.,~%+/?=&#!;()[]$\'*') {
-      const url = `https://etherpad.org/${char}foo`;
-      it(url, async function () {
-        await helper.edit(url);
-        await helper.waitForPromise(() => txt().find('a').length === 1);
-        const link = txt().find('a');
-        expect(link.attr('href')).to.be(url);
-        expect(link.text()).to.be(url);
-      });
-    }
-  });
-
-  describe('punctuation after URL is ignored', function () {
-    for (const char of ':.,;?!)]\'*') {
-      const want = 'https://etherpad.org';
-      const input = want + char;
-      it(input, async function () {
-        await helper.edit(input);
-        await helper.waitForPromise(() => txt().find('a').length === 1);
-        const link = txt().find('a');
-        expect(link.attr('href')).to.be(want);
-        expect(link.text()).to.be(want);
-      });
-    }
-  });
-});