diff --git a/projects/demo-cypress/cypress/tests/addon-mobile/mobile-calendar/mobile-calendar.cy.ts b/projects/demo-cypress/cypress/tests/addon-mobile/mobile-calendar/mobile-calendar.cy.ts
deleted file mode 100644
index 0f7e8129106c..000000000000
--- a/projects/demo-cypress/cypress/tests/addon-mobile/mobile-calendar/mobile-calendar.cy.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-describe(`MobileCalendar`, () => {
-    before(() => {
-        cy.clock(Date.UTC(2021, 10, 10), [`Date`]);
-    });
-
-    it(`works`, () => {
-        cy.viewport(400, 812);
-        cy.tuiVisit(`components/mobile-calendar`);
-
-        cy.get(`tui-mobile-calendar-example-1 button`).first().click();
-        cy.get(`tui-dialog tui-mobile-calendar`)
-            .tuiWaitBeforeAction()
-            .matchImageSnapshot(`mobile-calendar`);
-    });
-
-    it(`check disabled state`, () => {
-        cy.tuiVisit(`components/mobile-calendar/API?tuiMode=null&max$=1`);
-
-        cy.get(`tui-mobile-calendar`)
-            .tuiWaitBeforeAction()
-            .matchImageSnapshot(`mobile-calendar-disabled`);
-
-        cy.tuiVisit(`components/mobile-calendar/API?tuiMode=null&max$=0`);
-
-        cy.get(`tui-mobile-calendar`)
-            .tuiWaitBeforeAction()
-            .matchImageSnapshot(`mobile-calendar-enabled`);
-    });
-});
diff --git a/projects/demo-playwright/tests/addon-mobile/mobile-calendar/mobile-calendar.spec.ts b/projects/demo-playwright/tests/addon-mobile/mobile-calendar/mobile-calendar.spec.ts
new file mode 100644
index 000000000000..b7019617d7d4
--- /dev/null
+++ b/projects/demo-playwright/tests/addon-mobile/mobile-calendar/mobile-calendar.spec.ts
@@ -0,0 +1,37 @@
+import {TuiDocumentationPagePO, tuiGoto} from '@demo-playwright/utils';
+import {expect, test} from '@playwright/test';
+
+test.describe(`MobileCalendar`, () => {
+    test.use({viewport: {width: 400, height: 812}});
+
+    test(`works`, async ({page}) => {
+        await tuiGoto(page, `components/mobile-calendar`);
+        const example = new TuiDocumentationPagePO(page).getExample(`#dropdown`);
+        const chooseDateButton = example
+            .locator(`tui-mobile-calendar-example-1 button`)
+            .first();
+
+        await chooseDateButton.click();
+        await expect(example).toHaveScreenshot(`01-mobile-calendar.png`);
+    });
+
+    test(`check disabled state`, async ({page}) => {
+        await tuiGoto(page, `components/mobile-calendar/API?tuiMode=null&max$=1`);
+        const {apiPageExample} = new TuiDocumentationPagePO(page);
+
+        await apiPageExample.scrollIntoViewIfNeeded();
+        await expect(page).toHaveScreenshot(`01-mobile-calendar-disabled.png`, {
+            mask: [page.locator(`tui-mobile-calendar`)],
+        });
+    });
+
+    test(`check enabled state`, async ({page}) => {
+        await tuiGoto(page, `components/mobile-calendar/API?tuiMode=null&max$=0`);
+        const {apiPageExample} = new TuiDocumentationPagePO(page);
+
+        await apiPageExample.scrollIntoViewIfNeeded();
+        await expect(page).toHaveScreenshot(`01-mobile-calendar-enabled.png`, {
+            mask: [page.locator(`tui-mobile-calendar`)],
+        });
+    });
+});