Jordan Schilling | Technologist, Software Builder, and Engineer

Jordan Schilling — software engineer and technologist

Software engineer focused on automation systems, experimental tools, and developer productivity. Projects, dev logs, and technical writing.

8 March 2026

Expanding the Framework to Checkout

by Jordan Schilling

Devlog — 2026-03-08

Overview

It was time to expand my implementation into checkout. The idea here is to remain with the POM technique — we are taking objects which have defined attributes and then putting them into a final module that groups all the other modules used during object creation. In this case, we are pulling from our objects into an overall constructor that holds frontend operations. The two class instances we have so far are AddToCart and the newly implemented Checkout.

Following what I know, I went ahead and implemented the hierarchy and built out the individual modules.

Obstacles and Solutions

Payment Resets on Reload

A few obstacles came up when implementing this class structure. Every reload resets the payment identifiers. I had to think of a way to use the prefix of the text that labels the new identifier for payment. In this case, using the CSS attribute selector syntax:

[attr^="value"]

This “starts with” selector allowed the locators to remain stable even when the full identifier changed between sessions.

Pay Now Button Not Registering

I also ran into an issue where Pay Now wasn’t registering. The initial fix I had was to wait for Pay Now to be visible, but it is visible — even though it is, that doesn’t mean it’s selectable yet. So if it’s selected and it’s not selectable, then it won’t register.

After looking through Playwright’s timeout documentation, it stated it’s discouraged to add a timeout right after for the nature of it being flaky. Although in this instance, the alternative being a pointer is still being utilized and it’s not working. The timeout after finishing customer details worked — the Pay Now became accessible, and we were able to complete the checkout process for the backend to receive.

The Power of POM

And now because of the way we handled our data using the POM method for object oriented programming, I can use this same script to test various scenarios, or reuse various modules of the classes so we can be dynamic with our test scripts.

Resources

tags: playwright - checkout - css-selectors - automation - testing