diff --git a/e2e/cypress.config.ts b/e2e/cypress.config.ts
index 2f461f3bdd..dfc9904eb0 100644
--- a/e2e/cypress.config.ts
+++ b/e2e/cypress.config.ts
@@ -1,9 +1,64 @@
 import { defineConfig } from 'cypress'
+import { fs, getDirname, path } from 'vuepress/utils'
+
+const __dirname = getDirname(import.meta.url)
+const resolveSourceMarkdownPath = (...args: string[]): string =>
+  path.resolve(__dirname, 'docs', ...args)
 
 export default defineConfig({
   e2e: {
     baseUrl: 'http://localhost:9080',
     specPattern: 'tests/**/*.cy.ts',
+    setupNodeEvents(on) {
+      on('task', {
+        'hmr:title': async () => {
+          const hmrTitleSourceMarkdownPath =
+            resolveSourceMarkdownPath('hmr/title.md')
+          const content = await fs.readFile(hmrTitleSourceMarkdownPath, 'utf-8')
+          await fs.writeFile(
+            hmrTitleSourceMarkdownPath,
+            content.replace('# HMR Title', '# Updated Title'),
+          )
+          return true
+        },
+        'hmr:title:restore': async () => {
+          const hmrTitleSourceMarkdownPath =
+            resolveSourceMarkdownPath('hmr/title.md')
+          const content = await fs.readFile(hmrTitleSourceMarkdownPath, 'utf-8')
+          await fs.writeFile(
+            hmrTitleSourceMarkdownPath,
+            content.replace('# Updated Title', '# HMR Title'),
+          )
+          return true
+        },
+        'hmr:frontmatter': async () => {
+          const hmrFrontmatterSourceMarkdownPath =
+            resolveSourceMarkdownPath('hmr/frontmatter.md')
+          const content = await fs.readFile(
+            hmrFrontmatterSourceMarkdownPath,
+            'utf-8',
+          )
+          await fs.writeFile(
+            hmrFrontmatterSourceMarkdownPath,
+            content.replace('foo: HMR foo', 'foo: Updated foo'),
+          )
+          return true
+        },
+        'hmr:frontmatter:restore': async () => {
+          const hmrFrontmatterSourceMarkdownPath =
+            resolveSourceMarkdownPath('hmr/frontmatter.md')
+          const content = await fs.readFile(
+            hmrFrontmatterSourceMarkdownPath,
+            'utf-8',
+          )
+          await fs.writeFile(
+            hmrFrontmatterSourceMarkdownPath,
+            content.replace('foo: Updated foo', 'foo: HMR foo'),
+          )
+          return true
+        },
+      })
+    },
   },
   env: {
     E2E_BASE: process.env.E2E_BASE ?? '/',
diff --git a/e2e/docs/hmr/frontmatter.md b/e2e/docs/hmr/frontmatter.md
new file mode 100644
index 0000000000..0dbbd4d595
--- /dev/null
+++ b/e2e/docs/hmr/frontmatter.md
@@ -0,0 +1,11 @@
+---
+foo: HMR foo
+---
+
+## link to title
+
+[title](./title.md)
+
+## rendered foo
+
+{{ $frontmatter.foo }}
diff --git a/e2e/docs/hmr/title.md b/e2e/docs/hmr/title.md
new file mode 100644
index 0000000000..d1c472a01f
--- /dev/null
+++ b/e2e/docs/hmr/title.md
@@ -0,0 +1,9 @@
+# HMR Title
+
+## link to frontmatter
+
+[frontmatter](./frontmatter.md)
+
+## rendered title
+
+{{ $page.title }}
diff --git a/e2e/tests/hmr/frontmatter.cy.ts b/e2e/tests/hmr/frontmatter.cy.ts
new file mode 100644
index 0000000000..275b6232e5
--- /dev/null
+++ b/e2e/tests/hmr/frontmatter.cy.ts
@@ -0,0 +1,24 @@
+if (Cypress.env('E2E_COMMAND') === 'dev') {
+  it('should update frontmatter correctly', () => {
+    cy.visit('/hmr/frontmatter.html')
+    cy.get('.e2e-theme-content #rendered-foo + p').should(
+      'have.text',
+      'HMR foo',
+    )
+
+    cy.task('hmr:frontmatter')
+      .then(() => {
+        cy.get('.e2e-theme-content #rendered-foo + p').should(
+          'have.text',
+          'Updated foo',
+        )
+      })
+      .then(() => cy.task('hmr:frontmatter:restore'))
+      .then(() => {
+        cy.get('.e2e-theme-content #rendered-foo + p').should(
+          'have.text',
+          'HMR foo',
+        )
+      })
+  })
+}
diff --git a/e2e/tests/hmr/navigation.cy.ts b/e2e/tests/hmr/navigation.cy.ts
new file mode 100644
index 0000000000..f9f5ddf918
--- /dev/null
+++ b/e2e/tests/hmr/navigation.cy.ts
@@ -0,0 +1,85 @@
+if (Cypress.env('E2E_COMMAND') === 'dev') {
+  it('should update title and frontmatter correctly after navigation', () => {
+    cy.visit('/hmr/title.html')
+    cy.title().should('include', 'HMR Title')
+    cy.get('.e2e-theme-content #rendered-title + p').should(
+      'have.text',
+      'HMR Title',
+    )
+
+    // update title page
+    cy.task('hmr:title')
+      .then(() => {
+        cy.title().should('include', 'Updated Title')
+        cy.get('.e2e-theme-content #rendered-title + p').should(
+          'have.text',
+          'Updated Title',
+        )
+      })
+      // navigate to frontmatter page
+      .then(() => {
+        cy.get('.e2e-theme-content #link-to-frontmatter + p > a').click()
+        cy.get('.e2e-theme-content #rendered-foo + p').should(
+          'have.text',
+          'HMR foo',
+        )
+      })
+      // update frontmatter page
+      .then(() => cy.task('hmr:frontmatter'))
+      .then(() => {
+        cy.get('.e2e-theme-content #rendered-foo + p').should(
+          'have.text',
+          'Updated foo',
+        )
+      })
+      // navigate to title page
+      .then(() => {
+        cy.get('.e2e-theme-content #link-to-title + p > a').click()
+        cy.get('.e2e-theme-content #rendered-title + p').should(
+          'have.text',
+          'Updated Title',
+        )
+      })
+      // restore title page
+      .then(() => cy.task('hmr:title:restore'))
+      .then(() => {
+        cy.title().should('include', 'HMR Title')
+        cy.get('.e2e-theme-content #rendered-title + p').should(
+          'have.text',
+          'HMR Title',
+        )
+      })
+      // navigate to frontmatter page
+      .then(() => {
+        cy.get('.e2e-theme-content #link-to-frontmatter + p > a').click()
+        cy.get('.e2e-theme-content #rendered-foo + p').should(
+          'have.text',
+          'Updated foo',
+        )
+      })
+      // restore frontmatter page
+      .then(() => cy.task('hmr:frontmatter:restore'))
+      .then(() => {
+        cy.get('.e2e-theme-content #rendered-foo + p').should(
+          'have.text',
+          'HMR foo',
+        )
+      })
+      // navigate to title page
+      .then(() => {
+        cy.get('.e2e-theme-content #link-to-title + p > a').click()
+        cy.get('.e2e-theme-content #rendered-title + p').should(
+          'have.text',
+          'HMR Title',
+        )
+      })
+      // navigate to frontmatter page
+      .then(() => {
+        cy.get('.e2e-theme-content #link-to-frontmatter + p > a').click()
+        cy.get('.e2e-theme-content #rendered-foo + p').should(
+          'have.text',
+          'HMR foo',
+        )
+      })
+  })
+}
diff --git a/e2e/tests/hmr/title.cy.ts b/e2e/tests/hmr/title.cy.ts
new file mode 100644
index 0000000000..c974d4740f
--- /dev/null
+++ b/e2e/tests/hmr/title.cy.ts
@@ -0,0 +1,27 @@
+if (Cypress.env('E2E_COMMAND') === 'dev') {
+  it('should update title correctly', () => {
+    cy.visit('/hmr/title.html')
+    cy.title().should('include', 'HMR Title')
+    cy.get('.e2e-theme-content #rendered-title + p').should(
+      'have.text',
+      'HMR Title',
+    )
+
+    cy.task('hmr:title')
+      .then(() => {
+        cy.title().should('include', 'Updated Title')
+        cy.get('.e2e-theme-content #rendered-title + p').should(
+          'have.text',
+          'Updated Title',
+        )
+      })
+      .then(() => cy.task('hmr:title:restore'))
+      .then(() => {
+        cy.title().should('include', 'HMR Title')
+        cy.get('.e2e-theme-content #rendered-title + p').should(
+          'have.text',
+          'HMR Title',
+        )
+      })
+  })
+}