POM in Playwright using .json as Test Data

In this article, we discuss about how to use test data from .json file in Playwright POM implementation.

This blog is a continuation of my blog on POM in Playwright — https://medium.com/@anandhik/page-object-model-in-playwright-fb1b60597c95.

Application url : https://react-redux.realworld.io/

Scenario : Create a new post

Create new post can be implemented in two ways,

1. Test 01 : Create a single post

2. Test 02 : Create more than one post by implementing data driven framework

Create a test data file:

Create a folder called ‘testData’ under project folder and create a file named ‘posts.json’ inside this folder.

{
    "posts": [
        {
            "articleTitle": "MyNewArticle4",
            "aboutArticle": "This article is about Playwright BDD",
            "articleDetail": "In this article we are going to discuss about Playwright POM",
            "tagName": "introduction"
        },
        {
            "articleTitle": "MyNewArticle5",
            "aboutArticle": "This article is about Playwright POM",
            "articleDetail": "In this article we are going to discuss about Playwright POM",
            "tagName": "introduction"
        },
        {
            "articleTitle": "MyNewArticle6",
            "aboutArticle": "This article is about Playwright POM",
            "articleDetail": "In this article we are going to discuss about Playwright POM",
            "tagName": "introduction"
        }
    ]
}

Test 01 : Create a single post

As mentioned in the previous blog, create list of Page Objects and implement the below test case. Here, we read a particular element from json array using index. This array has list of items.

import test, { expect } from "@playwright/test"
import { posts } from "../testData/posts.json"

import GlobalFeedListPage from "../pages/globalFeedPage"
import HomePage from "../pages/homePage"
import LoginPage from "../pages/loginPage"
import NewPostPage from "../pages/newPostPage"
import PostViewPage from "../pages/postViewPage"

const uName = "corpdevops@gmail.com"
const pwd = "xxxxx"

test.describe('Blog Post', () => {
    test.beforeEach(async ({ page }) => {
        await page.goto('/')
        const homePage = new HomePage(page)
        const loginPage = new LoginPage(page)
        await homePage.navigateToLogin()
        await loginPage.enterUsername(uName)
        await loginPage.enterPassword(pwd)
        await loginPage.clickLoginBtn()
    })

     test.only("Create Blog post using json file", async ({ page }) => {
        const homePage = new HomePage(page)
        const newPostPage = new NewPostPage(page)
        await homePage.createNewPost()
        await newPostPage.enterArticle(posts[2].articleTitle)
        await newPostPage.enterAbtArticle(posts[2].aboutArticle)
        await newPostPage.enterArticleDetail(posts[2].articleDetail)
        await newPostPage.enterTag(posts[2].tagName)
        await newPostPage.clickPublishBtn()
        await expect(newPostPage.isArticleCreated(posts[2].articleTitle))
   .toContainText(posts[2].articleTitle)
    })

})

Test 02 : Create more than one post by implementing data driven framework

Here, we iterate through more than one array element using foreach and executing same test with more than one set of data.

import test, { expect } from "@playwright/test"
import { posts } from "../testData/posts.json"

import GlobalFeedListPage from "../pages/globalFeedPage"
import HomePage from "../pages/homePage"
import LoginPage from "../pages/loginPage"
import NewPostPage from "../pages/newPostPage"
import PostViewPage from "../pages/postViewPage"

const uName = "corpdevops@gmail.com"
const pwd = "xxxxx"

test.describe('Blog Post', () => {
    test.beforeEach(async ({ page }) => {
        await page.goto('/')
        const homePage = new HomePage(page)
        const loginPage = new LoginPage(page)
        await homePage.navigateToLogin()
        await loginPage.enterUsername(uName)
        await loginPage.enterPassword(pwd)
        await loginPage.clickLoginBtn()
    })

    posts.forEach((item, index) => {
                test(`Create Blog post - Iteration: ${index + 1}`, async ({ page }) => {
            const homePage = new HomePage(page)
            const newPostPage = new NewPostPage(page)
            await homePage.createNewPost()
            await newPostPage.enterArticle(posts[index].articleTitle)
            await newPostPage.enterAbtArticle(posts[index].aboutArticle)
            await newPostPage.enterArticleDetail(posts[index].articleDetail)
            await newPostPage.enterTag(posts[index].tagName)
            await newPostPage.clickPublishBtn()
            await 
              expect(newPostPage.isArticleCreated(posts[index].articleTitle))
              .toContainText(posts[index].articleTitle)
        })
    })
})

GitHub url :

https://github.com/A2ZTestAutomation/PW_POM_Samples.git

Conclusion :

We have seen a sample on using .json as an external file to provide test data. Similar way .csv file can also be used as data file.