diff --git a/.gitignore b/.gitignore
index 728327101da..b2e57390bbe 100644
--- a/.gitignore
+++ b/.gitignore
@@ -49,5 +49,6 @@ generated
 /reports*
 /data/page_views_map.json
 test-results
+test/storage-state.json
 
 public/data
\ No newline at end of file
diff --git a/.teamcity/tests/buildTypes/E2EProductionTest.kt b/.teamcity/tests/buildTypes/E2EProductionTest.kt
index b6f2b848bf4..797d5e22976 100644
--- a/.teamcity/tests/buildTypes/E2EProductionTest.kt
+++ b/.teamcity/tests/buildTypes/E2EProductionTest.kt
@@ -48,6 +48,7 @@ object E2EProductionTest : BuildType({
 
     features {
         notifications {
+            branchFilter = "+:master"
             enabled = !isProjectPlayground()
             notifierSettings = slackNotifier {
                 connection = "PROJECT_EXT_486"
diff --git a/.teamcity/tests/buildTypes/E2ETests.kt b/.teamcity/tests/buildTypes/E2ETests.kt
index 2a67494084a..e7547d32444 100644
--- a/.teamcity/tests/buildTypes/E2ETests.kt
+++ b/.teamcity/tests/buildTypes/E2ETests.kt
@@ -1,12 +1,9 @@
 package tests.buildTypes
 
-import documentation.builds.KotlinWithCoroutines
 import jetbrains.buildServer.configs.kotlin.BuildType
 import jetbrains.buildServer.configs.kotlin.FailureAction
 import jetbrains.buildServer.configs.kotlin.buildSteps.script
-import kotlinlang.builds.BuildJsAssets
-import references.builds.kotlinx.coroutines.KotlinxCoroutinesBuildApiReference
-import references.builds.kotlinx.serialization.KotlinxSerializationBuildApiReference
+import kotlinlang.builds.BuildSitePages
 
 
 object E2ETests : BuildType({
@@ -16,70 +13,36 @@ object E2ETests : BuildType({
         +:test-results/* => test-results.zip
     """.trimIndent()
 
+    requirements {
+        exists("docker.server.version")
+        contains("docker.server.osType", "linux")
+    }
+
     vcs {
         root(vcsRoots.KotlinLangOrg)
     }
 
-    dependencies {
-        artifacts(KotlinWithCoroutines) {
-            cleanDestination = true
-            artifactRules = """
-                +:webHelpImages.zip!** => dist/docs/images/
-                +:webHelpKR2.zip!** => dist/docs/
-            """.trimIndent()
-        }
-
-        dependency(BuildJsAssets) {
-            snapshot {
-                onDependencyFailure = FailureAction.FAIL_TO_START
-                onDependencyCancel = FailureAction.CANCEL
-            }
-
-            artifacts {
-                artifactRules = "+:assets.zip!** => _assets/"
-            }
-        }
-
-        dependency(KotlinxCoroutinesBuildApiReference) {
-            snapshot {
-                onDependencyFailure = FailureAction.CANCEL
-                onDependencyCancel = FailureAction.CANCEL
-            }
-
-            artifacts {
-                artifactRules = "+:pages.zip!** => libs/kotlinx.coroutines/"
-            }
-        }
-
-        dependency(KotlinxSerializationBuildApiReference) {
-            snapshot {
-                onDependencyFailure = FailureAction.CANCEL
-                onDependencyCancel = FailureAction.CANCEL
-            }
-
-            artifacts {
-                artifactRules = "+:pages.zip!** => libs/kotlinx.serialization/"
-            }
-        }
+    params {
+        param("env.WEBTEAM_UI_NPM_TOKEN", "%WEBTEAM_UI_NPM_TOKEN%")
     }
 
     steps {
-        script {
-            name = "Set execute permissions"
-            scriptContent = "chmod +x ./scripts/test/run-e2e-tests.sh"
-        }
         script {
             name = "Run E2E tests"
             scriptContent = "./scripts/test/run-e2e-tests.sh"
         }
     }
 
-    artifactRules = """
-        +:test-results/ => test-results/
-    """.trimIndent()
-
-    requirements {
-        exists("docker.server.version")
-        contains("docker.server.osType", "linux")
+    dependencies {
+        dependency(BuildSitePages) {
+            snapshot {
+                onDependencyFailure = FailureAction.FAIL_TO_START
+                onDependencyCancel = FailureAction.CANCEL
+            }
+            artifacts {
+                buildRule = sameChainOrLastFinished()
+                artifactRules = "+:pages.zip!** => dist/"
+            }
+        }
     }
 })
diff --git a/blocks/education/courses-list/courses-list.tsx b/blocks/education/courses-list/courses-list.tsx
index db71c9b975d..0e39a3c59ce 100644
--- a/blocks/education/courses-list/courses-list.tsx
+++ b/blocks/education/courses-list/courses-list.tsx
@@ -22,14 +22,14 @@ interface CoursesListProps {
 export const CoursesList: FC<CoursesListProps> = ({ universities }) => {
     const textCn = useTextStyles();
     return (
-        <div className={styles.list}>
-            <div className={cn(styles.header, textCn('rs-h4'))}>
+        <div className={styles.list} data-test="courses">
+            <div className={cn(styles.header, textCn('rs-h4'))} data-test="courses-header">
                 <div className={cn(styles.cell, styles.cellFirst)}>University title</div>
                 <div className={cn(styles.cell, styles.cellSecond)}>Location</div>
                 <div className={cn(styles.cell, styles.cellThird)}>Teaching Kotlin</div>
             </div>
             {universities.map((university) => (
-                <div className={cn(styles.item, textCn('rs-text-2', { hardness: 'hard' }))} key={university.id}>
+                <div className={cn(styles.item, textCn('rs-text-2', { hardness: 'hard' }))} key={university.id} data-test="courses-item">
                     <div className={cn(styles.cell, styles.cellFirst)}>{university.title}</div>
                     <div className={cn(styles.cell, styles.cellSecond)}>{university.location}</div>
                     <div className={cn(styles.cell, styles.cellThird)}>
diff --git a/blocks/education/education-layout/education-layout.tsx b/blocks/education/education-layout/education-layout.tsx
index b6db3893bfd..f2daad2827b 100644
--- a/blocks/education/education-layout/education-layout.tsx
+++ b/blocks/education/education-layout/education-layout.tsx
@@ -51,6 +51,7 @@ export const EducationLayout: FC<EducationLayoutProps> = ({
             </div>
 
             <CtaBlock
+                className={'cta-block'}
                 topTitle={
                     'If you would like to introduce Kotlin into your classroom or have any questions about teaching or learning Kotlin'
                 }
diff --git a/blocks/education/subscription-form/subscription-form.tsx b/blocks/education/subscription-form/subscription-form.tsx
index 25087f95c9d..f15d369bff8 100644
--- a/blocks/education/subscription-form/subscription-form.tsx
+++ b/blocks/education/subscription-form/subscription-form.tsx
@@ -51,7 +51,7 @@ export const SubscriptionForm: FC = () => {
             }}
         >
             {({ setFieldValue }) => (
-                <Form className={styles.form}>
+                <Form className={styles.form} data-test="subscription-form">
                     <img src={MailIcon.src} className={styles.icon} alt="Subscribe form" />
 
                     <div className={cn(styles.text, textCn('rs-h3'))}>
@@ -66,12 +66,14 @@ export const SubscriptionForm: FC = () => {
                         className={styles.input}
                     />
 
-                    <FormikPrivacyCheckbox consentId={consentId} privacy={privacy} className={styles.checkbox} />
+                    <div data-test="subscription-checkbox">
+                        <FormikPrivacyCheckbox consentId={consentId} privacy={privacy} className={styles.checkbox} />
+                    </div>
 
                     {isSubmitted ? (
                         <span className={cn(styles.button, styles.submitted)}>
                             <span className={styles.submittedText}>Subscribe</span>
-                            <CheckIcon className={styles.submittedIcon} />
+                            <CheckIcon className={styles.submittedIcon} data-test="subscription-submitted-icon" />
                         </span>
                     ) : (
                         <FormikSubmitButton size="m" className={styles.button}>
diff --git a/blocks/education/teach-launch-course/teach-launch-course.tsx b/blocks/education/teach-launch-course/teach-launch-course.tsx
index 6d2e0484a86..056b8e2d8cc 100644
--- a/blocks/education/teach-launch-course/teach-launch-course.tsx
+++ b/blocks/education/teach-launch-course/teach-launch-course.tsx
@@ -9,7 +9,7 @@ export const TeachLaunchCourse: FC = () => {
 
     return (
         <div className={styles.launchCourse}>
-            <div className={cn('ktl-text-1', styles.text)}>
+            <div className={cn('ktl-text-1', styles.text)} data-test="teach-launch-course">
                 The Programming in Kotlin course is a comprehensive toolkit for teaching Kotlin and can be easily
                 customized to align with specific educational needs. The course comes with slides, lecture notes, and
                 assessment resources.
diff --git a/blocks/education/teach-map/teach-map-marker.tsx b/blocks/education/teach-map/teach-map-marker.tsx
index 43ffaea6281..a4003028116 100644
--- a/blocks/education/teach-map/teach-map-marker.tsx
+++ b/blocks/education/teach-map/teach-map-marker.tsx
@@ -14,7 +14,7 @@ interface TeachMapMarkerProps {
 
 export const TeachMapMarker: FC<TeachMapMarkerProps> = ({ university, showTooltip, onClose }) => {
     return (
-        <div className={cn(styles.marker, { [styles.active]: showTooltip })}>
+        <div className={cn(styles.marker, { [styles.active]: showTooltip })} data-test="teach-map-marker">
             {showTooltip && <TeachMapTooltip university={university} onClose={onClose} />}
         </div>
     );
diff --git a/blocks/education/teach-map/teach-map-tooltip.tsx b/blocks/education/teach-map/teach-map-tooltip.tsx
index 4f5399f3253..ee2bef1ba43 100644
--- a/blocks/education/teach-map/teach-map-tooltip.tsx
+++ b/blocks/education/teach-map/teach-map-tooltip.tsx
@@ -19,7 +19,7 @@ export const TeachMapTooltip: FC<TeachMapTooltipProps> = ({ university, onClose
     );
 
     return (
-        <div className={cn(styles.tooltip, 'ktl-text-3')}>
+        <div className={cn(styles.tooltip, 'ktl-text-3')} data-test="teach-map-tooltip">
             <div className={styles.header}>
                 <div>
                     <div className={styles.headerText}>{university.title}</div>
diff --git a/blocks/education/teach-map/teach-map.tsx b/blocks/education/teach-map/teach-map.tsx
index 6f856d74d7a..48ce87ba1ce 100644
--- a/blocks/education/teach-map/teach-map.tsx
+++ b/blocks/education/teach-map/teach-map.tsx
@@ -32,7 +32,7 @@ export const TeachMap: FC<TeachMapProps> = ({ className, universities }) => {
 
     return (
         <ErrorBoundary fallback={<div>Map is unavailable</div>}>
-            <div className={cn(styles.map, className)}>
+            <div className={cn(styles.map, className)} data-test={'teach-map'}>
                 <GoogleMapReact
                     bootstrapURLKeys={{ key: mapSettings.key }}
                     defaultCenter={mapSettings.defaultCenter}
diff --git a/blocks/education/teach-numbers/teach-numbers.tsx b/blocks/education/teach-numbers/teach-numbers.tsx
index 4c7342d73e9..267d001f97a 100644
--- a/blocks/education/teach-numbers/teach-numbers.tsx
+++ b/blocks/education/teach-numbers/teach-numbers.tsx
@@ -13,7 +13,7 @@ export const TeachNumbers: FC<TeachNumbersProps> = ({ countriesCount, universiti
                 <div className={styles.title}>
                     <div className="ktl-hero">{countriesCount}</div>
                 </div>
-                <div className={styles.subtitle}>
+                <div className={styles.subtitle} data-test="teach-number-subtitle">
                     <div className="ktl-text-2">countries</div>
                 </div>
             </div>
@@ -21,7 +21,7 @@ export const TeachNumbers: FC<TeachNumbersProps> = ({ countriesCount, universiti
                 <div className={styles.title}>
                     <div className="ktl-hero">{universitiesCount}</div>
                 </div>
-                <div className={styles.subtitle}>
+                <div className={styles.subtitle} data-test="teach-number-subtitle">
                     <div className="ktl-text-2">universities</div>
                 </div>
             </div>
diff --git a/docker-compose-e2e-statics.yml b/docker-compose-e2e-statics.yml
index dbc43b8e4ae..eea31864af3 100644
--- a/docker-compose-e2e-statics.yml
+++ b/docker-compose-e2e-statics.yml
@@ -1,34 +1,30 @@
-version: '3'
 services:
   nginx-server:
-    build:
-      context: .
-      dockerfile: ./dockerfiles/nginx-server/Dockerfile
-    ports:
-      - 8081:80
+    image: nginx:stable-alpine
     networks:
-      - network1
+      - test-network
+    volumes:
+      - ./dist:/usr/share/nginx/html
     healthcheck:
-        test: [ "CMD", "curl", "-f", "http://localhost" ]
-        interval: 30s
-        timeout: 10s
-        retries: 3
+      test: [ "CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://localhost" ]
+      interval: 30s
+      timeout: 5s
+      retries: 3
 
   playwright:
-    build:
-      context: .
-      dockerfile: ./dockerfiles/playwright/Dockerfile
-    command: yarn run test:e2e:ci
+    image: mcr.microsoft.com/playwright:v1.57.0-noble
     environment:
       BASE_URL: "http://nginx-server"
+      WEBTEAM_UI_NPM_TOKEN: ${WEBTEAM_UI_NPM_TOKEN}
+    working_dir: /var/www
     volumes:
-      - ./test/snapshots:/var/www/test/snapshots
-      - ./test-results:/var/www/test-results
+      - .:/var/www
+    command: sh -c "yarn install && yarn run test:e2e:ci"
     depends_on:
       nginx-server:
         condition: service_healthy
     networks:
-      - network1
+      - test-network
 
 networks:
-  network1:
+  test-network:
diff --git a/dockerfiles/e2e-tests/Dockerfile b/dockerfiles/e2e-tests/Dockerfile
index ef90f1d9dd3..27c9f279f66 100644
--- a/dockerfiles/e2e-tests/Dockerfile
+++ b/dockerfiles/e2e-tests/Dockerfile
@@ -15,7 +15,7 @@ RUN npm install --global yarn
 
 # Install Playwright dependencies
 RUN apt-get -y install wget gnupg
-RUN npx playwright@1.53.0 install-deps
+RUN npx playwright@1.57 install-deps
 
 WORKDIR /var/www
 
diff --git a/dockerfiles/nginx-server/Dockerfile b/dockerfiles/nginx-server/Dockerfile
deleted file mode 100644
index 098d448db6e..00000000000
--- a/dockerfiles/nginx-server/Dockerfile
+++ /dev/null
@@ -1,8 +0,0 @@
-FROM nginx:latest
-
-WORKDIR /var/www
-COPY dist /usr/share/nginx/html
-COPY libs /usr/share/nginx/html/api
-COPY _assets /usr/share/nginx/html/_assets
-
-RUN chmod -R 755 /usr/share/nginx/html
diff --git a/dockerfiles/playwright/Dockerfile b/dockerfiles/playwright/Dockerfile
deleted file mode 100644
index 3f5d124c5e6..00000000000
--- a/dockerfiles/playwright/Dockerfile
+++ /dev/null
@@ -1,13 +0,0 @@
-FROM mcr.microsoft.com/playwright:v1.53.0-noble
-
-WORKDIR /var/www
-
-COPY package.json yarn.lock ./
-RUN apt-get update && apt-get install -y build-essential
-RUN yarn install --frozen-lockfile
-
-COPY playwright.config.js .
-
-COPY . .
-
-CMD ["tail", "-f"]
diff --git a/package.json b/package.json
index 7da99728ec5..f937a6ead11 100644
--- a/package.json
+++ b/package.json
@@ -107,6 +107,7 @@
         "next-optimized-images": "3.0.0-canary.10",
         "next-transpile-modules": "^10.0.1",
         "playwright": "1.57.0",
+        "playwright-teamcity-reporter": "1.0.5",
         "postcss-custom-media": "10.0.0",
         "postcss-import": "15.1.0",
         "prettier": "2.6.2",
@@ -136,11 +137,11 @@
         "lint": "next lint",
         "test": "playwright test test",
         "test:production": "playwright test test/production",
-        "test:production:ci": "CI=true BASE_URL=https://kotlinlang.org playwright test test/production",
+        "test:production:ci": "CI=true BASE_URL=https://kotlinlang.org playwright test",
         "test:production:headed": "playwright test test/production --headed --project=chromium",
         "test:production:debug": "PWDEBUG=1 playwright test test/production --project=chromium",
         "test:e2e": "playwright test test/e2e",
-        "test:e2e:ci": "CI=true playwright test test/e2e",
+        "test:e2e:ci": "CI=true playwright test",
         "test:e2e:headed": "playwright test test/e2e --headed",
         "test:e2e:debug": "PWDEBUG=1 playwright test test/e2e  --project=chromium",
         "test:e2e:update": "playwright test test/e2e --update-snapshots",
diff --git a/pages/education/index.tsx b/pages/education/index.tsx
index 4e6defab657..1631e082454 100644
--- a/pages/education/index.tsx
+++ b/pages/education/index.tsx
@@ -75,9 +75,9 @@ function EducationPage() {
                     </Button>
                 </div>
 
-                <div className={cn(styles.features, 'ktl-row', 'ktl-offset-top-l')}>
+                <div className={cn(styles.features, 'ktl-row', 'ktl-offset-top-l')} data-test="teach-features">
                     <div className="ktl-col-12 ktl-col-md-4">
-                        <div className={styles.feature}>
+                        <div className={styles.feature} data-test="teach-feature">
                             <div className={cn(styles.featureIcon, 'ktl-offset-bottom-m')}>
                                 <img
                                     src="/images/education/icons/teach-academically-recognized-icon.svg"
@@ -95,7 +95,7 @@ function EducationPage() {
                     </div>
 
                     <div className="ktl-col-12 ktl-col-md-4">
-                        <div className={styles.feature}>
+                        <div className={styles.feature} data-test="teach-feature">
                             <div className={cn(styles.featureIcon, 'ktl-offset-bottom-m')}>
                                 <img
                                     src="/images/education/icons/teach-popular-icon.svg"
@@ -113,7 +113,7 @@ function EducationPage() {
                     </div>
 
                     <div className="ktl-col-12 ktl-col-md-4">
-                        <div className={styles.feature}>
+                        <div className={styles.feature} data-test="teach-feature">
                             <div className={cn(styles.featureIcon, 'ktl-offset-bottom-m')}>
                                 <img
                                     src="/images/education/icons/teach-multiplatform-icon.svg"
@@ -133,7 +133,7 @@ function EducationPage() {
                 </div>
 
                 <div className="ktl-offset-top-l">
-                    <div className={styles.topButtons}>
+                    <div className={styles.topButtons} data-test="teach-top-buttons">
                         <Button
                             size="l"
                             icon={<SlackIcon />}
@@ -178,43 +178,43 @@ function EducationPage() {
                                 Kotlin is taught at {universitiesCount} universities
                             </h2>
 
-                            <div className={styles.universitiesTopNumbers}>
+                            <div className={styles.universitiesTopNumbers} data-test="universities-numbers">
                                 <TeachNumbers countriesCount={countriesCount} universitiesCount={universitiesCount} />
                             </div>
                         </div>
                     </div>
 
                     <div className={cn(styles.universitiesLogos, 'ktl-offset-top-m')}>
-                        <div className={styles.logos}>
-                            <div className={styles.logosItem}>
+                        <div className={styles.logos} data-test="teach-logos">
+                            <div className={styles.logosItem} data-test="teach-logo">
                                 <img
                                     className={styles.logosHopkins}
                                     src="/images/education/universities/harvard.jpg"
                                     alt="Harvard University"
                                 />
                             </div>
-                            <div className={styles.logosItem}>
+                            <div className={styles.logosItem} data-test="teach-logo">
                                 <img
                                     className={styles.logosCambridge}
                                     src="/images/education/universities/cambridge.png"
                                     alt="University of Cambridge"
                                 />
                             </div>
-                            <div className={styles.logosItem}>
+                            <div className={styles.logosItem} data-test="teach-logo">
                                 <img
                                     className={styles.logosStanford}
                                     src="/images/education/universities/stanford.png"
                                     alt="Stanford University"
                                 />
                             </div>
-                            <div className={styles.logosItem}>
+                            <div className={styles.logosItem} data-test="teach-logo">
                                 <img
                                     className={styles.logosImperial}
                                     src="/images/education/universities/imperial.png"
                                     alt="Imperial College London"
                                 />
                             </div>
-                            <div className={styles.logosItem}>
+                            <div className={styles.logosItem} data-test="teach-logo">
                                 <img
                                     className={styles.logosChicago}
                                     src="/images/education/universities/uchicago.png"
@@ -224,9 +224,9 @@ function EducationPage() {
                         </div>
                     </div>
 
-                    <TeachMap className={styles.mapWrapper} universities={universities} />
+                    <TeachMap className={styles.mapWrapper} universities={universities} data-test="teach-map" />
 
-                    <div className={cn(styles.universitiesBottom, 'ktl-offset-top-m')}>
+                    <div className={cn(styles.universitiesBottom, 'ktl-offset-top-m')} data-test="teach-universities-bottom">
                         <div className="ktl-row">
                             <div className="ktl-col-12 ktl-col-sm-8 ktl-col-sm-offset-2">
                                 <p className="ktl-text-2 ktl-offset-bottom-m">
@@ -270,7 +270,7 @@ function EducationPage() {
                     <ul className={styles.links}>
                         <li className={styles.linksFirstList}>
                             <p className="ktl-h4 ktl-offset-bottom-xs">Get started</p>
-                            <ul className={styles.list}>
+                            <ul className={styles.list} data-test="teach-list">
                                 <li className={styles.listItem}>
                                     <a href="/docs/kotlin-tour-welcome.html" className={textCn('rs-link', { external: true })}>
 
@@ -330,7 +330,7 @@ function EducationPage() {
 
                                 <li className={styles.listItem}>
                                     <div className={textCn('rs-text-2')}>Atomic Kotlin:</div>
-                                    <ul className={cn(styles.list, styles.sublist)}>
+                                    <ul className={cn(styles.list, styles.sublist)} data-test="teach-list">
                                         <li className={styles.listItem}>
                                             <a
                                                 href="https://www.atomickotlin.com/exercises/"
@@ -390,7 +390,7 @@ function EducationPage() {
 
                         <li className={styles.linksSecondList}>
                             <p className="ktl-h4 ktl-offset-bottom-xs">Tools</p>
-                            <ul className={styles.list}>
+                            <ul className={styles.list} data-test="teach-list">
                                 <li className={styles.listItem}>
                                     <a
                                         href="https://www.jetbrains.com/community/education/#students"
@@ -436,7 +436,7 @@ function EducationPage() {
 
                         <li className={styles.linksThirdList}>
                             <p className="ktl-h4 ktl-offset-bottom-xs">Online Courses</p>
-                            <ul className={styles.list}>
+                            <ul className={styles.list} data-test="teach-list">
                                 <li className={styles.listItem}>
                                     <a
                                         target="_blank"
@@ -472,7 +472,7 @@ function EducationPage() {
 
                         <li className={styles.linksFourthList}>
                             <p className="ktl-h4 ktl-offset-bottom-xs">Android in Kotlin</p>
-                            <ul className={styles.list}>
+                            <ul className={styles.list} data-test="teach-list">
                                 <li className={styles.listItem}>
                                     <a
                                         href="https://developer.android.com/courses/android-basics-compose/course"
@@ -499,7 +499,7 @@ function EducationPage() {
 
                         <li className={styles.linksFifthList}>
                             <p className="ktl-h4 ktl-offset-bottom-xs">Practice Kotlin</p>
-                            <ul className={styles.list}>
+                            <ul className={styles.list} data-test="teach-list">
                                 <li className={styles.listItem}>
                                     <a href="https://play.kotlinlang.org/koans/overview" className={textCn('rs-link')}>
                                         Koans
@@ -525,7 +525,7 @@ function EducationPage() {
                 <SubscriptionForm />
             </section>
 
-            <section className={cn(styles.video, 'ktl-offset-top-xxl')}>
+            <section className={cn(styles.video, 'ktl-offset-top-xxl')} data-test="teach-video">
                 <div className="ktl-layout ktl-layout--center">
                     <div className="ktl-row">
                         <div className="ktl-col">
diff --git a/pages/education/why-teach-kotlin/index.tsx b/pages/education/why-teach-kotlin/index.tsx
index 1d9902a0f1b..5c6005a263c 100644
--- a/pages/education/why-teach-kotlin/index.tsx
+++ b/pages/education/why-teach-kotlin/index.tsx
@@ -28,7 +28,7 @@ function WhyTeachKotlinPage() {
                             <h3 className={cn(textCn('rs-h3'), 'ktl-offset-bottom-s')}>Academically recognized</h3>
 
                             <div className={styles.quoteSectionGrid}>
-                                <div className={styles.quoteSectionContent}>
+                                <div className={styles.quoteSectionContent} data-test="quote-content">
                                     <p className="ktl-text-1 ktl-offset-bottom-s">
                                         We know of over 300 universities that teach Kotlin in a variety of subjects,
                                         including object-oriented and functional programming, software development,
@@ -40,7 +40,7 @@ function WhyTeachKotlinPage() {
                                     <QuotesSlider quotes={quotes.academicallyRecognized} />
                                 </div>
 
-                                <div className={styles.quoteSectionInfo}>
+                                <div className={styles.quoteSectionInfo} data-test="quote-info">
                                     <p className="ktl-hero ktl-offset-bottom-xs">32</p>
                                     <p className={cn(textCn('rs-text-2'), "ktl-offset-bottom-s")}>
                                         of the top 100 universities in the Times Higher Education World University
@@ -61,7 +61,7 @@ function WhyTeachKotlinPage() {
                             <h3 className={cn(textCn('rs-h3'), 'ktl-offset-bottom-s')}>Language of the industry</h3>
 
                             <div className={styles.quoteSectionGrid}>
-                                <div className={styles.quoteSectionContent}>
+                                <div className={styles.quoteSectionContent} data-test="quote-content">
                                     <div className={cn(textCn('rs-text-1', {hardness: 'hard'}), 'ktl-offset-bottom-m')}>
                                         <ul className={cn(textCn('rs-ul'), styles.noListStyle)}>
                                             <li>
@@ -103,7 +103,7 @@ function WhyTeachKotlinPage() {
                                     <QuotesSlider quotes={quotes.languageOfTheIndustry} />
                                 </div>
 
-                                <div className={styles.quoteSectionInfo}>
+                                <div className={styles.quoteSectionInfo} data-test="quote-info">
                                     <p className={cn(textCn('rs-text-2'), 'ktl-offset-bottom-s')}>
                                         Kotlin has consistently ranked among the hottest software engineering
                                         skills.
@@ -131,7 +131,7 @@ function WhyTeachKotlinPage() {
                             <h3 className={cn(textCn('rs-h3'), 'ktl-offset-bottom-s')}>Multiplatform</h3>
 
                             <div className={styles.quoteSectionGrid}>
-                                <div className={styles.quoteSectionContent}>
+                                <div className={styles.quoteSectionContent} data-test="quote-content">
                                     <p className="ktl-text-1 ktl-offset-bottom-m">
                                         Kotlin is a top choice for teaching Android development. It is also being
                                         adopted for teaching multiplatform development, web, server-side
@@ -141,7 +141,7 @@ function WhyTeachKotlinPage() {
                                     <QuotesSlider quotes={quotes.multiplatform} />
                                 </div>
 
-                                <div className={styles.quoteSectionInfo}>
+                                <div className={styles.quoteSectionInfo} data-test="quote-info">
                                     <p className={cn(textCn('rs-text-2'), 'ktl-offset-bottom-s')}>
                                         The Kotlin Multiplatform Mobile and Compose Multiplatform frameworks from
                                         JetBrains help developers share code between their Android and iOS apps.
@@ -169,7 +169,7 @@ function WhyTeachKotlinPage() {
                             <h3 className={cn(textCn('rs-h3'), 'ktl-offset-bottom-s')}>Interoperable</h3>
 
                             <div className={styles.quoteSectionGrid}>
-                                <div className={styles.quoteSectionContent}>
+                                <div className={styles.quoteSectionContent} data-test="quote-content">
                                     <p className="ktl-text-1 ktl-offset-bottom-m">
                                         Seamless interoperability with the JVM ecosystem means that Kotlin can rely
                                         on numerous existing libraries. The Kotlin plugin bundles a Java to Kotlin
@@ -179,7 +179,7 @@ function WhyTeachKotlinPage() {
                                     <QuotesSlider quotes={quotes.interoperable} />
                                 </div>
 
-                                <div className={styles.quoteSectionInfo}>
+                                <div className={styles.quoteSectionInfo} data-test="quote-info">
                                     <p className={cn(textCn('rs-text-2'), 'ktl-offset-bottom-s')}>
                                         Kotlin can also be compiled into a standalone native binary targeting any
                                         major operating system.
@@ -231,7 +231,7 @@ function WhyTeachKotlinPage() {
                             <h3 className={cn(textCn('rs-h3'), 'ktl-offset-bottom-s')}>Supports multiple paradigms</h3>
 
                             <div className={styles.quoteSectionGrid}>
-                                <div className={styles.quoteSectionContent}>
+                                <div className={styles.quoteSectionContent} data-test="quote-content">
                                     <p className="ktl-text-1 ktl-offset-bottom-m">
                                         Kotlin combines all the major programming paradigms in an elegant way,
                                         making it possible to use functional, imperative, object-oriented, or
@@ -242,7 +242,7 @@ function WhyTeachKotlinPage() {
                                     <QuotesSlider quotes={quotes.supportsMultipleParadigms} />
                                 </div>
 
-                                <div className={styles.quoteSectionInfo}>
+                                <div className={styles.quoteSectionInfo} data-test="quote-info">
                                     <p className={textCn('rs-text-2')}>
                                         Kotlin supports functional, imperative, object-oriented and procedural
                                         programming
@@ -258,7 +258,7 @@ function WhyTeachKotlinPage() {
                             <h3 className={cn(textCn('rs-h3'), 'ktl-offset-bottom-s')}>Modern, concise, and safe</h3>
 
                             <div className={styles.quoteSectionGrid}>
-                                <div className={styles.quoteSectionContent}>
+                                <div className={styles.quoteSectionContent} data-test="quote-content">
                                     <p className="ktl-text-1 ktl-offset-bottom-s">
                                         Kotlin allows students to focus on expressing their ideas, as they don't
                                         have to write as much boilerplate code. Less code written also means less
@@ -276,7 +276,7 @@ function WhyTeachKotlinPage() {
                                     <QuotesSlider quotes={quotes.modernConciseAndSafe} />
                                 </div>
 
-                                <div className={styles.quoteSectionInfo}>
+                                <div className={styles.quoteSectionInfo} data-test="quote-info">
                                     <p className={cn(textCn('rs-text-2'), 'ktl-offset-bottom-s')}>
                                         Type safety, null safety, and expressive syntax are among educators'
                                         favorite Kotlin features.
@@ -295,7 +295,7 @@ function WhyTeachKotlinPage() {
                             <h3 className={cn(textCn('rs-h3'), 'ktl-offset-bottom-s')}>Tooling</h3>
 
                             <div className={styles.quoteSectionGrid}>
-                                <div className={styles.quoteSectionContent}>
+                                <div className={styles.quoteSectionContent} data-test="quote-content">
                                     <p className="ktl-text-1 ktl-offset-bottom-s">
                                         Many of the top professional tools are packaged with the language. IntelliJ
                                         IDEA Ultimate supports Kotlin as a first-class citizen and is free for
@@ -318,7 +318,7 @@ function WhyTeachKotlinPage() {
                                     <QuotesSlider quotes={quotes.toolingAndLearningMaterials} />
                                 </div>
 
-                                <div className={styles.quoteSectionInfo}>
+                                <div className={styles.quoteSectionInfo} data-test="quote-info">
                                     <ul className={textCn('rs-text-2')}>
                                         <li className="ktl-offset-bottom-s">
                                             <a
diff --git a/playwright.config.ts b/playwright.config.ts
index 2403db5bfff..8084ec78b1f 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -2,17 +2,28 @@ import { defineConfig, devices } from '@playwright/test';
 
 const MAX_DIFF_PIXEL_RATIO = 0.025 as const;
 
+const isDevelopment = !process.env.CI;
+
+const reporter = isDevelopment ? 'list' : 'github';
+const retries = isDevelopment ? 0 : 2;
+const timeout = isDevelopment ? 10000 : 5000;
+
+const forbidOnly = !isDevelopment;
+
 export default defineConfig({
-    forbidOnly: !!process.env.CI,
-    retries: process.env.CI ? 2 : 0,
-    reporter: process.env.CI ? 'dot' : 'list',
+    globalSetup: require.resolve('./test/global-setup.ts'),
+    forbidOnly,
+    retries,
+    reporter,
     snapshotDir: 'test/snapshots',
     expect: {
+        timeout,
         toMatchSnapshot: { maxDiffPixelRatio: MAX_DIFF_PIXEL_RATIO },
         toHaveScreenshot: { maxDiffPixelRatio: MAX_DIFF_PIXEL_RATIO }
     },
     use: {
-        baseURL: process.env.BASE_URL || 'http://localhost:9000',
+        baseURL: process.env.BASE_URL || 'http://localhost:3000',
+        storageState: 'test/storage-state.json',
         trace: 'off',
         screenshot: 'only-on-failure',
         video: 'retain-on-failure'
diff --git a/scripts/test/run-e2e-tests.sh b/scripts/test/run-e2e-tests.sh
old mode 100644
new mode 100755
diff --git a/test/e2e/compose-multiplatform.spec.ts b/test/e2e/compose-multiplatform.spec.ts
index bfa2dc4b236..bbecfb3c38c 100644
--- a/test/e2e/compose-multiplatform.spec.ts
+++ b/test/e2e/compose-multiplatform.spec.ts
@@ -21,7 +21,7 @@ test.describe('Compose Multiplatform landing page', async () => {
         const href = await composePage.heroActionButton.getAttribute('href');
 
         await checkScreenshot(composePage.hero, {
-            stylePath: 'test/e2e/hide-sticky-banner.css',
+            stylePath: 'test/snapshots/assets/sticky-navigation.css',
             mask: [composePage.heroCarousel],
         });
 
@@ -35,7 +35,7 @@ test.describe('Compose Multiplatform landing page', async () => {
         await expect(composePage.platformsItems).toHaveCount(4);
 
         await checkScreenshot(composePage.platformsBlock, {
-            stylePath: 'test/e2e/hide-sticky-banner.css',
+            stylePath: 'test/snapshots/assets/sticky-navigation.css',
         });
     })
 
@@ -50,7 +50,7 @@ test.describe('Compose Multiplatform landing page', async () => {
         }
 
         await checkScreenshot(composePage.featuresBlock, {
-            stylePath: 'test/e2e/hide-sticky-banner.css',
+            stylePath: 'test/snapshots/assets/sticky-navigation.css',
         });
     });
 
@@ -59,7 +59,7 @@ test.describe('Compose Multiplatform landing page', async () => {
         await expect(composePage.quoteCards).not.toHaveCount(0);
 
         await checkScreenshot(composePage.quoteSection, {
-            stylePath: 'test/e2e/hide-sticky-banner.css',
+            stylePath: 'test/snapshots/assets/sticky-navigation.css',
         });
     });
 
@@ -71,7 +71,7 @@ test.describe('Compose Multiplatform landing page', async () => {
         const href = await composePage.ctaBlockButton.getAttribute('href');
 
         await checkScreenshot(composePage.ctaBlock, {
-            stylePath: 'test/e2e/hide-sticky-banner.css',
+            stylePath: 'test/snapshots/assets/sticky-navigation.css',
         });
 
         await composePage.ctaBlockButton.click();
diff --git a/test/e2e/multiplatform/multiplatform.spec.ts b/test/e2e/multiplatform/multiplatform.spec.ts
index 01557d5c2b1..b957d5bbffe 100644
--- a/test/e2e/multiplatform/multiplatform.spec.ts
+++ b/test/e2e/multiplatform/multiplatform.spec.ts
@@ -1,7 +1,6 @@
 import { expect, Locator, test } from '@playwright/test';
 import { MultiplatformPage } from '../../page/multiplatform-page';
-import { checkAnchor, checkScreenshot } from '../../utils';
-import { checkFullPageScreenshot } from '../utils';
+import { checkAnchor, checkFullPageScreenshot, checkScreenshot } from '../../utils';
 
 test.describe('Multiplatform landing page', async () => {
     let multiplatformPage: MultiplatformPage;
@@ -35,7 +34,7 @@ test.describe('Multiplatform landing page', async () => {
         await expect(heroActionButton).toBeVisible();
 
         await checkScreenshot(multiplatformPage.heroBanner, {
-            stylePath: 'test/e2e/hide-sticky-banner.css'
+            stylePath: 'test/snapshots/assets/sticky-navigation.css'
         });
 
         const href = await heroActionButton.getAttribute('href');
@@ -89,7 +88,7 @@ test.describe('Multiplatform landing page', async () => {
         await expect(multiplatformPage.ctaBlockAction).not.toBeEmpty();
 
         await checkScreenshot(multiplatformPage.ctaBlock, {
-            stylePath: 'test/e2e/hide-sticky-banner.css'
+            stylePath: 'test/snapshots/assets/sticky-navigation.css'
         });
 
         const href = await multiplatformPage.ctaBlockAction.getAttribute('href');
@@ -124,7 +123,7 @@ async function checkChooseWhatToShare({ page, main, shareWhatBlock }: Multiplatf
     await expect(link).not.toBeEmpty();
 
     await checkScreenshot(shareWhatBlock, {
-        stylePath: 'test/e2e/hide-sticky-banner.css'
+        stylePath: 'test/snapshots/assets/sticky-navigation.css'
     });
 
     // Check that links work as links
diff --git a/test/e2e/server-side-use-cases.spec.ts b/test/e2e/server-side-use-cases.spec.ts
index 5af6c53d53e..0840a9f7cb2 100644
--- a/test/e2e/server-side-use-cases.spec.ts
+++ b/test/e2e/server-side-use-cases.spec.ts
@@ -55,7 +55,7 @@ test.describe('Server-Side landing page', async () => {
         await expect(serverSidePage.heroCaseStudiesLink).toBeVisible();
         await serverSidePage.heroCaseStudiesLink.click();
 
-        expect(page.url()).toContain('/lp/server-side/case-studies/');
+        expect(page.url()).toContain('/case-studies/');
     });
 
     test('Server-side: check Ktor get started link', async ({ page }) => {
@@ -98,26 +98,33 @@ test.describe('Server-Side landing page', async () => {
         const customerLinks = await serverSidePage.customersLink.all();
 
         for (const customerLink of customerLinks) {
-            await serverSidePage.customersBlock.hover();
             const customerLinkURL = await customerLink.getAttribute('href');
 
-            if (await customerLink.isVisible()) {
-                const [newPage] = await Promise.all([
-                    page.context().waitForEvent('page'),
-                    customerLink.click()
-                ]);
+            await test.step(`Check customer link: ${customerLinkURL}`, async () => {
+                if (await customerLink.isVisible()) {
+                    await customerLink.scrollIntoViewIfNeeded();
 
-                await newPage.waitForLoadState();
+                    const [newPage] = await Promise.all([
+                        page.context().waitForEvent('page'),
+                        customerLink.click()
+                    ]);
 
-                const originalDomain = new URL(customerLinkURL).hostname;
-                const finalDomain = new URL(newPage.url()).hostname;
+                    try {
+                        await newPage.waitForLoadState('domcontentloaded', { timeout: 10000 });
+                    } catch (error) {
+                        throw new Error(`Failed to load customer link: ${customerLinkURL}\n${error.message}`);
+                    }
 
-                if (originalDomain === finalDomain) {
-                    expect(newPage.url()).toContain(customerLinkURL);
-                }
+                    const originalDomain = new URL(customerLinkURL).hostname;
+                    const finalDomain = new URL(newPage.url()).hostname;
+
+                    if (originalDomain === finalDomain) {
+                        expect(newPage.url()).toContain(customerLinkURL);
+                    }
 
-                await newPage.close();
-            }
+                    await newPage.close();
+                }
+            });
         }
     });
 
diff --git a/test/e2e/teach/courses.spec.ts b/test/e2e/teach/courses.spec.ts
index a3612181737..c59d1f1fa03 100644
--- a/test/e2e/teach/courses.spec.ts
+++ b/test/e2e/teach/courses.spec.ts
@@ -1,14 +1,12 @@
 import { expect, test } from '@playwright/test';
 import { CoursesPage } from '../../page/teach/courses-page';
-import { closeExternalBanners } from '../utils';
 import { testSelector } from '../../utils';
 import { checkTeachCta, checkTeachMap, checkTeachNav } from './utils';
 
 test.describe('Courses page appearance and functionality', async () => {
-    test.beforeEach(async ({ page, context, baseURL }) => {
+    test.beforeEach(async ({ page }) => {
         const coursesPage = new CoursesPage(page);
         await coursesPage.init();
-        await closeExternalBanners(context, page, baseURL);
     });
 
     test('Should load the courses page correctly', async ({ page }) => {
@@ -31,8 +29,10 @@ test.describe('Courses page appearance and functionality', async () => {
     });
 
     test('Should have working tab navigation', async ({ page }) => {
+        const coursesPage = page.locator(testSelector('teach-courses'));
+
         // Check if the tab list is visible
-        const tabList = page.locator(testSelector('tab-list'));
+        const tabList = coursesPage.locator(testSelector('tab-list'));
         await expect(tabList).toBeVisible();
 
         // Check if both tabs are present
@@ -46,7 +46,7 @@ test.describe('Courses page appearance and functionality', async () => {
         await expect(mapViewTab).toHaveAttribute('data-test', 'tab');
 
         // CoursesList should be visible in the table view
-        await expect(page.locator('.ktl-courses-list')).toBeVisible();
+        await expect(page.locator(testSelector('courses'))).toBeVisible();
 
         // Switch to the map view
         await mapViewTab.click();
@@ -56,7 +56,7 @@ test.describe('Courses page appearance and functionality', async () => {
         await expect(mapViewTab).toHaveAttribute('data-test', 'tab tab-selected');
 
         // TeachMap should be visible in the map view
-        await expect(page.locator('.teach-map .gm-style')).toBeVisible();
+        await expect(page.locator(`${testSelector('teach-map')} .gm-style`)).toBeVisible();
 
         // Switch back to the table view
         await tableViewTab.click();
@@ -66,7 +66,7 @@ test.describe('Courses page appearance and functionality', async () => {
         await expect(mapViewTab).toHaveAttribute('data-test', 'tab');
 
         // CoursesList should be visible again
-        await expect(page.locator('.ktl-courses-list')).toBeVisible();
+        await expect(page.locator(testSelector('courses'))).toBeVisible();
     });
 
     test('Should display university list in table view', async ({ page }) => {
@@ -75,20 +75,21 @@ test.describe('Courses page appearance and functionality', async () => {
         await tableViewTab.click();
 
         // Check if the course list is visible
-        const coursesList = page.locator('.ktl-courses-list');
+        const coursesList = page.locator(testSelector('courses'));
         await expect(coursesList).toBeVisible();
 
         // Check and verify the headers of the course list
-        const headers = coursesList.locator('.ktl-courses-list-header .ktl-courses-list-cell');
+        const headers = coursesList.locator(testSelector('courses-header')).locator('> div');
+
         expect(await headers.count()).toBe(3);
         expect(await headers.nth(0).textContent()).toBe('University title');
         expect(await headers.nth(1).textContent()).toBe('Location');
         expect(await headers.nth(2).textContent()).toBe('Teaching Kotlin');
 
         // Check if there are universities in the list
-        const universities = coursesList.locator('.ktl-courses-list__item');
+        const universities = coursesList.locator(testSelector('courses-item'));
         expect(await universities.count()).toBeGreaterThan(0);
-        expect(await universities.first().locator('.ktl-courses-list-cell').count())
+        expect(await universities.first().locator('> div').count())
             .toBe(3);
     });
 
@@ -98,7 +99,7 @@ test.describe('Courses page appearance and functionality', async () => {
         await mapViewTab.click();
 
         // Check if the map is visible
-        const map = page.locator('.teach-map');
+        const map = page.locator(testSelector('teach-map'));
         await checkTeachMap(page, map);
     });
 
diff --git a/test/e2e/teach/education.spec.ts b/test/e2e/teach/education.spec.ts
index fa1fe172bae..c5bee7e9e43 100644
--- a/test/e2e/teach/education.spec.ts
+++ b/test/e2e/teach/education.spec.ts
@@ -1,14 +1,12 @@
 import { expect, test } from '@playwright/test';
 import { TeachPage } from '../../page/teach/education';
-import { closeExternalBanners } from '../utils';
-import { testSelector } from '../../utils';
+import { checkScreenshot, testSelector } from '../../utils';
 import { checkTeachCta, checkTeachMap, checkTeachNav, MAILTO_LINK, MATERIALS_LINK, SIGNUP_LINK } from './utils';
 
 test.describe('Education landing page content and interactions', async () => {
-    test.beforeEach(async ({ context, page, baseURL }) => {
+    test.beforeEach(async ({ page }) => {
         const teachPage = new TeachPage(page);
         await teachPage.init();
-        await closeExternalBanners(context, page, baseURL);
     });
 
     test('Should load the education page correctly', async ({ page }) => {
@@ -31,39 +29,39 @@ test.describe('Education landing page content and interactions', async () => {
     });
 
     test('Should display course materials download button', async ({ page }) => {
-        const block = page.locator('.teach-launch-course__text');
+        const block = page.locator(testSelector('teach-launch-course'));
 
         // Locate and verify the download button with the exact name match
         const button = block.getByRole('link', { name: 'Download all materials →', exact: true });
         await expect(button).toBeVisible();
         await expect(button).toHaveAttribute('href', MATERIALS_LINK);
 
-        expect(await block.screenshot()).toMatchSnapshot('launch-course-text.png');
+        await checkScreenshot(block);
     });
 
     test('Should display features section with features', async ({ page }) => {
         // Check if the features section is visible
-        const featuresSection = page.locator('.teach-features');
+        const featuresSection = page.locator(testSelector('teach-features'));
         await expect(featuresSection).toBeVisible();
 
         // Check if there are exactly 3 features
         const expectedFeatures = ['Academically recognized', 'Language of the industry', 'Multiplatform'];
-        const features = featuresSection.locator('.teach-feature');
+        const features = featuresSection.locator(testSelector('teach-feature'));
         expect(await features.count()).toBe(3);
 
         // Check each feature
         for (let i = 0; i < expectedFeatures.length; i++) {
             const feature = features.nth(i);
-            await expect(feature.locator('.teach-feature__icon img')).toBeVisible();
-            expect(await feature.locator('.ktl-h3').textContent()).toBe(expectedFeatures[i]);
+            await expect(feature.locator('img')).toBeVisible();
+            await expect(feature.getByText(expectedFeatures[i], { exact: true })).toBeVisible();
         }
 
-        expect(await featuresSection.screenshot()).toMatchSnapshot('teach-features.png');
+        await checkScreenshot(featuresSection);
     });
 
     test('Should display buttons in top section', async ({ page }) => {
         // Get the top buttons block container
-        const block = page.locator('.teach-top-buttons');
+        const block = page.locator(testSelector('teach-top-buttons'));
 
         // Check the "Join Educators Community" button visibility and link
         const join = block.getByRole('link', { name: 'Join Educators Community', exact: true });
@@ -73,22 +71,22 @@ test.describe('Education landing page content and interactions', async () => {
         // Check the "Why Teach Kotlin" button visibility and link
         const why = block.getByRole('link', { name: 'Why Teach Kotlin →', exact: true });
         await expect(why).toBeVisible();
-        await expect(why).toHaveAttribute('href', 'why-teach-kotlin.html');
+        await expect(why).toHaveAttribute('href', '/education/why-teach-kotlin/');
 
-        expect(await block.screenshot()).toMatchSnapshot('teach-top-mobile-buttons.png');
+        await checkScreenshot(block);
     });
 
     test('Should display university statistics correctly', async ({ page }) => {
         // Check if the university count is displayed
-        const universitiesText = page.locator('.universities-top__title h2');
+        const universitiesText = page.locator('#kotlin-courses-around-the-world h2:visible');
         expect(await universitiesText.textContent()).toBe('Kotlin Courses Around the World');
 
         // Check if the TeachNumbers component is visible
-        const teachNumbers = page.locator('.universities-top__numbers');
+        const teachNumbers = page.locator(testSelector('universities-numbers'));
         await expect(teachNumbers).toBeVisible();
 
         // Check if the TeachNumbers component is visible
-        const subtitles = teachNumbers.locator('.teach-number__subtitle');
+        const subtitles = teachNumbers.locator(testSelector('teach-number-subtitle'));
         expect(await subtitles.count()).toBe(2);
         expect(await subtitles.nth(0).textContent()).toBe('countries');
         expect(await subtitles.nth(1).textContent()).toBe('universities');
@@ -96,7 +94,7 @@ test.describe('Education landing page content and interactions', async () => {
 
     test('Should display university logos', async ({ page }) => {
         // Check if the university logos are visible
-        const logos = page.locator('.teach-logos__logo');
+        const logos = page.locator(testSelector('teach-logo'));
         expect(await logos.count()).toBe(5);
 
         // Check specific universities
@@ -106,17 +104,17 @@ test.describe('Education landing page content and interactions', async () => {
         await expect(page.locator('img[alt="Imperial College London"]')).toBeVisible();
         await expect(page.locator('img[alt="The University of Chicago"]')).toBeVisible();
 
-        expect(await page.locator('.teach-logos').screenshot()).toMatchSnapshot('teach-logos.png');
+        await checkScreenshot(page.locator(testSelector('teach-logos')));
     });
 
     test('Should have a working interactive map', async ({ page }) => {
         // Check if the map is visible
-        const map = page.locator('.teach-map__wrapper');
+        const map = page.locator(testSelector('teach-map'));
         await checkTeachMap(page, map);
     });
 
     test('Should display navigation buttons', async ({ page }) => {
-        const bottom = page.locator('.teach-universities__bottom');
+        const bottom = page.locator(testSelector('teach-universities-bottom'));
         await expect(bottom).toBeVisible();
 
         // Check if the mailto button is visible and working
@@ -127,7 +125,7 @@ test.describe('Education landing page content and interactions', async () => {
         // Check if the "All Universities" button is visible
         const allUniversitiesButton = bottom.getByRole('link', { name: 'All universities', exact: true });
         await expect(allUniversitiesButton).toBeVisible();
-        await expect(allUniversitiesButton).toHaveAttribute('href', 'courses.html');
+        await expect(allUniversitiesButton).toHaveAttribute('href', '/education/courses/');
     });
 
     test('Should have comprehensive resource links section', async ({ page }) => {
@@ -148,7 +146,7 @@ test.describe('Education landing page content and interactions', async () => {
         for (let i = 0; i < expectedTitles.length; i++) {
             const item = categoryHeadings.nth(i);
             await expect(item, `Category heading should be ${expectedTitles[i]}`).toHaveText(expectedTitles[i]);
-            const links = item.locator(':scope + .teach-list > li');
+            const links = item.locator(`:scope + ${testSelector('teach-list')} > li`);
             expect(await links.count(), `${expectedTitles[i]} category should have at least one link`).toBeGreaterThan(0);
         }
     });
@@ -175,27 +173,27 @@ test.describe('Education landing page content and interactions', async () => {
         });
 
         // Locate the subscription form
-        const subscriptionForm = page.locator('.teach-subscription-section');
+        const subscriptionForm = page.locator(testSelector('subscription-form'));
         await expect(subscriptionForm).toBeVisible();
 
         // Find the form elements
         await subscriptionForm.locator('input[name="Email"]').fill(email);
 
         // Check the privacy checkbox by clicking its label
-        await subscriptionForm.locator('.teach-subscription-form__checkbox label').click();
+        await subscriptionForm.locator(testSelector('subscription-checkbox')).locator('label').click();
 
         // Submit the form
         await subscriptionForm.locator('button[type="submit"]').click();
 
         // Verify that the form shows the submitted state (check icon appears)
-        await expect(subscriptionForm.locator('.teach-subscription-form__submitted-icon')).toBeVisible();
+        await expect(subscriptionForm.locator(testSelector('subscription-submitted-icon'))).toBeVisible();
 
-        expect(await subscriptionForm.screenshot()).toMatchSnapshot('subscription-form.png');
+        await checkScreenshot(subscriptionForm);
     });
 
     test('Should have a working YouTube player', async ({ page }) => {
         // Check if the YouTube player container is visible
-        const youtubePlayer = page.locator('.teach-video');
+        const youtubePlayer = page.locator(testSelector('teach-video'));
         await expect(youtubePlayer).toBeVisible();
 
         // Check if the player is in "show video" mode
diff --git a/test/e2e/teach/utils.ts b/test/e2e/teach/utils.ts
index 8cb503f479a..ff68c70ab2a 100644
--- a/test/e2e/teach/utils.ts
+++ b/test/e2e/teach/utils.ts
@@ -1,4 +1,5 @@
 import { expect, Locator, Page } from '@playwright/test';
+import { checkScreenshot, testSelector } from '../../utils';
 
 export const MAILTO_LINK = 'mailto:education@kotlinlang.org' as const;
 export const SIGNUP_LINK = 'https://surveys.jetbrains.com/s3/kotlin-slack-signup-educators' as const;
@@ -6,12 +7,12 @@ export const MATERIALS_LINK = 'https://drive.google.com/drive/folders/1nN3LuyEfm
 
 const NAV_LINKS = [
     ['Overview', '/education/'],
-    ['Why Teach Kotlin', '/education/why-teach-kotlin.html'],
-    ['List of Courses', '/education/courses.html']
+    ['Why Teach Kotlin', '/education/why-teach-kotlin/'],
+    ['List of Courses', '/education/courses/']
 ] as const;
 
 export async function checkTeachNav(page: Page, selected: typeof NAV_LINKS[number][0]) {
-    const navBar = page.locator('.teach-sticky-menu');
+    const navBar = page.getByTestId('top-menu');
 
     // Check section title to root of nav
     const sectionLink = navBar.getByRole('link', { name: 'Teach', exact: true });
@@ -37,7 +38,7 @@ export async function checkTeachNav(page: Page, selected: typeof NAV_LINKS[numbe
         await expect(subLink).toHaveAttribute('href', link);
     }
 
-    expect(await navBar.screenshot()).toMatchSnapshot('sticky-menu.png');
+    await checkScreenshot(navBar);
 }
 
 export async function checkTeachMap(page: Page, map: Locator) {
@@ -48,12 +49,12 @@ export async function checkTeachMap(page: Page, map: Locator) {
     await page.waitForFunction(() => window['google'] && window['google']['maps']);
 
     // The map should have markers
-    const markers = page.locator('.teach-map-marker');
+    const markers = page.locator(testSelector('teach-map-marker'));
     expect(await markers.count()).toBeGreaterThan(100);
 
     // Wait for the Google Maps Markers to attach
     await page.waitForFunction(() => {
-        const markers = document.querySelectorAll('.teach-map-marker');
+        const markers = document.querySelectorAll('[data-test="teach-map-marker"]');
         return markers.length > 100 &&
             Array.from(markers).every(marker =>
                 marker['offsetHeight'] > 0 && marker['offsetWidth'] > 0
@@ -63,7 +64,7 @@ export async function checkTeachMap(page: Page, map: Locator) {
     // Check if at least one marker is visible
     let marker = markers.last();
     await expect(marker).toBeVisible();
-    await expect(marker).not.toHaveClass('teach-map-marker teach-map-marker_active');
+    await expect(marker).not.toHaveClass(/active/);
 
     await marker.scrollIntoViewIfNeeded();
 
@@ -74,17 +75,17 @@ export async function checkTeachMap(page: Page, map: Locator) {
     await page.waitForTimeout(100);
     await page.mouse.up();
 
-    await expect(marker).toHaveClass('teach-map-marker teach-map-marker_active');
+    await expect(marker).toHaveClass(/active/);
 
-    const tooltip = marker.locator('.teach-map-tooltip');
+    const tooltip = marker.locator(testSelector('teach-map-tooltip'));
     await expect(tooltip).toBeVisible();
 }
 
 export async function checkTeachCta({ page }) {
     // Get the CTA wrapper element from the page
-    const connectUs = page.locator('section [class*=ktl-cta-block-module_wrapper_]');
+    const connectUs = page.locator('.cta-block');
 
-    // Check if the "Connect with us" heading is visible
+    // Check if the "Connect with us" title is visible
     const title = connectUs.getByRole('heading', { name: 'Connect with us', exact: true });
     await expect(title).toBeVisible();
 
@@ -98,5 +99,5 @@ export async function checkTeachCta({ page }) {
     await expect(eduLink).toBeVisible();
     await expect(eduLink).toHaveAttribute('href', MAILTO_LINK);
 
-    expect(await connectUs.screenshot()).toMatchSnapshot('connect-us.png');
+    await checkScreenshot(connectUs);
 }
diff --git a/test/e2e/teach/why.spec.ts b/test/e2e/teach/why.spec.ts
index 58b0e74c36c..2c002d67fb9 100644
--- a/test/e2e/teach/why.spec.ts
+++ b/test/e2e/teach/why.spec.ts
@@ -1,6 +1,5 @@
 import { expect, test } from '@playwright/test';
 import { WhyTeachPage } from '../../page/teach/why-page';
-import { closeExternalBanners } from '../utils';
 import { checkTeachCta, checkTeachNav } from './utils';
 import { testSelector } from '../../utils';
 
@@ -21,10 +20,9 @@ function toId(label: typeof LIST_OF_SECTION[number][0]) {
 }
 
 test.describe('Why Teach Kotlin page appearance and functionality', async () => {
-    test.beforeEach(async ({ page, context, baseURL }) => {
+    test.beforeEach(async ({ page }) => {
         const whyTeachPage = new WhyTeachPage(page);
         await whyTeachPage.init();
-        await closeExternalBanners(context, page, baseURL);
     });
 
     test('Should load the Why Teach Kotlin page correctly', async ({ page }) => {
@@ -46,11 +44,11 @@ test.describe('Why Teach Kotlin page appearance and functionality', async () =>
 
     test('Should display all sections with quotes correctly', async ({ page }) => {
         // Check if the navigation menu is visible
-        const content = page.locator('.why-teach-grid__content');
+        const content = page.locator(testSelector('teach-why-teach-page'));
         await expect(content).toBeVisible();
 
         // Check if all navigation items are present
-        const sections = content.locator(':scope > section');
+        const sections = content.locator('section');
         expect(await sections.count()).toBe(7);
 
         // Check specific navigation items
@@ -96,27 +94,27 @@ test.describe('Why Teach Kotlin page appearance and functionality', async () =>
     });
 
     test('Check the "Academically recognized" section', async ({ page }) => {
-        await expect(page.locator('#academically-recognized .quote-section__content')).toContainText('We know of over 300 universities');
+        await expect(page.locator(`#academically-recognized ${testSelector('quote-content')}`)).toContainText('We know of over 300 universities');
 
-        const academicallyRecognizedInfo = page.locator('#academically-recognized .quote-section__info');
+        const academicallyRecognizedInfo = page.locator(`#academically-recognized ${testSelector('quote-info')}`);
 
         const statNumber = academicallyRecognizedInfo.locator('.ktl-hero');
         await expect(statNumber).toBeVisible();
         expect(await statNumber.textContent()).toBe('32');
 
-        const description = academicallyRecognizedInfo.locator('.ktl-dimmed-text');
+        const description = academicallyRecognizedInfo.locator('p:not(.ktl-hero)');
         await expect(description).toBeVisible();
         expect(await description.textContent()).toContain('top 100 universities');
 
-        const link = academicallyRecognizedInfo.locator('a[href="courses.html"]');
+        const link = academicallyRecognizedInfo.locator('a[href^="/education/courses/"]');
         await expect(link).toBeVisible();
-        expect(await link.textContent()).toBe('List of universities ↗');
+        expect(await link.textContent()).toBe('List of universities');
     });
 
     test('Check the "Language of the industry" section', async ({ page }) => {
         // Check list items in the "Language of the industry" section
         const industrySection = page.locator('#language-of-the-industry');
-        const listItems = industrySection.locator('.quote-section__content ul.rs-ul > li');
+        const listItems = industrySection.locator(`${testSelector('quote-content')} ul > li`);
 
         // Verify there are multiple list items
         expect(await listItems.count()).toBe(4);
@@ -127,62 +125,63 @@ test.describe('Why Teach Kotlin page appearance and functionality', async () =>
         await expect(listItems.nth(2)).toContainText('One out of every two developers');
         await expect(listItems.nth(3)).toContainText('In 2020, Kotlin became the 2nd most popular language');
 
-        const industrySectionInfo = industrySection.locator('.quote-section__info');
+        const industrySectionInfo = industrySection.locator(testSelector('quote-info'));
 
-        const description = industrySectionInfo.locator('.ktl-dimmed-text');
+
+        const description = industrySectionInfo.locator('p:not(.ktl-hero)');
         await expect(description).toBeVisible();
         await expect(description).toContainText('Kotlin has consistently ranked');
 
-        const link = industrySectionInfo.locator('a[href="https://hired.com/state-of-software-engineers/2023/" ]');
+        const link = industrySectionInfo.locator('a[href^="https://hired.com/state-of-software-engineers/2023/" ]');
         await expect(link).toBeVisible();
-        expect(await link.textContent()).toBe('Hired’s 2023 State of Software Engineers ↗');
+        expect(await link.textContent()).toContain("Hired's 2023 State of Software Engineers");
     });
 
     test('Check the "Multiplatform" section', async ({ page }) => {
         const multiplatformSection = page.locator('#multiplatform');
-        await expect(multiplatformSection.locator('.quote-section__content')).toContainText('Kotlin is a top choice for teaching Android development');
+        await expect(multiplatformSection.locator(testSelector('quote-content'))).toContainText('Kotlin is a top choice for teaching Android development');
 
-        const multiplatformSectionInfo = multiplatformSection.locator('.quote-section__info');
+        const multiplatformSectionInfo = multiplatformSection.locator(testSelector('quote-info'));
 
-        const description = multiplatformSectionInfo.locator('.ktl-dimmed-text');
+        const description = multiplatformSectionInfo.locator('p:not(.ktl-hero)');
         await expect(description).toBeVisible();
         await expect(description).toContainText('Compose Multiplatform frameworks from JetBrains');
 
-        const link = multiplatformSectionInfo.locator('a[href="https://developers.googleblog.com/2023/05/bringing-kotlin-to-web.html"]');
+        const link = multiplatformSectionInfo.locator('a[href^="https://developers.googleblog.com/2023/05/bringing-kotlin-to-web.html"]');
         await expect(link).toBeVisible();
-        expect(await link.textContent()).toBe('Google for Developers blog, 2023 ↗');
+        expect(await link.textContent()).toContain("Google for Developers blog, 2023");
     });
 
     test('Check the "Interoperable" section', async ({ page }) => {
         const interoperableSection = page.locator('#interoperable');
-        await expect(interoperableSection.locator('.quote-section__content')).toContainText('Seamless interoperability with the JVM ecosystem');
+        await expect(interoperableSection.locator(testSelector('quote-content'))).toContainText('Seamless interoperability with the JVM ecosystem');
 
-        const interoperableSectionInfo = interoperableSection.locator('.quote-section__info');
+        const interoperableSectionInfo = interoperableSection.locator(testSelector('quote-info'));
 
-        const description = interoperableSectionInfo.locator('.ktl-dimmed-text');
+        const description = interoperableSectionInfo.locator('p:not(.ktl-hero)');
         await expect(description).toBeVisible();
         await expect(description).toContainText('Kotlin can also be compiled into');
 
-        const link1 = interoperableSectionInfo.locator('a[href="https://kotlinlang.org/docs/mixing-java-kotlin-intellij.html#convert-java-files-to-kotlin"]');
+        const link1 = interoperableSectionInfo.locator('a[href^="https://kotlinlang.org/docs/mixing-java-kotlin-intellij.html#convert-java-files-to-kotlin"]');
         await expect(link1).toBeVisible();
-        expect(await link1.textContent()).toBe('Java-to-Kotlin converter ↗');
+        expect(await link1.textContent()).toBe('Java-to-Kotlin converter');
 
-        const link2 = interoperableSectionInfo.locator('a[href="https://kotlinlang.org/docs/jvm-get-started.html"]');
+        const link2 = interoperableSectionInfo.locator('a[href^="https://kotlinlang.org/docs/jvm-get-started.html"]');
         await expect(link2).toBeVisible();
-        expect(await link2.textContent()).toBe('Kotlin/JVM ↗');
+        expect(await link2.textContent()).toBe('Kotlin/JVM');
 
-        const link3 = interoperableSectionInfo.locator('a[href="https://kotlinlang.org/docs/native-get-started.html"]');
+        const link3 = interoperableSectionInfo.locator('a[href^="https://kotlinlang.org/docs/native-get-started.html"]');
         await expect(link3).toBeVisible();
-        expect(await link3.textContent()).toBe('Kotlin/Native ↗');
+        expect(await link3.textContent()).toBe('Kotlin/Native');
     });
 
     test('Check the "Supports multiple paradigms" section', async ({ page }) => {
         const paradigmsSection = page.locator('#supports-multiple-paradigms');
-        await expect(paradigmsSection.locator('.quote-section__content')).toContainText('Kotlin combines all the major programming paradigms');
+        await expect(paradigmsSection.locator(testSelector('quote-content'))).toContainText('Kotlin combines all the major programming paradigms');
 
-        const paradigmsSectionInfo = paradigmsSection.locator('.quote-section__info');
+        const paradigmsSectionInfo = paradigmsSection.locator(testSelector('quote-info'));
 
-        const description = paradigmsSectionInfo.locator('.ktl-dimmed-text');
+        const description = paradigmsSectionInfo.locator('p:not(.ktl-hero)');
         await expect(description).toBeVisible();
         await expect(description).toContainText('Kotlin supports functional, imperative');
 
@@ -192,18 +191,18 @@ test.describe('Why Teach Kotlin page appearance and functionality', async () =>
 
     test('Check the "Modern, concise, and safe" section', async ({ page }) => {
         const modernSection = page.locator('#modern-concise-and-safe');
-        await expect(modernSection.locator('.quote-section__content')).toContainText('Kotlin allows students to focus on expressing their ideas');
+        await expect(modernSection.locator(testSelector('quote-content'))).toContainText('Kotlin allows students to focus on expressing their ideas');
 
-        const modernSectionInfo = modernSection.locator('.quote-section__info');
+        const modernSectionInfo = modernSection.locator(testSelector('quote-info'));
 
-        const description = modernSectionInfo.locator('.ktl-dimmed-text');
+        const description = modernSectionInfo.locator('p:not(.ktl-hero)');
         expect(await description.count()).toBe(2);
 
-        await expect(description.nth(0)).toBeVisible();
-        await expect(description.nth(0)).toContainText('Type safety, null safety, and expressive');
+        await expect(description.first()).toBeVisible();
+        await expect(description.first()).toContainText('Type safety, null safety, and expressive');
 
-        await expect(description.nth(1)).toBeVisible();
-        await expect(description.nth(1)).toContainText('Source: an internal study on teaching Kotlin');
+        await expect(description.last()).toBeVisible();
+        await expect(description.last()).toContainText('Source: an internal study on teaching Kotlin');
 
         const link = modernSectionInfo.locator('a[href]');
         await expect(link).not.toBeVisible();
@@ -212,32 +211,32 @@ test.describe('Why Teach Kotlin page appearance and functionality', async () =>
     test('Check the "Tooling" section', async ({ page }) => {
         // Check content in the "Tooling" section
         const toolingSection = page.locator('#tooling');
-        await expect(toolingSection.locator('.quote-section__content')).toContainText('Many of the top professional tools are packaged with the language');
+        await expect(toolingSection.locator(testSelector('quote-content'))).toContainText('Many of the top professional tools are packaged with the language');
 
-        const toolingSectionInfo = toolingSection.locator('.quote-section__info');
+        const toolingSectionInfo = toolingSection.locator(testSelector('quote-info'));
 
-        const description = toolingSectionInfo.locator('.ktl-dimmed-text');
+        const description = toolingSectionInfo.locator('p:not(.ktl-hero)');
         await expect(description).not.toBeVisible();
 
-        const link1 = toolingSectionInfo.locator('a[href="https://www.jetbrains.com/community/education/#students"]');
+        const link1 = toolingSectionInfo.locator('a[href^="https://www.jetbrains.com/community/education/#students"]');
         await expect(link1).toBeVisible();
-        expect(await link1.textContent()).toBe('Free IntelliJ IDEA Ultimate license ↗');
+        expect(await link1.textContent()).toBe('Free IntelliJ IDEA Ultimate license');
 
-        const link2 = toolingSectionInfo.locator('a[href="https://play.kotlinlang.org/"]');
+        const link2 = toolingSectionInfo.locator('a[href^="https://play.kotlinlang.org/"]');
         await expect(link2).toBeVisible();
-        expect(await link2.textContent()).toBe('Playground ↗');
+        expect(await link2.textContent()).toBe('Playground');
 
-        const link3 = toolingSectionInfo.locator('a[href="https://plugins.jetbrains.com/plugin/10081-jetbrains-academy"]');
+        const link3 = toolingSectionInfo.locator('a[href^="https://plugins.jetbrains.com/plugin/10081-jetbrains-academy"]');
         await expect(link3).toBeVisible();
-        expect(await link3.textContent()).toBe('JetBrains Academy plugin ↗');
+        expect(await link3.textContent()).toBe('JetBrains Academy plugin');
 
-        const link4 = toolingSectionInfo.locator('a[href="https://www.jetbrains.com/code-with-me/"]');
+        const link4 = toolingSectionInfo.locator('a[href^="https://www.jetbrains.com/code-with-me/"]');
         await expect(link4).toBeVisible();
-        expect(await link4.textContent()).toBe('Code With Me ↗');
+        expect(await link4.textContent()).toBe('Code With Me');
 
-        const link5 = toolingSectionInfo.locator('a[href="https://hyperskill.org/tracks?category=4&utm_source=jbkotlin_hs&utm_medium=referral&utm_campaign=kotlinlang-education&utm_content=button_1&utm_term=22.03.23&"]');
+        const link5 = toolingSectionInfo.locator('a[href^="https://hyperskill.org/tracks?category=4&utm_source=jbkotlin_hs&utm_medium=referral&utm_campaign=kotlinlang-education&utm_content=button_1&utm_term=22.03.23"]');
         await expect(link5).toBeVisible();
-        expect(await link5.textContent()).toBe('Kotlin tracks by JetBrains Academy ↗');
+        expect(await link5.textContent()).toBe('Kotlin tracks by JetBrains Academy');
     });
 
     test('Should have action buttons for educators', checkTeachCta);
diff --git a/test/e2e/utils.ts b/test/e2e/utils.ts
deleted file mode 100644
index ac5b2c738de..00000000000
--- a/test/e2e/utils.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import { BrowserContext, ElementHandle, expect, Page, test } from '@playwright/test';
-import { closeCookiesConsentBanner, isSkipScreenshot } from '../utils';
-import { PageAssertionsToHaveScreenshotOptions } from 'playwright/types/test';
-
-export async function getElementScreenshotWithPadding(page: Page, element: ElementHandle, padding: number): Promise<Buffer | undefined> {
-    await element.scrollIntoViewIfNeeded();
-    const box = await element.boundingBox();
-
-    if (box !== null) {
-        return await page.screenshot({
-            clip: {
-                x: box.x - padding,
-                y: box.y - padding,
-                width: box.width + padding * 2,
-                height: box.height + padding * 2
-            }
-        });
-    }
-}
-
-export async function closeExternalBanners(context: BrowserContext, page: Page, baseUrl: string) {
-    if (baseUrl.startsWith('https://kotlinlang.org/')) {
-        await closeCookiesConsentBanner(context, baseUrl);
-    } else {
-        await page.frameLocator('#webpack-dev-server-client-overlay')
-            .locator('[aria-label="Dismiss"]')
-            .click();
-    }
-}
-
-export function pageWrapperMask(page: Page) {
-    return [
-        page.locator('header[data-test="header"]'),
-        page.locator('footer'),
-        page.locator('video[autoplay]')
-    ];
-}
-
-export async function checkFullPageScreenshot(page: Page, options?: PageAssertionsToHaveScreenshotOptions) {
-    test.skip(isSkipScreenshot, 'Skipping screenshot testing');
-
-    await page.locator('img[loading=lazy]').evaluate((img: HTMLImageElement) => {
-        img.loading = 'eager';
-        img.decoding = 'sync';
-    });
-
-    await page.waitForLoadState('networkidle');
-    await page.evaluate(() => window.scrollTo(0, 0));
-
-    await expect(page).toHaveScreenshot({
-        caret: 'hide',
-        animations: 'disabled',
-        fullPage: true,
-        ...options,
-        mask: [
-            ...pageWrapperMask(page),
-            ...(options.mask || [])
-        ]
-    });
-}
diff --git a/test/e2e/webhelp.spec.ts b/test/e2e/webhelp.spec.ts
index 3919d2b1e27..4be7acc3ce5 100644
--- a/test/e2e/webhelp.spec.ts
+++ b/test/e2e/webhelp.spec.ts
@@ -1,5 +1,5 @@
 import { expect, test } from '@playwright/test';
-import { testSelector } from '../utils';
+import { getElementScreenshotWithPadding, skipProduction, testSelector } from '../utils';
 import { WebHelpPage } from '../page/webhelp-page';
 import {
     ELEMENT_PADDING_OFFSET,
@@ -7,10 +7,11 @@ import {
     MICRO_ANIMATION_TIMEOUT_LONG,
     RESOLUTIONS
 } from './visual-constants';
-import { getElementScreenshotWithPadding } from './utils';
 import os from 'os';
 
 test.describe('WebHelp page appearance', async () => {
+    skipProduction();
+
     test.beforeEach(async ({ page }) => {
         const webHelpPage = new WebHelpPage(page, '/docs/test-page.html');
         await webHelpPage.init();
diff --git a/test/global-setup.ts b/test/global-setup.ts
new file mode 100644
index 00000000000..fd53fd4d6e0
--- /dev/null
+++ b/test/global-setup.ts
@@ -0,0 +1,56 @@
+import { join } from 'node:path';
+import { writeFile } from 'node:fs/promises';
+import { chromium, FullConfig } from '@playwright/test';
+import { isProduction } from './utils';
+
+export default async function globalSetup(config: FullConfig) {
+    const storageStatePath = join(__dirname, 'storage-state.json');
+    await writeFile(storageStatePath, '{}', 'utf-8');
+
+    const project = config.projects[0];
+    console.log(`[Global Setup] Processing project ${project.name}`);
+    const baseURL = project.use?.baseURL;
+
+    if (isProduction(baseURL)) {
+        await closeProductionElements(baseURL, storageStatePath);
+    }
+}
+
+async function closeProductionElements(baseURL: string, storageStatePath: string) {
+    console.log(`[Global Setup] Starting cookie banner setup for ${baseURL}`);
+
+    const browser = await chromium.launch();
+    const context = await browser.newContext();
+    const page = await context.newPage();
+
+    try {
+        await page.goto(baseURL, { waitUntil: 'domcontentloaded' });
+
+        try {
+            const acceptButton = page.getByRole('button', { name: 'Accept All' });
+            await acceptButton.waitFor({ state: 'visible', timeout: 5000 });
+            await acceptButton.click();
+
+            await page.waitForTimeout(1000);
+        } catch (error) {
+            console.log('[Global Setup] Cookie banner not found - continuing');
+        }
+
+        const closeBanner = page.locator('#optly-banner_close');
+
+        if (await closeBanner.count() > 0) {
+            console.log('[Global Setup] Closing "purple" banner');
+            await closeBanner.click();
+            await page.waitForSelector('#optly-banner_close', { state: 'hidden' });
+        }
+
+        await context.storageState({ path: storageStatePath });
+        console.log(`[Global Setup] Storage state saved to ${storageStatePath}`);
+    } catch (error) {
+        console.error('[Global Setup] Error during setup:', error);
+        throw error;
+    } finally {
+        await context.close();
+        await browser.close();
+    }
+}
diff --git a/test/page/teach/courses-page.ts b/test/page/teach/courses-page.ts
index dc4d3dbe39f..45095913229 100644
--- a/test/page/teach/courses-page.ts
+++ b/test/page/teach/courses-page.ts
@@ -13,7 +13,7 @@ export class CoursesPage implements PageWithGlobalSearch {
     }
 
     async init() {
-        await this.page.goto('/education/courses.html');
+        await this.page.goto('/education/courses/');
 
         // Wait for the page to load
         await this.page.waitForSelector(testSelector('teach-courses'));
diff --git a/test/page/teach/why-page.ts b/test/page/teach/why-page.ts
index 432924b96dd..229a9ee6d98 100644
--- a/test/page/teach/why-page.ts
+++ b/test/page/teach/why-page.ts
@@ -13,7 +13,7 @@ export class WhyTeachPage implements PageWithGlobalSearch {
     }
 
     async init() {
-        await this.page.goto('/education/why-teach-kotlin.html');
+        await this.page.goto('/education/why-teach-kotlin/');
 
         // Wait for the page to load
         await this.page.waitForSelector(testSelector('teach-why-teach-page'));
diff --git a/test/production/api-navigation.spec.ts b/test/production/api-navigation.spec.ts
index 814776ca94c..5893b5afd92 100644
--- a/test/production/api-navigation.spec.ts
+++ b/test/production/api-navigation.spec.ts
@@ -3,8 +3,6 @@ import { expect, Page, test } from '@playwright/test';
 test.describe('Api navigation', () => {
     test.beforeEach(async ({ page }) => {
         await page.goto('/');
-        await page.waitForSelector('button.ch2-btn.ch2-btn-primary');
-        await page.click('button.ch2-btn.ch2-btn-primary');
         const navbar = page.locator('[data-test="header"]');
         const apiButton = navbar.getByText('API', { exact: true });
         await expect(apiButton).toBeVisible();
diff --git a/test/production/community-kotlin-user-groups.spec.ts b/test/production/community-kotlin-user-groups.spec.ts
index 546454fcc97..6c90b966e11 100644
--- a/test/production/community-kotlin-user-groups.spec.ts
+++ b/test/production/community-kotlin-user-groups.spec.ts
@@ -3,8 +3,6 @@ import { test, expect } from '@playwright/test';
 test.describe('Community Kotlin User Groups page', () => {
         test.beforeEach(async ({ page }) => {
             await page.goto('/community/user-groups/');
-            await page.waitForSelector('button.ch2-btn.ch2-btn-primary');
-            await page.click('button.ch2-btn.ch2-btn-primary');
         });
 
         test('Overview in navbar opens the related page', async ({ page }) => {
diff --git a/test/production/community-overview-keep-in-touch-section.spec.ts b/test/production/community-overview-keep-in-touch-section.spec.ts
index 3afe47de229..25b4c8215a7 100644
--- a/test/production/community-overview-keep-in-touch-section.spec.ts
+++ b/test/production/community-overview-keep-in-touch-section.spec.ts
@@ -7,8 +7,6 @@ test.describe('Community page, overview tab, keep in touch section', () => {
     test.beforeEach(async ({ page }) => {
         communityPage = new CommunityPage(page);
         await communityPage.init();
-        await page.waitForSelector('button.ch2-btn.ch2-btn-primary');
-        await page.click('button.ch2-btn.ch2-btn-primary');
     });
 
     test('Slack button opens the related page', async ({ page, context }) => {
diff --git a/test/production/community-overview-rest-buttons.spec.ts b/test/production/community-overview-rest-buttons.spec.ts
index 9ad519d7952..4b8183e2efc 100644
--- a/test/production/community-overview-rest-buttons.spec.ts
+++ b/test/production/community-overview-rest-buttons.spec.ts
@@ -3,8 +3,6 @@ import { test, expect } from '@playwright/test';
 test.describe('Community page, overview tab, rest buttons', () => {
     test.beforeEach(async ({ page }) => {
         await page.goto('/community/');
-        await page.waitForSelector('button.ch2-btn.ch2-btn-primary');
-        await page.click('button.ch2-btn.ch2-btn-primary');
     });
 
     test('Kotlin User Groups in navbar opens the user-groups page', async ({ page }) => {
diff --git a/test/production/cookie-banner.spec.ts b/test/production/cookie-banner.spec.ts
new file mode 100644
index 00000000000..9f105325535
--- /dev/null
+++ b/test/production/cookie-banner.spec.ts
@@ -0,0 +1,29 @@
+import { expect, test as base } from '@playwright/test';
+import { skipNonProduction } from '../utils';
+
+skipNonProduction('Cookie banner only on production');
+
+const test = base.extend({
+    context: async function makeCleanContext({ browser }, use) {
+        const context = await browser.newContext({
+            storageState: undefined
+        });
+        await use(context);
+        await context.close();
+    }
+});
+
+test.describe('Cookie banner functionality', () => {
+    test('Cookie banner should be visible and closeable', async ({ page, baseURL }) => {
+        await page.goto(baseURL || '/');
+
+        const acceptButton = page.getByRole('button', { name: 'Accept All' });
+        await expect(acceptButton).toBeVisible({ timeout: 10000 });
+
+        await acceptButton.click();
+        await expect(acceptButton).toBeHidden({ timeout: 3000 });
+
+        const cookies = await page.context().cookies();
+        expect(cookies.length).toBeGreaterThan(0);
+    });
+});
diff --git a/test/production/footer-kotlin-ecosystem-buttons.spec.ts b/test/production/footer-kotlin-ecosystem-buttons.spec.ts
index 24a477662d0..975445a1d98 100644
--- a/test/production/footer-kotlin-ecosystem-buttons.spec.ts
+++ b/test/production/footer-kotlin-ecosystem-buttons.spec.ts
@@ -3,8 +3,6 @@ import { test, expect } from '@playwright/test';
 test.describe('Footer kotlin ecosystem buttons', () => {
     test.beforeEach(async ({ page }) => {
         await page.goto('/');
-        await page.waitForSelector('button.ch2-btn.ch2-btn-primary');
-        await page.click('button.ch2-btn.ch2-btn-primary');
         await page.evaluate(() => {
             window.scrollTo(0, document.body.scrollHeight);
         });
diff --git a/test/production/footer-social-media-buttons.spec.ts b/test/production/footer-social-media-buttons.spec.ts
index feae1d02c7f..ba83233bae3 100644
--- a/test/production/footer-social-media-buttons.spec.ts
+++ b/test/production/footer-social-media-buttons.spec.ts
@@ -3,8 +3,6 @@ import { test, expect } from '@playwright/test';
 test.describe('Footer social media buttons', () => {
     test.beforeEach(async ({ page }) => {
         await page.goto('/');
-        await page.waitForSelector('button.ch2-btn.ch2-btn-primary');
-        await page.click('button.ch2-btn.ch2-btn-primary');
         await page.evaluate(() => {
             window.scrollTo(0, document.body.scrollHeight);
         });
diff --git a/test/production/global-search.spec.ts b/test/production/global-search.spec.ts
index c2682cd4ea8..8e3cc4a55cf 100644
--- a/test/production/global-search.spec.ts
+++ b/test/production/global-search.spec.ts
@@ -2,8 +2,6 @@ import { Page, test } from '@playwright/test';
 
 import { IndexPage } from '../page/index-page';
 import { CommunityPage } from '../page/community-page';
-import { TeachPage } from '../page/teach/education';
-import { closeCookiesConsentBanner } from '../utils';
 
 const SEARCH_STRING = 'Community';
 
@@ -25,10 +23,6 @@ const pagesWithGlobalSearch = [
 test.describe.configure({ mode: 'parallel' });
 
 test.describe('Global Search Component', async () => {
-    test.beforeEach(async ({ context, baseURL }) => {
-        await closeCookiesConsentBanner(context, baseURL);
-    });
-
     for (const pageWithGlobalSearch of pagesWithGlobalSearch) {
 
         test(`Quick Search on ${pageWithGlobalSearch.name} Page`, async ({ page }) => {
diff --git a/test/production/grammar.spec.ts b/test/production/grammar.spec.ts
index cb962dc8c70..03b4b9969f4 100644
--- a/test/production/grammar.spec.ts
+++ b/test/production/grammar.spec.ts
@@ -1,12 +1,7 @@
 import { expect, test } from '@playwright/test';
-import { closeCookiesConsentBanner, isStaging } from '../utils';
 import { GrammarPage } from '../page/grammar-page';
 
 test.describe('Grammar page', () => {
-    test.beforeEach(async ({ context, baseURL }) => {
-        await closeCookiesConsentBanner(context, baseURL);
-    });
-
     test('Grammar page should be accessible', async ({ page }) => {
         const grammar = new GrammarPage(page);
         await grammar.init();
@@ -37,7 +32,7 @@ test.describe('Grammar page', () => {
         await expect(grammar.getDeclarationById('kotlinFile')).toBeInViewport();
     });
 
-    test('Should redirect from .html to clean URL', async ({ page, baseURL }) => {
+    test('Should redirect from .html to clean URL', async ({ page }) => {
         await page.goto('/docs/reference/grammar.html');
 
         // Should redirect to clean URL
diff --git a/test/production/landings.spec.ts b/test/production/landings.spec.ts
index 3877481470b..f251d8c5c5d 100644
--- a/test/production/landings.spec.ts
+++ b/test/production/landings.spec.ts
@@ -1,17 +1,13 @@
-import { test, expect } from '@playwright/test';
-import { closeCookiesConsentBanner, isStaging } from '../utils';
+import { expect, test } from '@playwright/test';
+import { skipProduction } from '../utils';
 
 test.describe.configure({ mode: 'parallel' });
 
 test.describe('/lp/ pages list', async () => {
-    test.beforeEach(async ({ context, baseURL }) => {
-        await closeCookiesConsentBanner(context, baseURL);
-    });
+    skipProduction('for host with reverse-proxy only');
 
     test(`Check /lp/multiplatform default redirects`, async ({ page, baseURL }) => {
-        test.skip(isStaging(baseURL), 'for host with reverse-proxy only');
-
-        const targetUrl = 'https://kotlinlang.org/multiplatform/';
+        const targetUrl = `${baseURL}/multiplatform/`;
 
         await page.goto('/lp/multiplatform');
         expect(page.url()).toEqual(targetUrl);
@@ -24,8 +20,7 @@ test.describe('/lp/ pages list', async () => {
     });
 
     test(`Check /lp/multiplatform case-studies redirect`, async ({ page, baseURL }) => {
-        test.skip(isStaging(baseURL), 'for host with reverse-proxy only');
-        const targetUrl = 'https://kotlinlang.org/case-studies/?type=multiplatform';
+        const targetUrl = `${baseURL}/case-studies/?type=multiplatform`;
 
         await page.goto('/lp/multiplatform/case-studies/');
         expect(page.url()).toEqual(targetUrl);
diff --git a/test/production/main-page-buttons.spec.ts b/test/production/main-page-buttons.spec.ts
index 90a0397016c..92cc6cf7312 100644
--- a/test/production/main-page-buttons.spec.ts
+++ b/test/production/main-page-buttons.spec.ts
@@ -4,8 +4,6 @@ import { testSelector } from '../utils';
 test.describe('Main page buttons', () => {
     test.beforeEach(async ({ page }) => {
         await page.goto('/');
-        await page.waitForSelector('button.ch2-btn.ch2-btn-primary');
-        await page.click('button.ch2-btn.ch2-btn-primary');
     });
 
     test('Hero section Get started button', async ({ page }) => {
@@ -49,7 +47,7 @@ test.describe('Main page buttons', () => {
         const multiplatformButton = page.getByTestId('highlighted-cases-section').getByRole('link', { name: 'Learn about Kotlin Multiplatform' });
         await expect(multiplatformButton).toBeVisible();
         await multiplatformButton.click();
-        await expect(page.url()).toContain('https://kotlinlang.org/multiplatform/');
+        expect(page.url()).toContain('/multiplatform/');
         const pageTitle = page.locator('h1').first();
         await expect(pageTitle).toContainText('Kotlin Multiplatform');
     });
diff --git a/test/production/play-tab.spec.ts b/test/production/play-tab.spec.ts
index e8913daf425..cc3b096ef20 100644
--- a/test/production/play-tab.spec.ts
+++ b/test/production/play-tab.spec.ts
@@ -3,8 +3,6 @@ import { test, expect } from '@playwright/test';
 test.describe('Play tab', () => {
     test.beforeEach(async ({ page }) => {
         await page.goto('/');
-        await page.waitForSelector('button.ch2-btn.ch2-btn-primary');
-        await page.click('button.ch2-btn.ch2-btn-primary');
         const navbar = page.locator('[data-test="header"]');
         const solutionsButton = navbar.getByText('Play').first();
         await expect(solutionsButton).toBeVisible();
diff --git a/test/production/solutions-tab.spec.ts b/test/production/solutions-tab.spec.ts
index 7ac1febf9e9..f19ca6ac9f0 100644
--- a/test/production/solutions-tab.spec.ts
+++ b/test/production/solutions-tab.spec.ts
@@ -4,8 +4,6 @@ import { testSelector } from '../utils';
 test.describe('Solutions tab', () => {
     test.beforeEach(async ({ page }) => {
         await page.goto('/');
-        await page.waitForSelector('button.ch2-btn.ch2-btn-primary');
-        await page.click('button.ch2-btn.ch2-btn-primary');
         const navbar = page.locator('[data-test="header"]');
         const solutionsButton = navbar.getByText('Solutions');
         await expect(solutionsButton).toBeVisible();
@@ -16,7 +14,7 @@ test.describe('Solutions tab', () => {
         const multiplatformButton = page.locator(testSelector("header")).getByText('Multiplatform').first();
         await expect(multiplatformButton).toBeVisible();
         await multiplatformButton.click();
-        await expect(page.url()).toContain('https://kotlinlang.org/multiplatform/');
+        expect(page.url()).toContain('/multiplatform/');
     });
 
     test('Click on "Server-side" button should open the related page', async ({ page }) => {
diff --git a/test/production/teach.spec.ts b/test/production/teach.spec.ts
index d7be9bb8db0..5a074048793 100644
--- a/test/production/teach.spec.ts
+++ b/test/production/teach.spec.ts
@@ -3,15 +3,12 @@ import { test, expect } from '@playwright/test';
 test.describe('Teach page', () => {
     test.beforeEach(async ({ page }) => {
         await page.goto('/education/');
-        await page.waitForSelector('button.ch2-btn.ch2-btn-primary');
-        await page.click('button.ch2-btn.ch2-btn-primary');
     });
 
     test('Why teach Kotlin button in navbar opens the related page', async ({ page }) => {
         const whyTeachKotlinButton = page.getByRole('link', { name: 'Why Teach Kotlin' }).first();
         await expect(whyTeachKotlinButton).toBeVisible();
         await whyTeachKotlinButton.click();
-        await page.waitForTimeout(3000);
         await expect(page.url()).toContain('/education/why-teach-kotlin/');
     });
 
@@ -19,7 +16,6 @@ test.describe('Teach page', () => {
         const listOfCoursesButton = page.getByRole('link', { name: 'List of Courses' });
         await expect(listOfCoursesButton).toBeVisible();
         await listOfCoursesButton.click();
-        await page.waitForTimeout(3000);
         await expect(page.url()).toContain('/education/courses/');
     });
 
@@ -57,7 +53,6 @@ test.describe('Teach page', () => {
         const whyTeachKotlinButton = page.getByRole('link', { name: 'Why Teach Kotlin' }).nth(1);
         await expect(whyTeachKotlinButton).toBeVisible();
         await whyTeachKotlinButton.click();
-        await page.waitForTimeout(3000);
         await expect(page.url()).toContain('/education/why-teach-kotlin');
     });
 
@@ -65,8 +60,7 @@ test.describe('Teach page', () => {
         const allUniversitiesButton = page.getByRole('link', { name: 'All universities' });
         await expect(allUniversitiesButton).toBeVisible();
         await allUniversitiesButton.click();
-        await page.waitForTimeout(3000);
-        await expect(page.url()).toContain('/education/courses');
+        expect(page.url()).toContain('/education/courses');
     });
 
     test('Slack-channel button in context opens the related page', async ({ page, context }) => {
@@ -76,6 +70,6 @@ test.describe('Teach page', () => {
         await joinEducatorsButton.click();
         const newPage = await newPagePromise;
         await newPage.waitForLoadState();
-        await expect(newPage.url()).toContain('https://surveys.jetbrains.com/s3/kotlin-slack-signup-educators');
+        expect(newPage.url()).toContain('https://surveys.jetbrains.com/s3/kotlin-slack-signup-educators');
     });
 });
diff --git a/test/snapshots/assets/production.css b/test/snapshots/assets/production.css
new file mode 100644
index 00000000000..0b2f8b31dda
--- /dev/null
+++ b/test/snapshots/assets/production.css
@@ -0,0 +1,3 @@
+html body .optly-banner {
+    display: none !important;
+}
diff --git a/test/e2e/hide-sticky-banner.css b/test/snapshots/assets/sticky-navigation.css
similarity index 100%
rename from test/e2e/hide-sticky-banner.css
rename to test/snapshots/assets/sticky-navigation.css
diff --git a/test/utils.ts b/test/utils.ts
index 69a24c54a28..57ff3c72be3 100644
--- a/test/utils.ts
+++ b/test/utils.ts
@@ -1,21 +1,8 @@
-import { BrowserContext, expect, Locator, Page } from '@playwright/test';
+import { ElementHandle, expect, Locator, Page, test } from '@playwright/test';
 import { PageAssertionsToHaveScreenshotOptions } from 'playwright/types/test';
 
 export const testSelector = (name: string) => `[data-test="${name}"]`;
 
-export function isStaging(baseURL: string): boolean {
-    const { hostname } = new URL(baseURL);
-    return hostname !== 'kotlinlang.org';
-}
-
-export const closeCookiesConsentBanner = async (context: BrowserContext, baseURL: string) => {
-    const page = await context.newPage();
-    await page.goto(baseURL);
-    await page.waitForSelector('button.ch2-btn.ch2-btn-primary');
-    await page.click('button.ch2-btn.ch2-btn-primary');
-    await page.close();
-};
-
 const TRANSITION_TIMEOUT = 2000;
 
 export async function checkAnchor(page: Page, anchor: Locator) {
@@ -31,12 +18,74 @@ export async function checkAnchor(page: Page, anchor: Locator) {
 
 export const isSkipScreenshot = process.env.E2E_WITH_SCREENSHOTS !== 'true';
 
-export async function checkScreenshot(element: Locator, options?: PageAssertionsToHaveScreenshotOptions) {
+export async function checkScreenshot(element: Locator | Page, options?: PageAssertionsToHaveScreenshotOptions) {
     if (isSkipScreenshot) return;
 
+    const images = element.locator('img[loading=lazy]');
+
+    if (await images.count() > 0) {
+        await images.evaluate((img: HTMLImageElement) => {
+            img.loading = 'eager';
+            img.decoding = 'sync';
+        });
+    }
+
     await expect(element).toHaveScreenshot({
         caret: 'hide',
         animations: 'disabled',
-        ...(options || {})
+        ...(options || {}),
+        stylePath: ['test/snapshots/assets/production.css'].concat(options?.stylePath || [])
+    });
+}
+
+
+export async function checkFullPageScreenshot(page: Page, options?: PageAssertionsToHaveScreenshotOptions) {
+    if (isSkipScreenshot) return;
+
+    await page.waitForLoadState('networkidle');
+    await page.evaluate(() => window.scrollTo(0, 0));
+
+    await checkScreenshot(page, {
+        ...options,
+        fullPage: true,
+        mask: [
+            page.locator('header[data-test="header"]'),
+            page.locator('footer'),
+            page.locator('video[autoplay]'),
+
+            ...(options.mask || [])
+        ]
     });
 }
+
+export async function getElementScreenshotWithPadding(page: Page, element: ElementHandle, padding: number): Promise<Buffer | undefined> {
+    await element.scrollIntoViewIfNeeded();
+    const box = await element.boundingBox();
+
+    if (box !== null) {
+        return await page.screenshot({
+            clip: {
+                x: box.x - padding,
+                y: box.y - padding,
+                width: box.width + padding * 2,
+                height: box.height + padding * 2
+            }
+        });
+    }
+}
+
+export function isProduction(baseURL: string | undefined) {
+    try {
+        return Boolean(baseURL) && new URL(baseURL).hostname === 'kotlinlang.org';
+    } catch (error) {
+        return false;
+    }
+}
+
+export function skipProduction(text?: string) {
+    test.skip(({ baseURL }) => isProduction(baseURL), text || 'Skip tests on production environment');
+}
+
+export function skipNonProduction(text?: string) {
+    test.skip(({ baseURL }) => !isProduction(baseURL), text || 'Skip tests on non-production environment');
+}
diff --git a/yarn.lock b/yarn.lock
index bf2ffed482d..29e94e6a1ab 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9254,6 +9254,11 @@ playwright-core@1.57.0:
   resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.57.0.tgz#3dcc9a865af256fa9f0af0d67fc8dd54eecaebf5"
   integrity sha512-agTcKlMw/mjBWOnD6kFZttAAGHgi/Nw0CZ2o6JqWSbMlI219lAFLZZCyqByTsvVAJq5XA5H8cA6PrvBRpBWEuQ==
 
+playwright-teamcity-reporter@1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/playwright-teamcity-reporter/-/playwright-teamcity-reporter-1.0.5.tgz#2598020cff255fd95672a69a266207813bd710da"
+  integrity sha512-bkFyIxtRkk7Zd0d+EGwqJnr3SapTYMdbGJ2jv6I2ftGJ+nUstBsngxUn2AO5MNkOsYZFAlLDA5QY3GIn+n/Uag==
+
 playwright@1.57.0:
   version "1.57.0"
   resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.57.0.tgz#74d1dacff5048dc40bf4676940b1901e18ad0f46"