Skip to content

[Bug]: Trace timeline Showing Hours when using APIRequestContext in fixture #40068

@infinitejest69

Description

@infinitejest69

Version

1.59.1

Steps to reproduce

  1. Create a fixture that is used to return an APIRequestContext
  2. Example:
import { APIRequestContext, request, test as base } from '@playwright/test';

type TestFixture = {
  GraphQLContext: APIRequestContext;
};

export { expect } from '@playwright/test';
export const test = base.extend<TestFixture>({
  GraphQLContext: async ({}, use) => {
    const context = await request.newContext({
      baseURL: process.env.GRAPHQLURL!,
      extraHTTPHeaders: {
        Authorization: `Bearer ${process.env.TOKEN1}`,
        'Content-Type': 'application/json',
      },
      timeout: 60000,
    });
    await use(context);
    await context.dispose();
  },
});

  1. Create a failing test that calls that fixture in the Before all hook
  2. Example:
import { expect, test } from '../../../fixtures/api_fixture';

test.describe(
  'Bug Demo Trace Timing Issue',
  {
    annotation: [
      { description: 'https://www.google.com/', type: 'Link' },
      { description: 'User Story', type: 'Type' },
      { description: 'P2', type: 'Priority' },
      { description: '5.0', type: 'Version' },
    ],
    tag: ['@Google'],
  },
  () => {
    test('Test Bug Demo Trace Timing Issue', async ({ page }) => {
      await test.step('Navigate', async () => {
        await page.goto('https://www.google.com/');
        await expect(page.locator('input[name="q"]')).toBeVisible();
      });

      await test.step('Search', async () => {
        await page.fill('input[name="q"]', 'Playwright');
        await page.press('input[name="q"]', 'Enter');
        await expect(page.locator('text=Playwright')).toBeVisible();
      });
      await test.step('Perform action', async () => {
        await page.click('text=Playwright');
        await expect(page.locator('text=Playwright: Fast and reliable end-to-end testing for modern web apps')).toBeVisible();
      });
    });

    test.beforeAll(async ({ GraphQLContext }) => {});

    test.afterAll(async ({ GraphQLContext }) => {});
  }
);
  1. Run Test in docker
  2. Check Tracefile

Expected behavior

I would expect not see hours of run time in the tracefile timeline if i run the same failing test locally and not in docker

Image

Actual behavior

Test shows hours of time in trace file

Image

Additional context

I use this way to create a graphQL API client that makes calls and does the data setup in before and after hooks and still shows those calls within the trace files

We use it like this

test.beforeAll(async ({ GraphQLContext }) => {
  const apiClient = new MYGraphClient(GraphQLContext);
  await apiClient.CreateSomething("Something");
});

Environment

docker run --add-host=hostmachine:host-gateway -p 3000:3000 --rm --init -it --workdir /home/pwuser --user pwuser mcr.microsoft.com/playwright:v1.59.1-noble /bin/sh -c \"npx -y playwright@1.59.1 run-server --port 3000 --host 0.0.0.0\""

System:
    OS: Windows 11 10.0.26200
    CPU: (12) x64 13th Gen Intel(R) Core(TM) i7-1365U
    Memory: 11.16 GB / 31.66 GB
  Binaries:
    Node: 24.12.0 - C:\Program Files\nodejs\node.EXE
    npm: 11.6.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: 10.14.0 - C:\Users\AndrewLumsden\AppData\Local\pnpm\pnpm.EXE
  Languages:
    Bash: 5.2.21 - C:\WINDOWS\system32\bash.EXE
  npmPackages:
    @playwright/test: ^1.59.1 => 1.59.1 
    playwright: ^1.59.1 => 1.59.1

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions