When you create a tests like this test('header test', async ({page}) => { you're specifying page and telling it to create a new page context.

Remove the page from the test - and share the one you create from your .beforeAll

Try this:

test.describe('1 page multiple tests', () => {
    let page;
    test.beforeAll(async ({ browser }) => {
        const context = await browser.newContext();
        page = await context.newPage();
        await page.goto('https://example.com');
    });

    test.afterAll(async ({ browser }) => {
        browser.close;
    });

    test('nav test', async () => {
        const name = await page.innerText('h1');
        expect(name).toContain('Example');
    });

    test('header test', async () => {
        const name = await page.innerText('h1');
        expect(name).toContain('Domain');
    });
});

Run it like this :

npx playwright test .\StackTests_SinglePage.spec.ts --headed

(you can see the name of my file in there)

You might need to toggle it down to 1 worker if it tries to parallel run your test.

For me, that code opens 1 borwser, 1 page, passes both tests the closes out.

Can you try wrapping the tests in a describe block? So they are treated as a group and not as an individual tests.

test.describe('two tests for same page', () => {
   test('nav test', async ({ page }) => {    
     const name = await page.innerText('.navbar__title');  
     expect(name).toBe('Playwright');
   });

   test('header test', async ({ page }) => {   
    const name = await page.innerText('.navbar__header');  
    expect(name).toBe('Playwright');
  });
});