Playwright Technical Assessment Project

This is a technical assessment for Quality Engineering using Spree Commerce platform, Playwright, TypeScript, and Docker.

Playwright Framework

The Playwright testing framework project is still work-in-progress, it is NOT 100% complete. The project was started to demonstrate understanding of the following Playwright features:

• Page Object Model
• Component Object Model
• Playwright custom fixtures to add authenticated state for a page and an api client
• Authentication via .auth files
• Mocking API functionality
• API tests with Playwright
• Test structure
• Test planning
• Use of TypeScript with Playwright

Playwright Project Navigation

• Playwright directory
• Dedicated README on the Playwright framework and approach

Additionally it covers

• Using Playwright in a CI pipeline
• Running Playwright in Docker containers locally and on CI.

I implemented in particular:

• the entire Playwright project that lives in the /playwright directory
• the CI pipeline workflow that runs the Playwright tests
• docker-compose-test.yml configuration that is used by the CI pipeline

Disclaimers

• the Spree app version used in this project offers some sample test data set that is missing images, you can upload some manually into a local instance using free images form Unsplash

• The same for browsers, in this test project, I'm limiting the browser selection to just Chrome to speed up local and CI runs but in a real life project this will be adjusted based on the browsers that the project claims to support

• Mocking APIs is a work in progress, I'm still experimenting with it. The plan is to use Mock Service Worker to mock the payment gateway API

• Reporting is very minimal and is also not fully complete.

To run Playwright tests locally

1. Clone the repository

git clone https://github.com/spree/spree_starter.git

2. Go to the repository directory:

cd spree_starter

3. Follow the Local Installation Guide below

4. Go to the Playwright directory

cd playwright

5. Install Playwright dependencies

npm install

6. Run Playwright test in normal headless mode:

npx playwright test

7. Run Playwright in the UI mode:

npx playwright test --ui

8. Run Playwright in the debug mode:

npx playwright test --debug

9. Run a specific Playwright spec file:

npx playwright test file-name.spec.ts

About Spree Commerce

This project uses the Spree Starter kit for Spree Commerce - the open-source eCommerce platform for Rails. It is a great starting point for any Rails developer to quickly build an eCommerce application.

This starter uses:

• Spree Commerce 5, the biggest release ever, which includes Admin Dashboard, API and Storefront - everything you need to start developing your new eCommerce application/store/marketeplace
• Stripe for payment processing, thanks to the official Spree Stripe gem
• Devise for authentication
• Sidekiq for background jobs
• PostgreSQL as a database
• Redis for caching
• (Optional) Sentry for error/performance monitoring
• (Optional) SendGrid for transactional email notifications

You don't need to install additional tools or libraries to start developing with Spree Starter. Everything is already set up for you.

Local Installation

You can follow the official Spree Quickstart guide to setup your Spree application using the Spree starter.

OR these notes I've taken

1. Install required dependencies On MacOS you can install the dependencies using Homebrew package manager:

brew install vips libpq

On debian-based systems you can install the dependencies using the package manager:

sudo apt-get install libvips-dev libpq-dev

2. Install Ruby Spree is based on Ruby and Rails, hence you need to install Ruby language. Install rbenv (ruby version manager):

curl -fsSL https://rbenv.org/install.sh | bash

And now install Ruby 3.3: Before attempting to install Ruby, check that your build environment has the necessary tools and libraries.(https://github.com/rbenv/ruby-build/wiki#suggested-build-environment).

rbenv install 3.3.0 && rbenv global 3.3.0

3. Install Docker Desktop
4. Start Docker Compose services: Note: Docker needs to be running before running the setup commands.

docker compose up -d

This will start the PostgreSQL database which is required for Spree to work. You can also use other databases like MySQL.

5. Run setup commands:

bin/setup

This will install the necessary gems, run the database migrations and seed the database with some sample data.

6. And finally start the development server with:

bin/dev

This will start the development server on http://localhost:3000.

7. To add sample data to your store, run:

bin/rake spree_sample:load

Note: The original sample data set added with this task is missing images due to copyright concerns. Images can be uploaded manually into a local instance (e.g. free images from Unsplash) via the admin panel http://localhost:3000/admin.

Alternative - Automated Image Seeding (Custom Addition):

To load sample data with product images automatically attached, first add your images to db/seed_images/ directory (PNG format recommended, I added a few as an example), then run:

bin/rake spree_sample:load_with_images

This custom task loads Spree sample data and randomly assigns 3 images from the seed_images folder to each product.

There is an option to add images manually via the admin panel http://localhost:3000/admin/

Username: spree@example.com
Password: spree123

Deployment

Please follow Deployment guide to quickly deploy your production-ready Spree application.

Running unit tests

This repository is pre-configured for running tests of your Spree customizations. To run the full test suite, just type:

bundle exec rspec

Troubleshooting

libvips error

If you encounter an error like the following:

LoadError: Could not open library 'vips.so.42'

Please check that libvips is installed with vips -v, and if it is not installed, follow installation instructions here.