Creating dynamic test IDs for Jest and Playwright

17 January 2023by Jack McGregor

Any good software stack should be thoroughly tested. We use Jest for our unit tests and Playwright for our E2E / acceptance tests, however, Jest was around long before we started adding Playwright and we use the `data-testid` extensively in our project. Ideally, we have configured Playwright to use the same same ID instead of its own `data-playwright-id` but we have a backend team that had already implemented Playwright on some of their other projects and wanted to keep things consistent.
They also wanted us to follow a pattern, where we can chain IDs to make things easier to find in the DOM.
Take the following structure for example: 
import React, { FC, ReactNode } from 'react';


export const Container: FC<{ children?: ReactNode }> = ({ children }) => {
  return <div>{children}</div>;
};


export const Section: FC<{ children?: ReactNode }> = ({ children }) => {
  return <div>{children}</div>;
};


export const Feature1: FC = () => {
  return <h1>Feature 1</h1>;
};


export const Feature2: FC = () => {
  return <h1>Feature 2</h1>;
};


export const YourPage = () => {
  return (
    <Container>
      <Section>
        <Feature1 />
      </Section>
      <Section>
        <Feature2 />
      </Section>
    </Container>
  );
};
Beforehand, we would include `data-plaaywright-id` attributes on the individual components like so:
import React, { FC, ReactNode } from 'react';
export const Container: FC<{ children?: ReactNode }> = ({ children }) => {
  return <div data-playwright-id="container">{children}</div>;
};


export const Section: FC<{ children?: ReactNode }> = ({ children }) => {
  return <div data-playwright-id="section">{children}</div>;
};


export const Feature1: FC = () => {
  return <h1 data-playwright-id="header-1">Feature 1</h1>;
};


export const Feature2: FC = () => {
  return <h1 data-playwright-id="header-2">Feature 2</h1>;
};


export const YourPage = () => {
  return (
    <Container>
      <Section>
        <Feature1 />
      </Section>
      <Section>
        <Feature2 />
      </Section>
    </Container>
  );
};
Unfortunately, this is cumbersome and restrictive to implement, and lacks the ability to chain IDs together to make unique, descriptive paths.
This is where React Hooks come to the rescue! 
export type MakePlaywrightAttr = (newId: string) => PlaywrightAttr;


export type PlaywrightHook = [PlaywrightAttr, MakePlaywrightAttr];


export interface PlaywrightAttr {
  'data-playwright-id': string;
}


export function usePlaywright(
  initialId?: string | PlaywrightAttr
): PlaywrightHook {
  let id: string = '';


  if (typeof initialId === 'string') {
    id = initialId;
  } else {
    id = initialId?.['data-playwright-id'] ?? '';
  }


  let attr = {
    'data-playwright-id': id,
  };


  const setPlaywrightId: MakePlaywrightAttr = newId => {
    const splitInitialId = id.split('.');
    const splitNewId = newId.split('.');


    const _id = [...splitInitialId, ...splitNewId].join('.').toLowerCase();


    return {
      'data-playwright-id': _id
    };
  };


  return [attr, setPlaywrightId];
}
In this hook we want to do two things: pass in an initial ID as either a string (eg 'container') or as the object `{ 'data-playwright-id': 'some-id' }`. You may observe that the latter is what the hook setter (`setPlaywrightId`) returns. This is what makes it both reusable and chainable.
I styled the returned values of the hook after React's own `useState` hook as we'll see, but obviously you can do what you want. To the hook, you first need to declare it:
export const YourPage = () => {
  const [playwrightId, setPlaywrightId] = usePlaywright('page-name');


  return (
    <Container>
      <Section>
        <Feature1 />
      </Section>
      <Section>
        <Feature2 />
      </Section>
    </Container>
  );
};
Since we'll be wanting to pass the root ID down, we can extend each component's prop to accept our hooks value. This is useful if you have to add IDs to many, many components and want a single source of truth for the ID format.
export interface PlaywrightProps {
  playwrightId?: PlaywrightAttr;
}


interface ContainerProps extends PlaywrightProps {
  children?: ReactNode;
}


// repeat for other components
export const Feature2: FC<Feature2Props> = ({ playwrightId }) => {
  return <h1 data-playwright-id="header-2">Feature 2</h1>;
};


export const YourPage = () => {
  const [playwrightId] = usePlaywright('page-name');


  return (
    <Container playwrightId={playwrightId}>
      <Section>
        <Feature1 />
      </Section>
      <Section>
        <Feature2 />
      </Section>
    </Container>
  );
};
So we have our components, we've created our root ID using our hook and we've extended the interfaces or components that will be using it, but now we want to extend it.
To do this, we can pass the `playwrightId` prop into a new instance of the hook in a child component.
export const Section: FC<SectionProps> = ({ children, playwrightId }) => {
  // playwrightId from <YourPage /> will be "page-name"
  const [, setPlaywrightId] = usePlaywright(playwrightId);


  // setPlaywrightId returns the data attr
  return <div {...setPlaywrightId('section')}>{children}</div>;
};


// will result in the following HTML
// <div data-playwright-id="page-name.section">{children}</div>;
Nesting a bit further down can get tricky. Fortunately, we can use some lightweight native functionality to pass props to children
export const Section: FC<SectionProps> = ({ children, playwrightId }) => {
  const [, setPlaywrightId] = usePlaywright(playwrightId);


  const childrenWithProps = Children.map(children, child => {
    // Checking isValidElement is the safe way and avoids a
    // typescript error too.
    if (React.isValidElement(child)) {
      return React.cloneElement(child, setPlaywrightId('section'));
    }
    return child;
  });


  return <div {...setPlaywrightId('section')}>{childrenWithProps}</div>;
};
Awesome! Now each child of Section will have the `playwrightId` prop with the chained IDs from its parents. Now to need to set it in the child Feature components
interface Feature1Props extends PlaywrightProps {}


export const Feature1: FC<Feature1Props> = ({ playwrightId }) => {
  const [, setPlaywrightId] = usePlaywright(playwrightId);


  // page-name.section.header-1
  return <h1 {...setPlaywrightId('header-1')}>Feature 1</h1>;
};


interface Feature2Props extends PlaywrightProps {}


export const Feature2: FC<Feature2Props> = ({ playwrightId }) => {
  const [, setPlaywrightId] = usePlaywright(playwrightId);


  // page-name.section.header-2
  return <h1 {...setPlaywrightId('header-2')}>Feature 2</h1>;
};
Noice.
As a bonus, let's say we need both `data-playwright-id` for Playwright AND `data-testid` for Jest, BUT we don't want them created automatically in case they override other IDS. Easy. We can set an optional boolean argument in our hook and conditionally add on a property to our data attribute object
export function usePlaywright(
  initialId?: string | PlaywrightAttr,
  addDataId = false // <- here
): PlaywrightHook {
  let id: string = '';


  if (typeof initialId === 'string') {
    id = initialId;
  } else {
    id = initialId?.['data-playwright-id'] ?? '';
  }


  let attr = {
    'data-playwright-id': id,
    ...(addDataId && { 'data-testid': id }) // <- here
  };


  const setPlaywrightId: MakePlaywrightAttr = newId => {
    const splitInitialId = id.split('.');
    const splitNewId = newId.split('.');


    const _id = [...splitInitialId, ...splitNewId].join('.').toLowerCase();


    return {
      'data-playwright-id': _id,
      ...(addDataId && { 'data-testid': _id }) // <- here
    };
  };


  return [attr, setPlaywrightId];
}
Then use in your code like so:
export const Feature1: FC<Feature1Props> = ({ playwrightId }) => {
  const [, setPlaywrightId] = usePlaywright(playwrightId, true);


  // page-name.section.header-1
  return <h1 {...setPlaywrightId('header-1')}>Feature 1</h1>;
};


export const Feature2: FC<Feature2Props> = ({ playwrightId }) => {
  const [, setPlaywrightId] = usePlaywright(playwrightId);


  // page-name.section.header-2
  return <h1 {...setPlaywrightId('header-2')} data-testid="very-important-id">Feature 2</h1>;
};


export const YourPage = () => {
  const [playwrightId] = usePlaywright('page-name', true);


  return (
    <Container playwrightId={playwrightId}>
      <Section>
        <Feature1 />
      </Section>
      <Section>
        <Feature2 />
      </Section>
    </Container>
  );
};
Playwright ID scraper31 January 2023Seed file for PayloadCMS23 January 2023Rendering languages in code blocks17 January 2023