← Back to Discord Forum

How to loop from Fixture data result and create new tests?

I have the #Fixture on demand that I'm getting a list of stories as pre condition.. such common used in #BeforeAll.

Following the documentation. I can create a test('', async ({ getStories })

  • Step 1
import { test as base, expect, Page, TestInfo } from '@playwright/test';

const iFrameUrl = '/iframe.html?id=';

const test = base.extend<{ getStories: () => Promise<string[]> }>({
  getStories: async ({ page, baseURL }, use) => {
    //const createdUsers = []
    await use(async () => {
      await page.goto(baseURL, { waitUntil: "load" });
      await page.locator('#core').getByLabel('expand').click()
      await page.locator('#components').getByLabel('expand').click()
      const storyIds: string[] = []
      const stories = await page.locator('//*[@data-nodetype="story"]').all();
      for (const story of stories) {
        const storyId = await story.getAttribute('data-item-id');
      /// createdUsers.push(storyIds);
      return storyIds;


// Works from the documentation way.
test('example', async ({ page, baseURL, getStories }) => {
  const stories = await getStories();
  //this is working
  for (const story of stories) {
    await page.goto(baseURL + iFrameUrl + story);
    // ...

Here is what I actually need: How can Fixture help us on this scenario ?

// here is the dada that come from the   `getStories`
  for (const story of stories) { 
     // the `getStories`  can only be passed into test
    test(`example ${story }`, async ({ page, baseURL}) => {
    await page.goto(baseURL + iFrameUrl + story);
    // ...

This thread is trying to answer question "How can I loop from Fixture data result and create new tests in TypeScript?"

1 reply

How to loop from Fixture data result and create new tests?


Sure, let's dive into how you can loop through fixture data and create new tests in TypeScript using @playwright/test.

First, you need to define your fixtures. Let's say you have a fixture called dataFixture that provides an array of data for your tests:

import { test as base } from '@playwright/test';

const test = base.extend<{ dataFixture: string[] }>({
  dataFixture: [async ({}, use) => {
    const data = ['test1', 'test2', 'test3']; // Replace with your actual fixture data
    await use(data);

In this example, dataFixture is an async function that provides an array of strings.

Next, you can use the fixture value in your tests by including it as a parameter in your test functions:

test('example test', async ({ dataFixture }) => {
  for (const item of dataFixture) {
    console.log(`Running test for ${item}`);
    // ... Your test logic here ...

Inside the test function, you can loop through the dataFixture and create new tests based on each item in the fixture. You can perform assertions or actions specific to each test case using the current item.

By running this code, Playwright Test will automatically generate separate tests for each item in the dataFixture. The output will show individual results for each generated test.

Remember to replace 'test1', 'test2', 'test3' with your actual fixture data.

This approach allows you to dynamically generate multiple tests based on the data provided by the fixture. You can customize each test case within the loop to suit your specific testing needs.

Related Discord Threads

AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.