GraphQL Playground

Edit the query and variables, execute against a canned schema, and verify both the success and the malformed-variables paths.

Advanced

Why this matters in QA

GraphQL hides bugs in the query layer. Tests that drive the UI without inspecting the GraphQL request miss field-selection regressions, fragment over-fetching, and variable-coercion errors.

A canned GraphQL endpoint. The query and the variables are sent in a single POST; assertions go against data.*.

Query

Variables

ready

// click Run query to see the response

Live widget · interact freely

Manual test checklist

1Run with the default query — response shows `data.user.name = 'Mira Torres'`
2Edit `email` to `unknown@…` — response is still 200 but `data.user` is null
3Break the JSON in variables — status flips, response shows the error message
4Confirm the response is valid JSON (parsed without throwing)
5Confirm the response panel scrolls (long output)

Expected result

Run with valid JSON variables → status `ready` and a populated `data.user` + `data.wallet`. Break the JSON → status `invalid variables` and the response shows a top-level `errors` array.

Automation challenge

Fill `gql-vars` with `{` (intentionally invalid). Click `gql-run`. Assert `gql-status` reads `invalid variables` AND `gql-response` contains `"errors":`. Then restore the variables and re-run for the happy path.

Stable selectors

Query body[data-testid="gql-query"]
Variables body[data-testid="gql-vars"]
Run[data-testid="gql-run"]
Status chip[data-testid="gql-status"]
Response[data-testid="gql-response"]

Reference Playwright spec

graphql.spec.ts

import { test, expect } from '@playwright/test';

test('graphql rejects malformed variables', async ({ page }) => {
  await page.goto('https://lab.hakdogan.com/data-api/graphql');

  await page.getByTestId('gql-vars').fill('{');
  await page.getByTestId('gql-run').click();

  await expect(page.getByTestId('gql-status')).toHaveText('invalid variables');
  await expect(page.getByTestId('gql-response')).toContainText('errors');
});