We are well on our way to place a copy of my favorite test site, The-Internet, onto its new home on Render.com, a place where developers can deploy web apps using their free tier, much like Heroku in its heyday. Sure, web apps that live on the free tier of Render takes a minute or so to spin up, but, hey, you get what you pay for! With our last blog post, we: Examined using Google AI the Gemfile of the original The-Internet, a Ruby project at https://github.com/saucelabs/the-internet, hosting on the failing site, https://the-internet.herokuapp.com/ Created a new copy of the web app onto my…
With this blog post, we will be taking Dave Haeffner's The-Internet, https://the-internet.herokuapp.com/, a ten-year old web app test site, fork it, investigate using Google AI how to modernize the server architecture, and port it over to a new home at Render.com. Spoilers: The original version, but with updated Ruby architecture: https://the-internet-8uaj.onrender.com/ (takes a minute to spin up the environment) It finally happened. Dave Haefner's The-Internet, a test site I have been using ever since I first started blogging, is now failing to load half the time. It's not the test site's…
While researching information for my job about the Swagger UI and how it can be used for testing, I came across this free course, called Documenting APIs: A guide for technical writers and engineers at https://idratherbewriting.com/learnapidoc/docapis_overview.html written by Tom Johnson, a technical writer based in Seattle who works for Google. The course looks intense, containing 17 chapters talking about Introduction to REST APIs, using APIs like a developer, Documenting API endpoints, the Open API spec, Testing API docs, Publishing API docs, and more.From the Course Introduction: "You’ll…
While researching information for my job about the Swagger UI and how it can be used for testing, I came across this free course, called Documenting APIs: A guide for technical writers and engineers at https://idratherbewriting.com/learnapidoc/docapis_overview.html written by Tom Johnson, a technical writer based in Seattle who works for Google. The course looks intense, containing 17 chapters talking about Introduction to REST APIs, using APIs like a developer, Documenting API endpoints, the Open API spec, Testing API docs, Publishing API docs, and more. From the Course Introduction: "You’ll…
With the last post, Testing the Swagger Petstore: Reviewing API Documentation Formatted in OpenAPI 3.0 with Swagger UI we started exploring an API with Swagger UI, such as the Swagger Petstore at https://petstore3.swagger.io/Here, we will start exploring how to test an API using the Swagger UI.The tests we can run are:Happy Path Testing, checking the Positive ScenariosNegative Testing, reviewing the Invalid Inputs & Error HandlingBoundary & Edge Case Testing, checking how the API handles the extreme limits of allowed input rangesAuthentication & Authorization TestingContract and schema…
With the last post, Testing the Swagger Petstore: Reviewing API Documentation Formatted in OpenAPI 3.0 with Swagger UI we started exploring an API with Swagger UI, such as the Swagger Petstore at https://petstore3.swagger.io/ Here, we will start exploring how to test an API using the Swagger UI. The tests we can run are: Happy Path Testing, checking the Positive Scenarios Negative Testing, reviewing the Invalid Inputs & Error Handling Boundary & Edge Case Testing, checking how the API handles the extreme limits of allowed input ranges Authentication & Authorization Testing Contract and schema…
For this next project, we will be examining the test site Swagger Petstore - OpenAPI 3.0 at https://petstore3.swagger.io/https://petstore3.swagger.io/If we wanted to really dive deep into creating API documentation, we could use:I'dRatherBeWriting's Free Documenting APIs course, showing an Introduction to REST APIs, using APIs like a developer, Documenting API endpoints, the Open API spec, Testing API docs, Publishing API docs, and more... ... But that goes too deep for this blog post. Before we begin, let's get into some background information. What is Swagger?According to OpenAPISpec.com's…
For this next project, we will be examining the test site Swagger Petstore - OpenAPI 3.0 at https://petstore3.swagger.io/ https://petstore3.swagger.io/ If we wanted to really dive deep into creating API documentation, we could use: I'dRatherBeWriting's Free Documenting APIs course, showing an Introduction to REST APIs, using APIs like a developer, Documenting API endpoints, the Open API spec, Testing API docs, Publishing API docs, and more... ... But that goes too deep for this blog post. Before we begin, let's get into some background information. What is Swagger? According to…
You may have noticed that in the GitLab CI / CD Pipeline for our Playwright project, in the .gitlab-ci.yml file, after our scripts has run, in the Test stage, there is a subsection called "artifacts" with certain paths to something called "playwright-report", "test-results", and "reports". The Playwright -> Artifacts -> Reports stageplaywright: extends: .bun_playwright stage: test timeout: 30 minutes...... artifacts: when: always paths: - playwright-report/ - test-results/ - reports/ reports: junit: reports/junit/results.xml expire_in: 30…
We've added a lot to our demo project, bun--create-playwright. We've explored setting up a Playwright framework using bun, a new package manager bundled into Claude Code. We've added typechecking, and formatting and linting. We've set up a CI/ CD pipeline for our tests using GitLab, one with three stages: Quality: We check that the formatting, linting and typechecking is correct for any changes we attempt to push to the code base.Test: We run the smoke and then the regression tests to make sure that everything still works. Report: We bundle an archive of the Playwright generated HTML report,…
We've added a lot to our demo project, bun--create-playwright. We've explored setting up a Playwright framework using bun, a new package manager bundled into Claude Code. We've added typechecking, and formatting and linting. We've set up a CI/ CD pipeline for our tests using GitLab, one with three stages: Quality: We check that the formatting, linting and typechecking is correct for any changes we attempt to push to the code base. Test: We run the smoke and then the regression tests to make sure that everything still works. Report: We bundle an archive of the Playwright generated HTML report,…
You may have noticed that in the GitLab CI / CD Pipeline for our Playwright project, in the .gitlab-ci.yml file, after our scripts has run, in the Test stage, there is a subsection called "artifacts" with certain paths to something called "playwright-report", "test-results", and "reports". The Playwright -> Artifacts -> Reports stage playwright: extends: .bun_playwright stage: test timeout: 30 minutes ... ... artifacts: when: always paths: - playwright-report/ - test-results/ - reports/ reports: junit: reports/junit/results.xml expire_in: 30 days…
Developers need the option to test out their feature branch before merging it into main. In the last section, we set up a GitLab CI/CD Pipeline in our bun-create-playwright project to check every GitLab Merge Request. Now, we will be giving developers option to create a new pipeline where they can choose:Which feature branch to test against.Which test suite to execute (LoginPage tests? Secure Area? Or all of them?)Which Playwright browser to use: Chromium, Firefox, WebKit, or all.All these features can be set up using our .gitlab-ci.yaml file!Go to to bun-create-playwright, view the Pipelines…
Developers need the option to test out their feature branch before merging it into main. In the last section, we set up a GitLab CI/CD Pipeline in our bun-create-playwright project to check every GitLab Merge Request. Now, we will be giving developers option to create a new pipeline where they can choose: Which feature branch to test against. Which test suite to execute (LoginPage tests? Secure Area? Or all of them?) Which Playwright browser to use: Chromium, Firefox, WebKit, or all. All these features can be set up using our .gitlab-ci.yaml file! Go to to bun-create-playwright, view the…
So far, we have reviewed how to review code with ES Lint + Prettier and Typecheck, how to set up and run smoke tests, how to run all Playwright + TypeScript tests, and reviewed the HTML report of results.In this post, we are going to set up a three stage GitLab CI/ CD pipeline that will run against every merge request: Quality (lint, typecheck, prettier) --> Test ( smoke + regression ) --> Report ( Downloadable )I haven't used GitLab since when I worked at ThreatStack back in 2020. ( See my blog entry Getting to Know GitLab and How They Test the UI )GitLab reads .gitlab-ci.yml from the…
We covered in the last blog post how to install bun, a new package manager. In this blog post, we will look into using bun to install a new Playwright framework. Create the Playwright FrameworkOnce I installed bun on my Windows PC and was up and running I created a new folder, "bun-create-playwright".I opened up that folder in VS Code, along with a new PowerShell terminal. In that terminal I entered:bun create playwright This activated the interactive Playwright installer that Playwright comes with. I selected I wanted it to create for me a TypeScript project, placing the tests in the default…
Now that we have installed bun, Anthropic's package manager, and scaffolded a Playwright framework and closely examined the results, we are going to explore with our Bun-Create-Playwright project ways to check if our code is correct. The first method we will be exploring is typechecking. Why Typechecking? As the Playwright.dev / Node.js Introduction mentions:"[...] Playwright does not check the types and will run tests even if there are non-critical TypeScript compilation errors. We recommend you run TypeScript compiler alongside Playwright."[...] Note that Playwright only supports the…
Now that we've installed bun, Anthropic's package manager, scaffolded a Playwright framework and closely examined the results, and added typechecking with TypeScript's compiler, it's time to add ways to check the code with lint, and reformat the code with prettier. We will be using:ESLint, as the static-analysis tool to review the code without running it. Little bits of fluff -- like syntax errors, structural bugs, anti-patterns, and code style violations -- can collect on your code, so it helps to run a linter to help catch it all, such as ESLint. There is also a linter,…
Finding the best locator for a web element can be a hassle:Right clicking on an element in Google Chrome. Inspecting the element. Going to Chrome Developer Tools. Try to decide what to do if there isn't a clear test id. Playwright comes with a built in code generator where it can built out a rough draft of a test while you interact with a website. "Playwright will look at your page and figure out the best locator, prioritizing role, text and test id locators. If the generator finds multiple elements matching the locator, it will improve the locator to make it resilient that uniquely identify…
When we installed bun, a new package manager owned by Anthropic, then ran "bun create playwright", a new automation framework was stood up, along with sample tests, and a Playwright configuration file. In this post, we will be examining the file generated: playwright.config.ts. Personally, I find the pre-generated file very hard to scan... there are so many options and documentation in the comments, it is difficult for me to focus on the code. Let's examine just the code generated below. If you need to see the whole file, you can see it here:…
Read at the source
Your visit, your choice.
Optional Google Analytics helps us understand visits. Microsoft Clarity records masked interactions to improve the site. Optional tools stay off unless you choose them. Privacy details.