{"id":31339,"date":"2025-06-06T05:00:00","date_gmt":"2025-06-06T03:00:00","guid":{"rendered":"https:\/\/sii.pl\/blog\/?p=31339"},"modified":"2025-06-06T14:53:45","modified_gmt":"2025-06-06T12:53:45","slug":"playwright-in-practice-integration-api-with-ui-architecture-of-testing-framework-part-ii","status":"publish","type":"post","link":"https:\/\/sii.pl\/blog\/en\/playwright-in-practice-integration-api-with-ui-architecture-of-testing-framework-part-ii\/","title":{"rendered":"Playwright in practice: integration API with UI architecture of testing framework. Part II"},"content":{"rendered":"\n

In this article, we continue building a test automation framework using Playwright and TypeScript. In the previous post<\/a>, we introduced a few key concepts essential for the upcoming development work.<\/p>\n\n\n\n

Today, we focus on a code fragment as the solution’s foundation. We will walk through how to combine API and UI tests. Moreover, we will explore proven practices such as design patterns, factory patterns, page object patterns, and dedicated assertion classes to set up scalable and easy-to-maintain automated tests.<\/p>\n\n\n\n

As I mentioned in the first part<\/a>, we use the Trello app to demonstrate how the framework we’ve built works in practice. Trello is a project management tool based on a Kanban board. It offers a powerful API, making it a great choice for learning how to automate tests. I encourage you to use more advanced applications when learning test automation \u2013 ones that reflect real processes and scenarios. This better prepares you for working on commercial projects.<\/p>\n\n\n\n

What do our tests do?<\/strong><\/strong><\/h2>\n\n\n\n

Our test does:<\/p>\n\n\n\n

    \n
  1. Create a board on Trello using the API.<\/li>\n\n\n\n
  2. Create a list (column) for the board.<\/li>\n\n\n\n
  3. Create cards for a specific list (as a list is a column in Trello terminology).<\/li>\n\n\n\n
  4. Add another list (a new column).<\/li>\n\n\n\n
  5. Move cards from the original column to the new one.<\/li>\n\n\n\n
  6. Verify that cards are available in the new column.<\/li>\n<\/ol>\n\n\n\n

    Framework architecture overview: Playwright + TypeScript<\/strong><\/h2>\n\n\n\n
    \"The
    Fig. 1 The diagram of our solution<\/figcaption><\/figure>\n\n\n\n

    The diagram demonstrates the architecture of a test automation framework built using Playwright and TypeScript, emphasizing the integration of two layers: API and UI<\/strong>.<\/p>\n\n\n\n

      \n
    1. Test Runner (<\/strong>Playwright<\/code>)<\/strong>\n