added e2e tests for history navigation to fragment positions (#8265)

packages/astro/e2e/fixtures/view-transitions/src/pages/long-page.astro

@@ -4,6 +4,7 @@ import Layout from '../components/Layout.astro';
 <Layout>
 	<article id="longpage">
 		<div><a id="click-one" href="/one">go to 1</a></div>
+		<div><a id="click-scroll-down" href="#click-one-again">go further down</a></div>
 
 		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictum varius duis at consectetur lorem donec massa sapien faucibus. Amet mauris commodo quis imperdiet massa. Sed pulvinar proin gravida hendrerit lectus a. Magna ac placerat vestibulum lectus. Blandit cursus risus at ultrices mi tempus. Luctus venenatis lectus magna fringilla urna porttitor. Auctor eu augue ut lectus arcu bibendum at varius vel. Tristique senectus et netus et. In fermentum et sollicitudin ac orci phasellus egestas tellus rutrum. Eget lorem dolor sed viverra ipsum nunc aliquet. Amet consectetur adipiscing elit ut aliquam purus. Accumsan lacus vel facilisis volutpat est velit egestas. Felis imperdiet proin fermentum leo vel. Ut tellus elementum sagittis vitae et leo duis ut diam. Nisl pretium fusce id velit. Lorem donec massa sapien faucibus et. Nibh sed pulvinar proin gravida hendrerit lectus a. In est ante in nibh mauris cursus mattis molestie.
 
@@ -30,7 +31,7 @@ import Layout from '../components/Layout.astro';
 		Viverra aliquet eget sit amet. Dui vivamus arcu felis bibendum. Pharetra convallis posuere morbi leo urna molestie at elementum eu. Parturient montes nascetur ridiculus mus mauris vitae. Mus mauris vitae ultricies leo integer malesuada nunc vel. Consequat semper viverra nam libero. Amet venenatis urna cursus eget nunc scelerisque. Amet risus nullam eget felis eget nunc lobortis. Venenatis urna cursus eget nunc. Sagittis id consectetur purus ut faucibus pulvinar. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper.
 
 		<div><a id="click-one-again" href="/one">go to 1</a></div>
-
+		<div><a id="click-scroll-up" href="#longpage">go back up</a></div>
 		Morbi tristique senectus et netus et. Neque aliquam vestibulum morbi blandit cursus risus. Pharetra pharetra massa massa ultricies mi quis. Sit amet aliquam id diam maecenas ultricies mi eget mauris. Ultrices mi tempus imperdiet nulla malesuada. At consectetur lorem donec massa sapien faucibus et molestie. Non sodales neque sodales ut etiam. Eget nunc lobortis mattis aliquam faucibus purus in massa tempor. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Diam vulputate ut pharetra sit. Felis donec et odio pellentesque diam. Mollis aliquam ut porttitor leo. Vitae nunc sed velit dignissim sodales. Facilisis mauris sit amet massa vitae tortor condimentum lacinia quis.
 
 		Aliquet enim tortor at auctor urna nunc id cursus. Bibendum at varius vel pharetra vel turpis nunc eget. Mattis molestie a iaculis at erat. Vel turpis nunc eget lorem dolor sed viverra ipsum nunc. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Nunc congue nisi vitae suscipit. Donec massa sapien faucibus et molestie ac. Nec feugiat nisl pretium fusce. At imperdiet dui accumsan sit amet nulla facilisi. Sed viverra tellus in hac.

packages/astro/e2e/view-transitions.test.js

@@ -264,6 +264,28 @@ test.describe('View Transitions', () => {
 		expect(oldScrollY).toEqual(newScrollY);
 	});
 
+	test('Fragment scroll position restored on back button', async ({ page, astro }) => {
+		// Go to the long page
+		await page.goto(astro.resolveUrl('/long-page'));
+		let locator = page.locator('#longpage');
+		await expect(locator).toBeInViewport();
+
+		// Scroll down to middle fragment
+		await page.click('#click-scroll-down');
+		locator = page.locator('#click-one-again');
+		await expect(locator).toBeInViewport();
+
+		// Scroll up to top fragment
+		await page.click('#click-scroll-up');
+		locator = page.locator('#longpage');
+		await expect(locator).toBeInViewport();
+
+		// Back to middle of the page
+		await page.goBack();
+		locator = page.locator('#click-one-again');
+		await expect(locator).toBeInViewport();
+	});
+
 	test('Scroll position restored on forward button', async ({ page, astro }) => {
 		// Go to page 1
 		await page.goto(astro.resolveUrl('/one'));
@@ -290,6 +312,28 @@ test.describe('View Transitions', () => {
 		expect(oldScrollY).toEqual(newScrollY);
 	});
 
+	test('Fragment scroll position restored on forward button', async ({ page, astro }) => {
+		// Go to the long page
+		await page.goto(astro.resolveUrl('/long-page'));
+		let locator = page.locator('#longpage');
+		await expect(locator).toBeInViewport();
+
+		// Scroll down to middle fragment
+		await page.click('#click-scroll-down');
+		locator = page.locator('#click-one-again');
+		await expect(locator).toBeInViewport();
+
+		// Scroll back to top
+		await page.goBack();
+		locator = page.locator('#longpage');
+		await expect(locator).toBeInViewport();
+
+		// Forward to middle of page
+		await page.goForward();
+		locator = page.locator('#click-one-again');
+		await expect(locator).toBeInViewport();
+	});
+
 	test('<Image /> component forwards transitions to the <img>', async ({ page, astro }) => {
 		// Go to page 1
 		await page.goto(astro.resolveUrl('/image-one'));
@@ -402,7 +446,6 @@ test.describe('View Transitions', () => {
 });
 
 test('Navigation also swaps the attributes of the document root', async ({ page, astro }) => {
-	page.on('console', (msg) => console.log(msg.text()));
 	await page.goto(astro.resolveUrl('/some-attributes'));
 	let p = page.locator('#heading');
 	await expect(p, 'should have content').toHaveText('Page with some attributes');