Modern Creator
Paul Grossman · YouTube

Let's Create a Playwright Template Project

A test automation architect live-builds a reusable Playwright + TypeScript testing framework from scratch, narrating every AI-assisted decision along the way.

Posted
4 days ago
Duration
Format
Views
9
Big Idea

The argument in one line.

A production-ready Playwright test automation template can be assembled from scratch in under an hour by pairing a human architect's structural judgment with two different AI coding assistants used for two different jobs — planning versus execution.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…
  • You're a QA engineer or SDET who wants a reusable Playwright + TypeScript starter project instead of rebuilding boilerplate on every new job or contract.
  • You're curious how to split AI-assisted coding work between a planning assistant (Copilot Chat) and an execution assistant (Claude Code) on the same real project.
  • You're prepping for a technical or QA interview and want a model for pre-building a login-flow automation answer before you're ever asked for one.
  • You're comparing automation testing tools or frameworks and want a practitioner's plain-English rundown of tradeoffs (Playwright vs. Selenium waits, SpecFlow/Cucumber's extra layer, cross-browser scope creep).
SKIP IF…
  • You want a finished, downloadable template repo — this is a live working session with dead ends, typos, and real-time debugging, not a polished tutorial.
  • You need coverage of browsers beyond Chromium, or mobile/cross-browser testing — the whole session deliberately stays Chromium-only while the framework is being built.
  • You're looking for Selenium- or Cypress-specific instruction — the hands-on work is entirely Playwright; other tools only come up in comparison.
TL;DR

The full version, fast.

A veteran test automation architect, currently job-hunting, live-streams building a Playwright + TypeScript automation template from zero — boilerplate he'd rather not rebuild every time a new job starts. He uses GitHub Copilot Chat to plan the setup steps (npm init, tsconfig, Allure reporting, Pino logging) and Claude Code to execute folder structure, page objects, and a login test against a public demo site. He monkey-patches Playwright's fill() and click() methods so every automated action logs itself with masked passwords and a green on-screen flash, then clones the finished project into an interview-ready copy via find-and-replace. A long tangent tours his own tool-comparison site and a public practice site (CandyMapper) built specifically for stress-testing automation frameworks.

Free for members

Chat with this breakdown — free.

Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.

Create a free account →
Chapters

Where the time goes.

00:0005:42

01 · Cold open: today's challenge

Paul introduces himself as a test automation architect currently job-hunting, plugs his LinkedIn, and sets today's goal: build a reusable Playwright + TypeScript automation template that can log in and out of a public demo site — the single most common ask in automation interviews.

05:4216:46

02 · Scaffolding via Copilot's plan

Follows a step list from GitHub Copilot Chat: creates the project folder, runs npm init, installs Playwright with TypeScript, and edits the generated tsconfig.json. Detours to find VS Code's auto-save setting.

16:4628:50

03 · Allure reporting + logger, then hands off to Claude Code

Installs Allure as the test reporter and picks Pino as the logger. Switches to Claude Code and asks it to scaffold the folder structure — source, page objects, wrappers, and tests directories — approving each proposed edit and bash command.

28:5039:52

04 · Config review and a CLAUDE.md naming-convention doc

Reviews the generated playwright.config.ts (headless:false, Chromium-only project, Allure reporter, video/screenshot/trace only on failure). Objects to vague locator names like 'username', writes a rules file for naming conventions, then discovers the standard convention is CLAUDE.md at the project root and renames it there.

39:5244:10

05 · Building the login page object

Builds the LoginPage page object model — username field, password field, login button locators — against the automationintesting.online admin login demo, renaming ambiguous fields like 'username' to 'username_field' per the new rules file.

44:1055:01

06 · Writing the test and getting a first pass

Writes login.spec.ts, wires npm scripts for Playwright and Allure, trims the browser matrix from Chromium/Firefox/WebKit down to Chromium-only, points the base URL at the target site, passes credentials via CLI flags, and adds slow-mo so the headed browser is actually visible on screen.

55:011:02:47

07 · A reusable prompt, and a live audience joins

Asks Copilot to generate a single reusable prompt that reproduces the whole template setup from scratch. A viewer, blackeyemoody, joins chat asking which AI he's using and whether he counts as 'a programmer' — leading into a detour on 25 years of automation-engineering experience vs. AI-assisted 'vibe coding', and the three-layer automation framework (test scripts, page objects, support utilities) versus the extra Gherkin layer SpecFlow/Cucumber frameworks add.

1:02:471:19:49

08 · Tool comparison tour and the CandyMapper challenge

Tours his own site cataloguing dozens of automation tools (AccelQ, BugBug, Functionize, Autonomiq, and more) alongside a personal feature checklist covering basic-vs-advanced OS/browser coverage and framework support. Then demos candymapper.com, a Halloween-themed site he built specifically to stress-test tools with a fixed 8-step challenge: a blocking modal, an off-screen dropdown option, a forced multi-second load delay, and deliberately bad color contrast for accessibility testing.

1:19:491:36:35

09 · The rest of the feature checklist

Continues through element types, identify-by attributes (id, name, data-qa), the four kinds of waits (hardcoded sleep, implicit, explicit, fluid), headless-vs-headed tradeoffs, smoke/sanity/regression test organization, flaky-test retries, and treating any tool that shows a plaintext password during recording as disqualified.

1:36:351:49:16

10 · Cloning the template and monkey-patching fill()

Copies the finished template into a fresh 'interview' folder and does a project-wide find-and-replace to rename it. Back in the code, monkey-patches Playwright's fill() method so every automated field entry logs a description of the action to the console, with password values masked.

1:49:162:01:30

11 · Extending click() and polishing the run

Applies the same monkey-patch treatment to click(), adds a brief green on-screen flash so a human watching a headed run can see exactly what's being clicked, and tries — without success — to get the AI to reliably center the popped-up browser window on the correct monitor from a screenshot of his desktop layout.

2:01:302:04:00

12 · Sign-off

Wraps the two-hour stream as his dog Willow interrupts wanting attention; thanks the handful of live viewers and signs off.

Atomic Insights

Lines worth screenshotting.

  • A standard UI automation framework has three layers — test scripts, page objects, and support utilities — while Gherkin/SpecFlow frameworks add a fourth feature-file layer that costs more to build and maintain.
  • Automation engineers who use GitHub for version control are, by that fact alone, developers — not a separate lesser category from software engineers.
  • The single most common request in an automation interview is a basic login-and-logout flow, which makes it worth pre-building before you ever walk into the room.
  • Password fields should never display their plaintext value during an automated test recording — treat any tool that shows the password as typed as a disqualifying red flag.
  • Test suites should be organized into smoke (roughly the first 10% of the app), sanity (the next 20%), and regression (everything else that has passed before).
  • Tests marked work-in-progress but still left running will read as real failures and cause false alarms — exclude WIP tests from the run entirely instead of ignoring their red X.
  • Ballooning cross-browser coverage from Chrome-only to Chrome, Edge, Safari, and three versions back roughly triples the maintenance burden without a proportional gain in real coverage.
  • Hard-coded sleep waits are the first thing an experienced automation architect looks for, and rejects, when reviewing someone else's test project.
  • A CI/CD pipeline that automatically reruns a failed test once, and lets a pass on the second try stand, is correctly treating a transient glitch as noise rather than a real bug.
  • Monkey-patching a library's built-in fill() and click() methods lets every test action self-document with a console log line, with zero changes required in any file that calls them.
  • Custom data attributes like data-qa are worth requesting from developers because, unlike CSS classes or auto-generated IDs, teams tend to treat them as a stable contract they won't casually break.
  • Don't automate a date-picker widget by clicking through its calendar UI — if the input field accepts typed text, just type the date directly instead.
  • A transient on-screen "Toast" pop-up that vanishes in about five seconds can still be validated after the fact by capturing it into an array the moment it appears.
Takeaway

Build Your Test Framework Once, Reuse It Forever

FRAMEWORK SETUP LESSONS

A reusable Playwright test template comes from disciplined choices made once — page objects, config review, naming conventions, and tool-evaluation habits — not from any single clever line of code.

02Scaffolding via Copilot's plan
  • Before writing any test code, ask an AI planning assistant to lay out the setup steps as a checklist — it surfaces decisions (JavaScript vs. TypeScript, which test-runner config) you'd otherwise make by accident.
  • Turn on your editor's auto-save immediately when starting a new project; hunting for that setting mid-session wastes more time than the setting itself saves.
03Allure reporting + logger, then hands off to Claude Code
  • Pick a structured logger (here, Pino) over ad hoc console.log calls from day one — retrofitting logging into an existing test suite is far more painful than starting with it.
  • A second AI tool can be handed the mechanical work of generating folder structure and boilerplate while a first tool is used for higher-level planning — split the work by strength rather than using one tool for everything.
04Config review and a CLAUDE.md naming-convention doc
  • Review AI-generated config files line by line instead of accepting them wholesale — this session's TypeScript config initially had settings the presenter didn't understand or want.
  • Writing your naming and coding conventions into a project rules file (CLAUDE.md at the project root, for Claude Code) up front stops an AI assistant from repeating avoidable mistakes for the rest of the session.
05Building the login page object
  • A page object model centralizes every selector for one screen in a single file, so the rest of the test suite never has to know how that screen is actually built.
  • Vague locator names like 'username' should be renamed to something explicit like 'username_field' — small naming discipline early prevents ambiguity once the page object grows.
06Writing the test and getting a first pass
  • Trim your browser matrix to a single browser while building the framework itself — chasing cross-browser parity before the core framework works just multiplies debugging surface for no benefit yet.
  • Credentials belong in environment variables or CLI flags passed at run time, not hard-coded into the test file — worth the habit even in a demo project.
  • If a headed test run isn't visibly appearing, add a slow-mo delay before assuming the automation itself is broken — sometimes the browser window is just opening and closing too fast to see.
07A reusable prompt, and a live audience joins
  • Once a framework works, ask the AI to reverse-engineer a single reusable prompt that reproduces the whole setup — that prompt becomes the reusable asset, not just the code.
  • A standard UI automation framework has three layers (test scripts, page objects, support utilities); Gherkin/SpecFlow-style frameworks add a fourth feature-file layer that increases both data handling and maintenance overhead.
  • Experience mostly changes what you know to ask an AI for and when to catch it missing something, not whether you use AI at all — a beginner and a 25-year veteran can both 'vibe code', but only one knows what's missing from the output.
08Tool comparison tour and the CandyMapper challenge
  • When comparing automation tools, run the same fixed benchmark task against each one so the comparison is apples-to-apples instead of anecdotal.
  • A deliberately bad-contrast color scheme is a legitimate, low-cost way to build an internal test target for accessibility and color-blindness tooling.
  • Build test targets with realistic annoyances on purpose — an off-screen dropdown option, a blocking modal, a forced load delay — because production apps have all three.
09The rest of the feature checklist
  • Prefer developer-owned custom attributes (e.g. data-qa) for locating elements over CSS classes or generated IDs — teams are far less likely to casually change an attribute added specifically for testing.
  • Never automate a date-picker widget by clicking through its calendar UI if the input field will accept a typed date string — it's slower and more brittle for no benefit.
  • Know the difference between a hard-coded sleep, an implicit wait, an explicit wait, and a fluid wait before a technical interview — it's a common basic screening question.
  • Treat any paid automation tool that displays a plaintext password while recording a script as disqualified — it's a fast, simple filter for weak tools.
10Cloning the template and monkey-patching fill()
  • Clone a finished template into a project-specific copy via a single global find-and-replace of the template's name — faster than rebuilding structure by hand for every new context.
  • Monkey-patching a library's core methods (Playwright's fill()) means every test file that calls it automatically gets the new logging behavior, with zero per-call changes required elsewhere in the suite.
11Extending click() and polishing the run
  • A brief visual flash on the element being clicked makes a headed test run far easier for a human to follow in real time, at negligible cost to add.
  • Not every polish request is worth finishing live — the presenter tried and failed to get an AI to reliably center a browser window on a specific monitor, and moved on rather than burning more time on a cosmetic detail.
Glossary

Terms worth knowing.

Page Object Model (POM)
A design pattern where every selector and interaction for one screen (e.g. a login form) lives in a single dedicated file, so test scripts never touch raw selectors directly.
Monkey patch
Modifying or extending a library's existing function at runtime (here, Playwright's fill() and click()) so every caller gets the new behavior automatically, without editing each call site.
Headless
Running a browser automation script without a visible browser window. Faster, but you can't watch what the script is actually doing as it runs.
Allure report
A test reporting tool that turns raw pass/fail results into a browsable HTML dashboard with history, trends, and screenshots attached to failures.
SpecFlow / Gherkin
A testing approach where test cases are written as plain-English 'Given/When/Then' feature files, which then call automation code underneath — adding a translation layer on top of a standard framework.
Flaky test / retry
A test that fails intermittently for reasons unrelated to a real bug (network blips, timing). CI pipelines commonly rerun a failed test once before treating the failure as genuine.
Trace (Playwright)
A recorded timeline of a test run — DOM snapshots, network calls, console logs — that can be replayed step by step to debug a failure after the fact.
data-qa attribute
A custom HTML attribute developers add solely so automated tests have a stable way to find an element, independent of CSS classes or IDs that change for styling reasons.
Smoke / sanity / regression testing
Three tiers of test coverage run in increasing depth: smoke checks the most critical ~10% of the app works at all, sanity checks the next layer, and regression re-runs everything that has passed before.
Implicit / explicit / fluid wait
Three strategies for telling automated code to pause for an element to appear: implicit sets one global timeout for everything, explicit waits for one specific condition, and fluid polls repeatedly with custom timing and ignored exceptions.
Resources

Things they pointed at.

00:20linklinkedin.com/in/pmgrossman
05:00toolRESTful Booker Platform (Ministry of Testing)
10:00toolGitHub Copilot Chat
28:50toolClaude Code
16:46toolAllure Report
16:46toolPino (logger)
1:02:47linkdarkartswizard.com
1:19:49linkcandymapper.com
1:32:30toolSauce Labs / BrowserStack / GitLab CI
Quotables

Lines you could clip.

05:00
The most common thing somebody wants you to do is log in somewhere... I can definitely put together an automation framework that would type in Admin and the super secret password.
states the entire session's premise in one lineIG reel cold open↗ Tweet quote
1:01:40
We are all programmers. We're all developers. If you're using GitHub and I'm using GitHub and you're a developer and I'm a software test automation engineer, we're still developers.
a punchy reframe of the QA-vs-developer status debateTikTok hook↗ Tweet quote
1:21:40
This site is intentionally in bad colors... if you have a tool that is able to go and analyze your website to see if it is following the rules for accessibility, you can test it against this site.
a concrete, testable definition of accessibility testing most viewers have never seen demoednewsletter pull-quote↗ Tweet quote
1:27:30
If you don't know those three [waits] and you're on an interview, they probably will not hire you.
a blunt, high-stakes interview tip stated as a flat ruleIG reel cold open↗ Tweet quote
1:31:00
If I'm paying for this, I should not see my password when I am recording the script... that used to be one of my — and it still is one of my — litmus tests for an automation tool.
a sharp, specific vendor-evaluation rule stated as a personal standardnewsletter pull-quote↗ Tweet quote
The Script

Word for word.

Read-along

Don't just watch it. Burn it in.

See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.

00:09Check. Check. Check.
00:16Hey, everybody. It's Paul Grossman, the dark arts wizard of Codeless AI automation, and I'm going live today, uh, around, uh, 10:00, my time, Chicago Standard Time.
00:29Uh, just a reminder, I am looking for my new job. And, uh, if you are happen to be hiring and looking for a test automation architect who has got crazy interest in any automation tool that's out there, please, uh, consider looking for me.
00:49In fact, I can show you, uh, a little bit about, uh, about myself. I'm on LinkedIn. So, uh, I'm gonna go add this to my stage.
01:01There's there's our challenge for today, and I'll tell you a little bit about what we want to do, uh, with that. So, uh, LinkedIn, just to let you know since I should do this, linkedin.com/inslash, uh, pmgrossman.
01:19That is gonna be me. That's me over there. There's all the cool stuff that I do and been doing and working on for forever and doing little links and videos and all sorts of cool stuff.
01:30So and there's the live right there. We are actually live. Alright.
01:36So if you by the way, you can chat with me.
01:41Just hit up the chat, and we can definitely take a look at whatever you want to talk about. So today, I think what we're going to do, I'm gonna go copy this.
01:54We're gonna close this out and relaunch it and see if we get it back over here. I'm gonna go over to cloud. No.
02:01I want Chrome, and we'll go pick up Chrome over here. And there we go.
02:10That's what I want. And we're gonna make it nice and big over there.
02:15Alright. So what is the challenge today? So as I said, I've been looking for a position, a job somewhere.
02:22And the thing you gotta do before you're interviewing for any these things is you gotta prep. You gotta go do your due diligence. Like, if you know the name of the person you're gonna be automate talking to, uh, and hopefully automating with later, uh, you should look them up on LinkedIn, see what you, uh, can find out about them, uh, any common interests that you may or have.
02:43And, um, that's one thing. The other thing I do is I try what I would call predictive analysis. If you get enough interviews, you realize you get some of the same questions over and over again.
02:55And the biggest challenge I have is trying to have something prepped and ready so that I can jump and start off and go and do whatever it is that I need to do. Usually, the most common thing that somebody wants you to do, uh, is to log in somewhere.
03:13They might give you a URL, but you can't guess that. But I can definitely guess, definitely put together an automation framework that would, you know, type in, let's say, Admin and the super secret password.
03:25And by the way, this is from Ministry of Test. So this is a test site called the rest for Restful Booker platform.
03:35It allows you to log in. This will not appear on the automation. It's just telling me that Admin and password are probably not good, safe, secure passwords to be using.
03:45So, uh, it gives you a site that you can actually go and add, uh, rooms to. And then once those rooms are created now we're not gonna do all this deep in here, but it is kinda cool just to let you know. This will take you over to the the shady acres BNB, and you can add rooms.
04:03You can have custom amounts of money, and then you can, uh, it has interactive, uh, ability with almost every most common, uh, field that you're going to find, radio buttons and checkboxes and, um, and a couple of different pages there and and a calendar that you can work with.
04:23And you can do validations of what's on there and then take a look at details and and stuff. This is this is really cool. The, uh, the important thing is you should be able to log in to that project and then kinda log back out again.
04:38So that's what our challenge is. I wanna wanna set up a basic Selenium Playwright JavaScript TypeScript, I should say, TypeScript project in order to build a framework like this that is available to me so I can go and pull it up and say, okay.
04:57Where do you wanna go today? And, of course, what I also wanna do is the the problem with this, this is the most challenging thing is how often do we actually set up an automation project? Almost never.
05:09It's the first thing first, you know, when the project starts and then you're not doing it again day by day for the next three to five years. And then you have to try and remember, what did I do and go through?
05:20So I figured I would do a live session and see if I can how quickly I can get this going over here. It is now currently 10:05, and I'm gonna try and see how long it takes me to to get this done.
05:35So starting at 10:05 is gonna be our starting point. And what we want to do is I I actually wanted to ask Copilot some of the ideas of what I should do, and there's an alarm telling me I should have this little, uh, little session over here.
05:51So I've got Copilot over here, and, um, I was asking a bunch of questions.
05:57But the first thing was, can you put together for me, uh, first of all, what kind of automation frameworks are out there, uh, for Playwright? And it, um, it was, uh, interesting because the the reason I asked that is because there are more than one, um, Playwright test runners, uh, configurations.
06:19Everybody's got a different version of of doing this. So I said, what are the three most common setups for a Playwright JavaScript?
06:28And you know what? It should have been TypeScript. I actually wanna say TypeScript.
06:32So, uh, I'm asking a good question over here, JavaScript TypeScript. Uh, so I'm gonna say at the bottom, let's build so that there you go.
06:48You already have two different types. You got a JavaScript and a and a and a TypeScript, and the TypeScript would be the one you'd wanna be going through. That's that's the one I'm prepping for.
06:57A TypeScript project Playwright project instead.
07:09Alright. So I kinda walked through everything.
07:14So we're gonna do this. This is a clean, modern, professional play with everything that's all set up that I wanted to do. And my mouse is excuse me for coughing here.
07:29My I I think I have hit something on my mouse.
07:36I hope that is my mouse has decided to act extremely weird.
07:45I'm not touching the mouse, and it's going off on all sorts of different directions.
07:51I'm not even having it.
07:55Okay. It just decided to freak out.
07:59Now it's back. Hopefully, that doesn't happen. So let's go back over to, I don't know why it's scrolled all the way up, but I will put on the force this over here.
08:15So here's all of our steps that we're gonna need to do to set this up from step one.
08:23First thing, it says, create a project folder. So, uh, we're gonna call this. This is our project folder name, and we need to go over to the project.
08:36So I'm gonna it says do this. I'm gonna make directory. I'm gonna say I wanna do it slightly different.
08:43I'm gonna go over to there's my repo directory. I'm just gonna do a new folder over here and call it that. So bada bing.
08:53Alright? Here's a little trick that I do. I'll right click on this and say open in terminal.
09:00And now I've got the terminal opened over here and it went right to my project.
09:06So I don't need to c d over this. I just basically skipped over this part here and I just made this already.
09:14So step two, we want to initialize this project. So we're going to go and get node to initialize this.
09:22Alright. First of all, I wanna do node dash version and see what it gets.
09:28Should come back and say, hey, I'm version 23. Cool. Uh, we are gonna go and this yield.
09:37Right? It says here, NPM should be run outside of Node. Js REPL in your normal shell.
09:45Control d to exit. Control d. Alright.
09:48Let's try it again. Control d. Let's clear that out one more time.
09:56We are going to do in it. There we go.
10:01Alright. So I created our first thing, which was our Java package, uh, our JSON package for this project and what it's named and bay just the basic stuff that's out there.
10:13Alright. Step three, we're gonna go install the tooling. So we'll go first put this in here.
10:21Okay. And that's gonna install the Playwright with the TypeScript language and connect everything in, and it has added 24 packages.
10:33And that is cool. Uh, I don't believe it's setting 24 packages. Let's go look at it.
10:37Well, it did open the create the node modules. So we are good there.
10:42Good to start. Alright.
10:47Next is we're going to install Playwright. Step three, four, kinda.
10:57So, uh, now Playwright has been installed. It really didn't respond with anything. I'm not sure if I trust that.
11:05Uh, then we're gonna go create a TypeScript config file.
11:10So we'll punch that in over there. Alright. We created this.
11:15There's our TypeScript config file. Let's see what it looks like. It says software up there.
11:23No. I just want you to update the file. Thank you.
11:27Show me the file. Alright.
11:32I don't need that updated, but it is telling me let's see. Can I get a little bit bigger here?
11:39Yes. I can. Okay.
11:42It says there's a syntax error in here. Well, let's take a peek. Maybe this messed up.
11:50Let's see where some compiler filters, looking for source files, distros, and we have a couple of modules.
12:00Our target is whatever the current version of of ES next that is ES is ECMAScript that is kind of the versioning of JavaScript because, you know, I should say it.
12:18It's not the version of JavaScript. It's the versioning of TypeScript out there. So it is doing ES next.
12:24So we don't know what it is. I presume it's gonna be ES twenty twenty five or twenty twenty six, uh, and setting up for all sorts of other nodes and stuff.
12:35So this is set up over here, but it seems to think that there's a problem in there. I don't trust that.
12:41So we're gonna go, uh, this is our JSON headers. All that stuff is good. So we're gonna have to take a look at that and see what's gonna go on.
12:51Uh, next, uh, spot. Okay. Oh, we need to modify this.
12:56Alright. Uh, I'll go modify that file. Um, then we'll go and edit.
13:04Open with what should we open it with? Poly Visual Studio Code. So at this point, since I'm here, we'll show you another little shortcut.
13:12What I'm gonna do is I'm gonna open a Visual Studio Code and go directly into this folder over here. So I'm gonna say code. Uh, let me try just code itself, which should open.
13:23It was code dot period. I read somewhere that code you don't need the period anymore.
13:28You can just say code and code will just pop up on your screen right where you're at. So guess what?
13:36It kinda did it. Right there. Alright.
13:40And there's, um, no. Code just opens up the last project you had open.
13:44Alright. Forget you. Let's do it again.
13:47Code this here. I'll go grab the, uh, window as soon as it pops up and bring it down over here.
13:56I love learning things on the fly. So there we go. It opened it up, and there is our project all ready to go.
14:05Uh, there's our config, our node modules. Everything is set up.
14:11The config file, I believe we said we wanted to change that, and it says, why don't you change this to this guy to include this? Alright.
14:21So why are we one thing I don't like about using AI is that it doesn't tell you why. It's saying, hey.
14:28Just do this and then put this stuff in there. And I'm not sure if it's how it if it's see, it's they got a whole bunch of stuff in there.
14:39So we're looking for compiler options all the way down to include.
14:45I mean, this all looks good. Does it want me to replace it? Where's our include source?
14:54Compiler.
14:58I think I'm just gonna take the internals of this and edit.
15:06Sure if I wanna replace it.
15:10There's our modules and everything. Output source. I guess we're just saying reduce it down to this.
15:16So we'll reduce it down. I will paste that in there. Alright.
15:20We have that. And by the way, another thing you wanna do is turn on auto save. Let me see if auto save is turned on here.
15:27If I go and do the palette, which I believe is control alt p up here. Maybe it probably doesn't remember.
15:36Shift alt p.
15:39Definitely not Windows alt p. Control p. Control palette.
15:44I want the actual palette up here. Let's do palette.
15:55Seriously? You're making me look dumb live. Stop it.
16:06We want that that pellet control p. That is not command palette that I am looking for.
16:16These are not the command palettes we're looking for. Alright.
16:23Save. There's an auto save that's over here. Let's see if I can find the selection for it.
16:35As I said, you only do it once, and then you kinda forget exactly how to do it.
16:44And, you know, that's the reason why you have, like, things like Copilot sitting around. What is the shortcut for the Versus code palette.
17:02Control shift p. Alright. Thought I did that.
17:05Control. Oh, it's Control shift P. I had the alt in there.
17:09Alright. Let's try that again over here. Control shift p.
17:14That's what I'm looking for. Now under this, there is gonna be a a save.
17:19I'm gonna say auto save and save all files, save as, save without formatting.
17:26We want our auto save.
17:36Do that again. Control z. Type something in there it did not like.
17:42Auto save.
17:46And I want to see about, let's see.
17:56I really should write that one down because that is good because it's taking me too long to do this. Alright.
18:09I know it's in the palette.
18:20File save. Yeah. The pallet is pallet is huge.
18:28And I may have to give up on that. We're gonna give up on that.
18:33We're gonna go on to our next step.
18:39Alright. Seems like a lot of steps we're doing over here. I wanna get it done in ten minutes, and I don't know if I'm even close to that now.
18:46Alright. So I've installed this. We changed all this.
18:51We opened this up. We made that swap. This next step is we're going to install Allure reporting.
18:57We want Allure as our reporter. And since we have already opened up Visual Studio Code, we might as well go and open up new terminal.
19:10And now we can do the exact same things that we're doing in the in the in this terminal as we could do over here. So we'll do that.
19:19And in fact, it has the memory. There's the launch of Visual Studio Code. Alright.
19:24So I'm gonna go install Allure over here and let it do its thing.
19:31K. That is now added in. And there's a logger.
19:37I have never used Pinot or Winston as a logger, so fast and modern.
19:47I like fast and modern. Let's go put in Pinot. This is my first time playing with that.
19:54So it's edit Pinot. If we look under here, we probably have Pinot listed there.
20:00There's Pinot, Pinot, Pinot, whole bunch of stuff for Pinot. Awesome. Under our node modules.
20:05All these node modules have been brought in. And then we have to do set up the folder structure. Well alright.
20:15So, um, I'm gonna go and copy this and ask the AI to go and set that folder structure up with me because dang it, it's faster.
20:28So here I've got Claude code, and I can also open a chat view chat.
20:40And so there's Cloud Code or chat.
20:44So I've got to get you two different ways of doing all this.
20:50There we go. Cloud Code is open. Can you see which one of these actually has the capability to to do this?
20:59Set up this folder structure.
21:04And if not, I will just freaking do it myself.
21:11Alright. Well, I would do a third. I wanna see if, uh, Playwright can do this.
21:17I'm sorry. Playwright, if Claude can do it. And if not, I'm gonna go see if we can do it with Claude.
21:25So that's Claude code over there.
21:31So and this is I guess, it's essentially the same thing.
21:39Let's go take a look at our folder structure and see if anything fun is happening over there.
21:48Allow to write. Yes. Allow all edits during this session.
21:51So see what he's doing over there. He's noodling this.
22:00We should get some folder structures underneath source. There we are.
22:07Look at that. And then we've got source and wrappers and tests, all that cool stuff and wrappers.
22:14And it also set up all the fold of file structures for us. How do I allow this bash command? Absolutely.
22:22Go ahead. Do whatever you want. I don't care.
22:26There's our basic, uh, login spec, and I think that is gonna get modified.
22:36That's a, uh, pulling in from a login page. Let's go take a look at our pages.
22:43Oh, there's our login page where it's pulling from the page object model. Allow this branch. We're gonna go execute this.
22:51Alright. Cool. Edit automatically.
22:55Alright. Kinda building it up for us. And let's go back over here and take a look.
23:06Alright. Then we have to create the Playwright config file. Well, I'll go playwright.
23:10Let's take a look at what that is. So we're importing Playwright. We're defining where the tests are located at.
23:18The kind of reporter we're using, we're using Allure for Playwright. And, uh, it says headless. I don't want it to be headless.
23:26I want it to be false. Our viewport is how big the, um, browser will be, and our videos will only record on the first retry.
23:35If the first run fails, then we're gonna record video on the second. Uh, screenshots only on failure and trace retain on failure. Alright.
23:45And our projects over here is we're just gonna launch Chromium. We're not we're not gonna do multiple browsers at this.
23:53Alright. So, uh, I'm gonna go do that, create a Playwright config TS.
23:59There is a Playwright config t s already in there. I'll hit let's see. Do you wanna allow this batch thing?
24:05Yes. Should tell it to to do that. Of course, what's it doing?
24:12I don't know. But once it's done, I'm gonna ask it to please give me a review of what you had done.
24:23And in fact, if I read some of this, had to update this, uh, the installed type, uh, TypeScript seven removed node 10, which broke the type check, switched to node next, and edit the skim.
24:41K? The demos, uh, lectures and base URL. So it's going to this is the base URL it's going to over there.
24:49Let's go take a look at that. I know what that is. That's an old little interface.
24:58Here's RESTful Booker. This is kind of a boring little thing. Doesn't even have any CSS, um, but it does have a whole bunch of links to different things that you might encounter on the on that, and you've got a, let's say, add and remove elements.
25:17We can add an element. We can delete an element. So you could write automation scripts against this website that would interact with these things, selecting an option and letting it go.
25:29So it's a really cool just just to do a one on one, uh, automation scripts.
25:36I think there is a login here if I take a look. E f g h I j k. I don't I thought there was a login in here, but I don't have time to go looking for that.
25:46Let's go see. Most common thing I've got over here is that the process does the process does not get set up correctly.
25:55It's like every time I set that up, process is always wrong. It is bringing in all this.
26:03And you know what? I think this guy said, you know, forget doing that. You want to create this.
26:12You wanna use this instead. So I'm gonna go get rid of all the Playwright stuff that are already set up over here and pop that in there.
26:21Alright. Good to go. I'm not sure if I told it what the the, uh, URL is.
26:29So now let's see. We've got a logger module as an example. I'll take that.
26:34Let's go under source utilities. I don't see why I actually had to go and do this, but there's our logger t s.
26:43We will replace it with this. I think I'm actually kinda dumbing it down. I I don't know.
26:50And then we need a browser wrapper for for this guy. So we're gonna go to source and wrappers, and there's our browser wrapper.
27:01And we will punch that in there, which really dumbed it down. Let's let's see.
27:08Let's go back a second and see what it was actually doing. It's importing all of these different things, including Firefox WebKit. We don't need that.
27:18We're doing we're not doing Chromium, Firefox.
27:26And, of course, everybody has to have a secret code for their browser. Right? Alright.
27:32I believe that is Edge, if I'm not mistake. WebKit is Edge.
27:39Yeah. Why name it Edge?
27:41Why just let's use super secret codes down there. Alright. So it's got a thin wrapper around all of this.
27:47It's gonna go to a page. Uh, we're not gonna do all that. We are going to dumb it down a little bit, which is, hey.
27:54Just, uh, so it's over here, it's creating a version of click that you can extend.
28:01You can call it safe click. And that way, you can put in other features. I like it.
28:08It's okay. But I think I'm kinda comfortable enough I would just extend the click method itself and let it do its thing.
28:20I got save click. I don't I'm not really crazy about save click. I like click advanced, uh, mostly because if I have to re if I have to revert it somewhere in my actual code, I'd rather be taken off the end to make it work.
28:34And in this case, I'd have to change five characters. So, um, we're gonna make this click ADV over there to to do that.
28:47So should let the AI know I I changed that. Alright.
28:52So, uh, next thing is to go and set up the page objects. So it's got items for username, a password, a login.
29:01Let me see if it's actually login. Let's go back over to not the Internet.
29:05I wanna go back over to the admin over here. That's the, uh, automation testing online slash a d m I n.
29:16And it is this is flat up login. Alright. So let's go back over to our code over here, and we're gonna copy this as the login page.
29:28And we'll go back over here and punch that in. And all we're really doing is we're gonna execute a command called login, which is gonna go fill in the username and the password. Not sure where it's gonna get provided.
29:42We'll come up with that. Don't forget. The username object is this.
29:48Uh, so I like this is username. This is I do not like calling username and password not declaring what it is. The button yes.
29:57Now I know that this is a button, but username and password, I'm not crazy about. So what I would do is I would go and create a a rules a a rules folder.
30:14I need a rules MD file that ensures fields are named.
30:35So what I'm trying to say is username should be username field.
30:41Should be username dot underscore field.
30:50F I e l d. Did Paulie spell it right?
30:55Yep.
30:59Alright.
31:03So I'm gonna do that and let it think about it. I should get another file over here.
31:10Uh, I think it's gonna end up creating a folder called GitHub, and it's gonna put that in there.
31:19So I'll create a rules doc naming convention to apply it to the existing page instead of rules. So it set up a rules.
31:28Uh, I'm not sure that's actually the right way. And it's then it's gonna go and fix the code over here.
31:47Using a whole bunch of my tokens. You leave my tokens alone.
31:53Doing the frippity jibbery, and and there we go. It's it's renamed this. Allow this batch command.
32:01What is it doing? Echo exit. Sure.
32:06Alright. One of the things we wanted to do is make sure that play right over here where it says to run it headless.
32:13False. I want to see this. Alright.
32:17Cool. We do headless when we want some speed. So alright.
32:24I've got that. We're gonna allow the special command.
32:28Sure.
32:31It should just say always. Okay. It's chugging away.
32:38I know I had two different chats going on over here. Here's another AI chat.
32:44There we go. We had closed that out. Alright.
32:48Create a skill. We'll talk about skills later. I'll learn about that later.
32:54Alright. So so this is Claude code.
33:01I'm gonna ask a different version of it. Is Will Claude will rules dot m d ensure the coding standard?
33:23I thought it was something else. For Claude, thought it was Claude instructions.md.
33:49So now I use a different version of it. It's searching around, seeing if we can find what I'm talking about.
33:59So it's gonna go and see if I can find the I'm pretty sure it's Claude dash instructions from from what I remember.
34:12For most Claude works, the commonly recognized convention is claude.md at the root root. Not use okay.
34:19So alright.
34:22Alright. So we will go use claud m d at the root. So we will take this, and we will rename it c l a u d e.
34:35MD, it is at the root. Now let's go take a look root project rules. We have a bunch of rules in there.
34:42Let's go see.
34:46Okay. Cool.
34:49I like that. So now I got my rules set up, so it should not make any other mistakes like that.
34:57Cool. Close that puppy up. Alright.
35:01What's our next step? Uh, we had the page object done. Cool.
35:10And then we create the test. The test is a login spec. Login spec is sitting under tests, so we should have test login specs over here.
35:20And we are gonna go copy this, punch this and see what we get. So we are bringing in the test and expect for validations over there from Playwright test in the note from node.
35:35Login page is a source over here. Bring in the the login page for because we're gonna interact with it and a logger, then we're gonna see how that logs.
35:46We are gonna go to it says over here, it's going to local host or the base URL. So, uh, the process, uh, is gonna be basically, I'm I'm gonna end up and, uh, running this down here.
36:02I don't know what that thing is, but we'll, um, we'll do an NPM, and we will run that with a base URL.
36:14And off top of my head, I don't know it at the moment. But I'm pretty sure the next step is that oh, yeah. We need to set up the we need to add this to the JSON package.
36:24So we'll go to package and we'll add that.
36:32Do we have under let's see. It's scripts, playwright scripts under Allure.
36:38Do we have scripts? We do have scripts. So we are gonna take these guys, and we're going to punch them in.
36:49Alright. Cool.
36:53And, basically, go run the test. Now I'm not sure exactly where we're getting those credentials from.
37:03I don't think it's actually gonna go to where I think it's gonna go.
37:09Um, looks like it is trying to run all three. And as I said, I only need, uh, one of those.
37:18So I am gonna tell it to knock it off.
37:24We'll go look for WebKit. I don't need the three in there. So we'll go to WebKit.
37:36This looks like results that I found.
37:40These are also results. Don't need that over there.
37:51It says three failed. Well, of course, it did. Alright.
37:57So I'm gonna say remove fire Firefox and, uh, WebKit.
38:10What I want it to do So it's going to the Playwright config, and we'll go to the Playwright config.
38:29Playwright config over here. We should have gotten rid of all of those.
38:36We just have Chromium. Alright. That's cool.
38:40Let's try it one more time, see if we just get the one browser. You know it's gonna fail.
38:52I'll do my provide oh, the next thing is we need to do is go find the, uh, the URL.
39:02We need to tell where it's going. It should tell it that in the first place. Alright.
39:07I got a whole bunch of stuff in here, and the search probably needs to be limited to what I search for.
39:18URL is just huge over there. Alright.
39:26Okay. That's cool. Mining diamonds.
39:31Mining diamonds in the sky, blah blah blah. I used all my credits.
39:36I bought more. Wait for my $100 though. We'll run out.
39:43Okay.
39:49I'm gonna set the URL to go over to this one over here.
39:56We wanna go to the restful booker right here.
40:05It doesn't I mean, I don't like that it doesn't tell me what it's trying to do. If I go to the playwright config, playwright page.
40:17K. We'll get rid of this. We're gonna go to our page over here, and then we wanna go to what are we gonna everybody's just cramming in there, aren't you?
40:30Alright.
40:35I want to go to my folders, and I wanna go to my tests. Let's go over here. So he's going oh, he's saying go to this or the base URL.
40:47Alright. Well, this is not what we're gonna go to. We're gonna go right.
40:54So base URL.
41:00I think it's just base URL in the command, I think.
41:09I think it is base underscore URL equals.
41:17Right? Yeah. There you go.
41:22For a single command, blah blah blah. So I'll go copy that.
41:30Alright. And I copied everything in there so I can take the NPM out. Give this a run.
41:39See if it did it. Running one test, one one worker, and I'm still looking for my browser. And I don't see it at all.
41:52Alright. This is not entertaining enough for anyone to be watching. Uh, Alright.
41:58Cool. I can live with that. Uh, Alright.
42:03So we're gonna keep this. The base URL is this. And k.
42:16I'm not opening the browser.
42:23So once we get through this, I think what I'll do is I'll come up with a I'll ask the AI to provide a query.
42:31It's not the right term I'm looking for, but a way to build what we already have here. Say, okay. He is attempting to go and run it Chrome.
42:48Alright. I think I'm gonna try and close this out.
42:55I would like to close this out.
43:01Maybe I can't. It's probably sitting there right in front of my face. I can't do it.
43:13And what did I just do? What did Polly do? What did Polly do?
43:17Polly danced. Danced. I love Footloose.
43:23That was an awesome movie.
43:30I'm gonna run the whole thing. I saw it.
43:35I saw it pop up.
43:40Alright. Okay. That's good.
43:54What you doing? Ah, look at that. That's the way it should look.
43:59Alright.
44:02So it's sharing the browser with the agent on that. And so I think navigates resilience always lands on the admin page.
44:14So it's filling the credentials.
44:18Alright. It's doing everything for me. I'm having Andrew write a darn line of code.
44:25Alright. Now it did it. Cool.
44:30We'll keep all of that.
44:35And I believe we will just copy this.
44:47The CRL, I'm gonna say, Username is going to be admin.
45:08We'll pop it in there one more time. We'll say password is wait a second.
45:25Base URL equals Environment. Base URL environment.
45:32Base URL. That seems too long.
45:40Permit base username.
45:47No. Why not just username?
45:51Username, admin. Base URL, password.
46:00Password, not environment.
46:06Now fully. I don't see fully on that.
46:12But I can also this is a dedicated answer, like, test headed. No.
46:18That's okay.
46:23Do I pass in username admin and password Password.
46:39Password. Password. I said Password.
46:52K. It's been a while since I've done that.
46:58Conventional. So it's wiring it up.
47:11Keep alright. It's got all that. So I wired that up.
47:15Now I can do this. See how close I got.
47:20Probably not at all.
47:25Gosh. That seems weird, but okay.
47:34That seems really weird. That's like Why?
47:44Why? Why? That doesn't look right at all.
47:52In one line. That is not the way I normally see it.
48:01Okay. That's what I would see.
48:09Come on. Come back. CLS.
48:12Clear this out. Let's punch it in there. That's the way I want it.
48:17Alright. We're running a test. Let's see if the browser where it pops up, and it said it passed.
48:26It's our rooms. Okay. Why did you not pop up?
48:34Uh, I'm pretty sure we when we said run this to be headed, headless, headless equals false.
48:54Gonna try one more time. Maybe I was just freaking blind.
48:59I'm looking I'm looking.
49:06Think I saw it for a millisecond.
49:13How long did it take? It took five seconds to run.
49:20Sometimes you gotta slow it down, I suppose.
49:28Down the run so the browser can be seen.
49:38Unfortunately, I think I saw it at the top of the screen.
49:44Now when I do these demos, launch option, Slow mo 400.
49:52Look at that. Son of a monkey. It's right there.
49:55It did it.
49:59Alright.
50:06400 frames be between of them. 200. It was kind of slow.
50:11We'll do 200. So we can bump it to 800 or a thousand. Oh, no.
50:17I want it faster. That's fine. The next thing is the problem is the browser is at the top over here.
50:27And we move the browser.
50:34I I guess we've got what we want over here. Right? I think so.
50:41Yeah. Let's make it 800. So Paul has a chance to actually I'll make it a thousand.
50:46Poly has a chance to actually drag it onto the screen. Let's do that. Alright.
50:52How long did it take? That's fifty. That was five minutes.
50:55That's forty five minutes to do something very simple, and Poly did not go and grab the browser when it popped like this.
51:03There we go.
51:07Cool. Uh, so I would add highlight at this point.
51:13And look at this.
51:21Okay. We are at fifty one minutes, and nobody's watching.
51:27Nobody's watching. Alright.
51:30So we got the the viewport, everything all set up there. I think this is good for a basic approach, which is cool.
51:40So if I wanted so we're gonna ask it. Last thing I was gonna ask it is, first of all how much did I have over here?
51:55Give me a prompt that would build this template.
52:07Boom. And I didn't spell prompt correctly.
52:25Now what we really like to do is have this browser appear on my screen. K? And there's our prompt.
52:33Look at that. What a beautiful thing. Is this something you would like?
52:39Is this something that you would find interesting?
52:47So here is our prompt. Create a playwright script. Blah blah blah blah.
52:58That. I like it.
53:06Alright. How long did that take to actually run? It took seven seconds when I kicked up that that slow mo over here, so it could be seen.
53:16Alright. What else we wanna do? I think I want to save that off as a prompt.
53:23Let's go. Open up, I think, notepad.
53:32Go open up notepad.
53:40Okay. It's not responding. The reason is is because over the last few years, I've opened up a gazillion files and then not closed any of those files.
53:53So it sits there and now spends time opening up a gazillion files. So I'm going to take this prompt over here.
54:08And we're going to go zoom. You know what? If I zoom all the way out, you can't see it.
54:14I'm gonna go zoom all hey. I got somebody watching me. Look at this.
54:18Let me go take a and I've got comments too. I haven't seen them. Uh, 10:51.
54:24That was about a minute ago. That's Blakely. Blakely Moody.
54:26Hey, Blakely. Guess what? Uh, you're a programmer.
54:30Darn right. I'm a programmer, except my vibe coding right now.
54:36Which AI are you using? Uh, Blakely is asking me. Uh, essentially, it is, um, splitting kinda between Claude and Copilot.
54:44So I use Copilot since you joined a little late, uh, at the very beginning of the whole thing. I went over to Copilot and asked it to kinda put together a idea of how I could build a demo and build my automation framework.
55:00Uh, yes. I am a programmer. Uh, I've been doing this for about twenty five years.
55:05Uh, do keep in mind lately, all of us if you and a test automation engineer, all of us automation engineers are all programmers.
55:16Uh, that's the one thing that really kinda gets them. I I know AI is new. It's a new tool.
55:21The way I kinda look at it is it's the difference between gold miners who are out there with pickaxes and then suddenly the hydraulic, uh, jackhammer came along.
55:32And then they could just do their work. They get the same thing. They get to the gold.
55:36The thing is that they do it a lot faster. Uh, the difference between my vibe coating, because I've got twenty five years experience and I work in every freaking tool that's out there, and other tools out there, uh, are are, you know, younger kids who are just vibe coding because I've got the experience.
55:56I know what I'm looking for. I know when I'm missing something. I know when I ask for it to build a Claude file that has the instructions on how I wanted to write code and not write crappy code.
56:07I know to go look for that to add it in there. Uh, young kids who are just starting this, uh, they they don't know it, and they do need people like an automation architect to, you know, clue them into what's going on. And my mind wants to go back to that thing.
56:22We are all programmers. We're all developers.
56:25If you're using GitHub and I'm using GitHub and you're a developer and I'm a software test automation engineer, we're still developers because we're using GitHub. We are actually committing that over there.
56:37Black Eye Moody, I I thank you for that question. That is cool. If you got other stuff, um, I'm trying to think of what to do for my last ten or fifteen minutes.
56:47I appreciate you hanging out here. And, essentially, what I'm doing over here is I'm setting up a playwright and TypeScript automation template.
56:56So the idea is I can use this as my starting point in an interview. They say, you know, can you write this?
57:03Can you code that? And I will say, well, I've got a template. And then I would go down over to my template over here.
57:11Let me go pull this open and see if I can well, that doesn't do anything. I was hoping to make it bigger.
57:19So underneath my repos, I have all these different repos. Yes. I have got a ton of these, and they're all sitting up on GitHub out there.
57:29And each and one of these are something I go back to try and learn. Like, you you know that spec file isn't the thing anymore. It's been replaced by wreck and roll.
57:38Uh, and spec file is an automation framework using Gherkin and and that the problem I don't like about, uh, SpecFlow. There's two problems I'll say.
57:48Let me see if I remember both of them. Uh, one is the data and two is the the the layers of the automation framework. So if you're working in SpecFlow, Gherkin, that stuff, what you're trying to do is make an automation framework that has one extra layer than a standard automation framework.
58:07Framework a standard automation framework has three layers. It's your test scripts, which are calling your page object, uh, models.
58:14And then you have your support functions underneath to take care of anything that's kind of weird that's going on.
58:22That's, um, you know, let's say you try to enter something into a input field, and it doesn't actually execute. It doesn't take anything.
58:32So you have to write a custom function. It says when I enter, if I see this particular tag of field, then automatically kick in and enter key at the end of whatever I type, and everything else works fine. With a framework of a playwright I'm not playwright.
58:51With, like, a rock and roll or the the the the Cucumber framework, you have a test, uh, feature file, which is then calling the commands that say when given when then.
59:08And then that goes down to your page object model, then that goes down to your support utilities. So you're actually running for this is gonna take more time to support and build out than this than a, uh, three layer automation framework that's out there.
59:25I got a second person who is watching over here. I'm gonna take a look over here. I got someone watching from YouTube.
59:31I am broadcasting on YouTube. Uh, Should be on should be on LinkedIn, and I didn't I don't see it out there. It bugs me.
59:40I don't see oh, wait. I'm well, no. I should see, yeah, I should see LinkedIn.
59:44And, unfortunately, it's not it's not broadcasting on LinkedIn. This is actually it was, um, I I said I'd be coming up in ten minutes. So, anyway, whoever's watching me on LinkedIn, thank you very much.
59:54Uh, I'm sorry. LinkedIn on on on YouTube. Uh, my chats are open.
59:58So if you wanna chitchat, ask me question. Anything you want. I am currently looking for a job.
1:00:03I'm I'm unemployed after all these twenty five years. Well, I get unemployed every once in a while, but, uh, I have worked with a whole bunch of different, uh, people.
1:00:13I also wanted to show you something else that's kinda cool. Since you guys are watching here and you've been so nice to be sitting around, I'm gonna go back over to my browser for a moment, the restful booker over here, which I'm gonna go over here and you can see all of the tools that I play with, WWWDotDarkDarkArtsWizard.
1:00:34Dark arts wizard.
1:00:37And you may like, why why are you Voldemort? The hue shall not be named. Uh, that's a completely different joke.
1:00:48That, uh, personal joke that I have. Where did hey. Where'd they all go?
1:00:52There we are. Alright. So, uh, in case you're wondering, uh, these are all of the tools I've had an opportunity to go and touch my little finger on.
1:01:01Uh, I don't have a project for every single one of them, but I guarantee you each one of these guys, uh, this is could go to dark arts wizard. If you click on the link functionize, it'll take you right over to functionize.
1:01:14Um, if you go and take a look at autonomous, it'll take you over to Apple tools autonomous, blah blah blah.
1:01:23Right? And every tool that I can think of automation tool that's out there in some form or another, uh, is is out there.
1:01:31I bet you it's it's amazing if you to know that the how many how many of these things are out there. Uh, there's k test. This is classy test from my friend, my good friend.
1:01:42I got three people watching. Oh my gosh. Must be lunchtime.
1:01:45I don't know what's going on here. Three people. Uh, thank you very much, whoever's watching.
1:01:49By the way, just a reminder, I do have my comments going on. So if you want to chat with me and you see a comment over there, if you're don't see a chat or if you're chatting with me and you're not getting out there, seeing it up, you can find me on Facebook.
1:02:05You can find me on Twitter, dark arts wizard on sites. I said Twitter. I I did not mean Twitter.
1:02:11I'm not I am on Twitter over there on x. I meant to say Twitch. I am also on Twitch.
1:02:17I really should pop pop up these things. So, uh, do find me over at, uh, Facebook or Twitch, and you should be able ask me questions. At the very least, I do know that coming out of Twitch, you know, black eye moody can see there.
1:02:34He was asking some questions. He, she, I don't know. So hopefully, you like my fancy shirt.
1:02:40It's a kinda cool shirt. What was I saying? Let me get back to the point of this whole thing, which was these are all the tools I work with.
1:02:49And then over my years, and I did make this with Lovable, I did originally did it with a different different tool, but it seemed like that one would kinda went out of the face, uh, sim, uh, web sim, but I think web sim is kinda dead from what I can tell.
1:03:07Anyway, uh, these are the automation features and the basic and advanced things that I would expect an automation feature to do. Oh, I lost two of you. Oh my gosh.
1:03:17I lost two of you. Why? And only one person is sitting there.
1:03:20It's, uh, I'm gonna say it's Black Eye Moody. Alright. Thanks for hanging out here.
1:03:24Man, two of them left at the same time. Oh, that hurt. So yeah.
1:03:28So I've I've basically the the the the features I would like to see in an automation framework because I actually go and test them. I will compare them. If you look up Paul Grossman, the dark arts wizard on my YouTube channel, you'll see the comparisons I do between it's called the candy map challenge.
1:03:44I'll talk about that in a minute if you're interested enough. So the basics, I would expect an automation framework should be able to go and run against Windows on Chrome. It should be able to run on a Mac with Safari.
1:03:58I should expect it to be able to work with Firefox and and and the iOS iOS smartphone.
1:04:12So smart device out there.
1:04:16The the bonuses, if, uh, one of the things that I I have seen people do, uh, project managers or or high level CEO level people say, oh, now we've done all this automation on Chrome, but we need to make sure it works on Edge and Safari and three versions back.
1:04:33And it's it kind of balloons. You just now have this whole project that's this big.
1:04:38Now you ballooned it to this big and this big three times as much. Be careful of that because then you if you're the only if the the team didn't balloon to two or three or more people, then you're gonna be spending all your time trying to figure out why does it work on Chrome and not on Edge and and Safari was kinda weird.
1:04:55You don't wanna do that. You wanna be spending your time writing more test cases for more test coverage, clearly.
1:05:03Few other things, I've got the different frameworks. You know, your basic HTML. Uh, I know of one website that used to be basic HTML, and I worked on it for a little while.
1:05:14I'm gonna mention over here. It was Victoria's Secret. I worked on it for about six weeks.
1:05:19Uh, no shame there. I I I enjoyed it because it was a really easy website.
1:05:25Nowadays, you've got reactand.net. You should be able to do that. By the way, you can click on this.
1:05:30If you go to this website, you can set up your own your own, settings, uh, as you talk to, uh, people from different, uh, different things.
1:05:43Let me let me, uh, explain that a little bit more. Let me go back a little bit over here. So here's my automation tool.
1:05:48So if I was looking at Excel queue, I have these all set up. And I believe you can go to this website.
1:05:55You won't see any of these checked if I under if this is set up the way I think it is. I haven't tested that yet. I should have tested that.
1:06:01You should be able you should see clear, uh, items there. And then you can use this as a little cheat sheet that says, hey. Um, I'm comparing Excel to ExcelQ to Audify.
1:06:11I'm comparing it in autonomous. And as you switch between these two, you can keep, you know, check mark boxes and then you can say, okay.
1:06:21Uh, you guys pass. Uh, you do what I want. And then have your own little list that is the the what I need to have and what would be nice to have.
1:06:33As I said, websites can be created with react, .net, view, anglers, felt. I'm not sure where they are on the list anymore on the s tier list, uh, but I'm sure somebody has a video on that.
1:06:47Uh, basic actions, we should be able to do. Let's go back this up a little bit. Here's your here's your basic actions.
1:06:54You all should be able to go to a website, enter something, select something from a list, click a button, um, combine all that into a login, uh, do a file upload, clear a field, submit a form, which is the same as click a button, uh, hover over something to have it open a drop down, and then mouse over and click, uh, which is, uh, basically, if you you're trying to get the mouse to go over to click on something rather than, you know, expand.
1:07:22Uh, and also scroll into view. Scroll your stuff in to view to see that you actually are inter interacting with something. Um, I'm gonna be testing this a little bit on playwrights.
1:07:32The question is, uh, is an object that is that is out of the screen view, is it still considered visible?
1:07:44And I think there's different answers for that. So maybe another time later on, I will do I'll take a look at that. Hit the like and the follow and subscribe and all that stuff.
1:07:53As I said, if you wanna see some of the stuff that I do, you can go over to YouTube, Paul Grossman, the dark arts wizard over here.
1:08:03And this is all of the cool stuff. And there I am live saying, let's create a playwright template project, which I've just completed.
1:08:12That's cool. And then as I mentioned, there is what we call the candy mapper challenge. And these are all my videos, uh, where I have tried different tools, uh, to to build, uh, the candy mapper challenge.
1:08:28Now if you're an automation engineer and you wanna do something kinda quick, oh, I got three v video the visitors. Two people from YouTube, one from Twitch, still got black guy, uh, black guy Moody. Nobody's asking questions.
1:08:41Please ask questions because I'm just making up answers as I go along. Um, the point of this was that if you wanted to do a CandyMapper challenge, I own a website called candy mapper.
1:08:54In fact, I got I own more than one. We will go here, candymapper.com with the extra w.
1:09:02And this is what I tried to test with all the automation tools that I can get on with. At least, you know, in the first one you have the demo. And the demo demo time available to you if you're comparing coded versus codeless tools.
1:09:18So this is an eight step automation thing. Eight steps.
1:09:22How quickly can you create a script that runs successfully with just eight steps?
1:09:29And this is it. Number one, navigate over to candymapper.com. Number two, I've got this pop up, this modal dialogue that is in front.
1:09:38I need to close that. That's number two. Number three, I want to go over here and enter in my name, Paul.
1:09:45We'll do that. And that's number then number four, click the submit button. Number five is verify that I need to have a valid email address in there.
1:09:56K? Number six is to enter a valid email address. And when I say valid, just in format, it doesn't need to be yours.
1:10:02I don't collect them. I don't sell them. I don't do anything with them.
1:10:06So, uh, that's just my disclaimer out there. The candy mapper doesn't exist, and it doesn't provide any services. Number seven is to click the submit button again.
1:10:19And number eight, and it takes a little while, is to verify that we will get back to you within forty eight years. Yes. Forty eight years, we will get or kinda kinda slow at getting back to people.
1:10:32Uh, this is a Halloween app that, uh, we do nothing at all, uh, seven days a week unless it's Halloween, then we've got a twenty four hour fully staffed support line to help you find the candy at the best houses in your neighborhood. Uh, no.
1:10:49It doesn't really do that. Uh, it's just a site for testing out all sorts of different things that could be a challenge, like verifying that you see a random dollar value.
1:10:59Every time I refresh this, they'll give me a different random value. Verify that you have a so select Worcestershire.
1:11:10Well, these are all counties in England, and Worcestershire is at the very bottom, which means that list is off the screen when you go to try and, uh, uh, look for it.
1:11:24All sorts of cool stuff. And if you do actually try to go to launch CandyMapper, uh, it does take a little while for it to come up.
1:11:33It takes when I say a little while, it literally takes forever. This spinner will never go away.
1:11:40Also, this site is intentionally in bad colors. Uh, black and orange and white, all this is not a very good color scheme.
1:11:49It's intentionally done that. So if you're doing accessibility testing, people who have vision problems or people who are color blind, they should be able to see this. And if you have a tool that is able to go and analyze your website to see if it is, you know, the capability following the, uh, the rules for, uh, accessibility and and web c g a c.
1:12:15I'm not sure if that's exactly the the command over there. But, yeah, you can you can test it against this site.
1:12:22It will not change. It has been around since 2019.
1:12:29My wife actually came up with the name of it. I was just asked her, you know, I'm looking for a silly name for a a Halloween based website.
1:12:39And she said Candy Mapper. And I went, well, you don't just have the best one on your first try.
1:12:46Let me give a couple of other options. She's like, no. I like CandyMap.
1:12:49I like I do too. But that's that's why my my wife is my, uh, my best friend over here. She's so brilliant and fun, and I love everything that she does.
1:13:01I know she's on Twitch, I know Black Eye Moody, you are not my wife who's watching me at this moment. She does drop drop in every once in a while, see what I'm doing, see if I'm saying good things. Hopefully, I am.
1:13:13Uh, anyway, uh, that kinda completes everything else. Uh, black eye Moody, if you've got other questions about stuff, if you're looking to hire an automation architect who's just crazy about doing what I'm doing, I've been doing this you know, that's a big list, which means I've been doing this a very, very, very, very, very long time out there.
1:13:35Uh, and I'm always updating this list for for stuff. You can even take notes, um, on your products and compare them.
1:13:43So if you're like I said, if you pick out two two or three of these and you wanted to say, I I I got money to spend. I wanna compare these two or three. You put in your notes.
1:13:52You have your all your checkboxes. What else do I have over here? Different elements that you should be able to interact with.
1:13:59I expect you should be able to, uh, work with text characters, buttons, tables, sliders, scroll bars, and tooltips. Uh, a little bit more advanced, uh, random Toast, uh, pop up messages definitely would be something that's they're only up there for, like, five seconds.
1:14:14And, also, on each one of these, there's a little you can hover over the little eye over there and say, hey. We should be, uh, able to handle transient notifications even if they pop up and disappear.
1:14:26So that's one of the biggest challenge I've had in my career is, hey. Let's go capture that Toast message and verify that we saw what we saw.
1:14:36And the way I do that is I bake that into the click, uh, method. I also have a custom weight that is sitting there, and that's some kinda watches for the, uh, pop to pop up message.
1:14:51So if it comes up while we're waiting for a page to build, I will keep it in a little, uh, array, uh, off to the side. And then once a validation comes along, says validate the Toast pop up.
1:15:04First, it looks on the screen to see if there is a Toast pop up. And if it's not there, then it'll go down to the array and see, well, did we capture one? It wasn't there, and it just disappeared.
1:15:15We also see that it says here, uh, date pickers. Date pickers are cool.
1:15:21Uh, you kinda saw that on the restful the restful booker. This is a date kind of a date picker on on here.
1:15:32And the one thing they don't have is they don't have you can't actually just enter the date that you want. 99% of the the, uh, products that are out there, websites, actually will let you put in a date.
1:15:45And the one thing I do say is don't try to automate. This is red because I say don't try and automate a date picker. Just enter the freaking date into the input field.
1:15:56Other different, you know, external objects like Telerik has all sorts of different objects that are out there.
1:16:05And then identify elements, your basics, your tag ID, name, and placeholder. You should be able to identify an element with those and text.
1:16:14And and then if you're doing attributes, uh, advanced, uh, area labeled data QA, which is, you know, custom attribute that the developers promise they will never change.
1:16:25Uh, even if they change all of this stuff, it makes your maintenance a lot less, um, uh, lower. Uh, title and then substring matches of something either in text or one of the other attributes over there. I'm just talking and going on, uh, different kinds of weights.
1:16:40Of course, Solium has a dynamic weight, a not a dynamic weight. I let's try that again. Of course, Solium itself, and I know we're talking to awesome playwright.
1:16:50Selenium has a a hard well, you have a sleep, which is a hard coded weight, and then you have a implicit weight, an explicit weight, and a fluid weight.
1:17:02If you don't know those three and you're on an interview, uh, they probably will not hire you. I don't know.
1:17:09That's that's that's the kind of thing I ask for is to to know a little bit more about what your knowledge is on that. But I like to do a dynamic way.
1:17:19I don't like hard coded sleeps in there. In fact, it's the first thing I go looking for when I'm looking at automation project. You should also be able to wait for a spinner to go away, uh, wait for the network to be idle.
1:17:30Different ways you can do that. More advanced is, uh, waiting for the word loading to appear or the page state to be ready to go.
1:17:41As I mentioned, uh, toast toast message capture is up there. I think I've got that twice.
1:17:47I must have because I was just talking about it. Uh, and, uh, also to identify that there's a bad page build. This, what I mean over here let's see if I got it over here.
1:17:59Let's say if you attempt to log in and the page didn't go back to the login and it also didn't go log you in, it sat in some weird intermediate state with some weird goofy message. The point is the Internet is not 100% infallible.
1:18:16It will get a little glitchy. And if you log in and the page is kinda glitchy, what does the user do?
1:18:24They'll hit the refresh button. And then either you're back at the login and attempted again, or you're into the the system because they had a little glitchy thing and it didn't build the page, and then it's all back at you. So, uh, that's the advanced sort of things I'm looking for that automation framework should be.
1:18:41It shouldn't just stop and say, oh, I don't know where I'm at. Should have a chance to try and restart. My ultimate goal in my testing when I do this is to get to the endpoint.
1:18:52I wanna verify, yes, this still works. And I will give you maybe a notification that something weird happened. And, uh, usually, in most test cases, if you're in CICD, if you run a test and something glitchy happens, all the CICD does is it reruns the test.
1:19:09And if it cut through all all fine, then it was just a, uh, a small glitchy thing that came through, and it's all good because it passed the the first time. Uh, things to handle speed.
1:19:22Of course, running headless is great, but I like to see where the heck I'm going. That's why I don't like it when the build is automatically set to headless. I can't see it.
1:19:31It's just saying, trust me, bro. You test passed. I hate that.
1:19:35Uh, see, I see the organizations over here. You should be able to organize your test cases in a couple different ways, you know, your basic smoke, your sanity, and your regression.
1:19:46Smoke is your first 10% of the application. Sanity is the next 20% of the application, and regression is everything else that passed from the last from last run. You should be able to have a collection of test cases that are end to end test cases.
1:20:00You should have something that marks as work in progress. Don't run these because these are going to fail. And if you have a 100 test cases and five of them are, uh, work in progresses and they fail, people freak out.
1:20:10Oh my god. There's failures. They're not done yet.
1:20:14Okay? So don't run them. Uh, GitHub and TestMu all are good in, uh, being able to to run your test cases on and, of course, rerunning and fail.
1:20:24In advanced, you should be able to prioritize certain test cases.
1:20:28You should have a retry a retry of flaky detections. Uh, and then there's other, of course, systems out there of Sauce Labs, BrowserStack, and GitLab for running your CICD projects and having actions and environments.
1:20:46And something I don't have listed on there, I'm just thinking right now, having a vault where you can store data that's sensitive, like, you know, having the data that is, uh, the passwords and stuff like that, not having it in your project. Uh, let's see.
1:21:05Being able to do custom code interacting with your browser. This basically means adding the functionality that whatever tool you got didn't they don't have time to write. I've worked with a company like that, and it's it's it's good to have a the ability for you as the user be able to add some sort of functionality.
1:21:25I can give you an example of one of those. We had a customer who wanted to know that after they click the play button when the video is done 40%. Because at that point, if you watch 40 of the video, you would considered, uh, having watched all of the video.
1:21:41Nobody really knew that, but if you got that far, they're like, okay. I'm pretty sure you saw everything that's that in that training video. Reporting, him going out to, like, Allure, not there.
1:21:54Uh, historical trend, uh, dashboard, which Allure does have. Uh, test management and notifications like Slack and Teams for your reporting.
1:22:06The integration's there. Uh, security, uh, goes through how to do that.
1:22:11I'm not a security testing guy, so I don't really talk too much about this. The AI kinda generated all of this stuff here, but definitely looking for a masked password field is one thing that I always kinda look for.
1:22:25In fact, one of the elimination rules I have for, uh, comparing automation tools is if I'm paying for this, I should not see my password when I am recording the script.
1:22:39I know the password. I'm people who need to know it, they know it, but I don't need it being displayed in front of me as you typed it in.
1:22:49So that is that is if I, uh, that that used to be one of my and it still is one of my oh, it's a litmus test for an automation project, uh, tool. You go log in.
1:23:01Three, you know, four simple steps. And if I see my password, and I like using I I like using a website that will accept any password.
1:23:11And I like to put in there and say, okay.
1:23:16You just showed me my password as you just showed me my password being out there. And if it pops up, then it's like, uh, well, it's been nice talking to you.
1:23:25Move on. Speaking of moving on, like I said, I've got all these different things and, of course, the basic and advanced AI things that you could do, you know, natural language processing, which is, uh, when I click this button, it can interpret that.
1:23:41That's the important thing. Uh, I think I bored you to death, black eye. And we got oh, I got somebody else over here, but I'm not gonna put that up there because that's not a real sight.
1:23:55So, yeah, I'm not I'm not talking to the fragrant grapevine over there because all that guy does is, uh, post for some other site that you would think there'd be other sites trying to do that, and this is the only one that does it.
1:24:12So I'm not gonna talk to them. Alright. Uh, I think I have accomplished everything that I wanna do.
1:24:21The last thing I think I wanted to mention was I wanna take this template. And what I'm gonna do is I'm going to copy it And I well, I guess I'll I'll do a new folder, and we'll say playwright t s dash, and we're gonna call it what?
1:24:55The interview. We'll call it interview. Alright?
1:25:00Okay. So I'm gonna go over here and I think there's only one file I would have to change in all of this.
1:25:08Let's copy this and let's go back over to our repo, to our interview, and I'll go paste this.
1:25:18So now I'm pasting it. It's taking a little while because of all of the node directory folders that are in there.
1:25:25And I'm going to go see if I can open this. We'll go to playwright to my playwright config, and now I'm gonna go say, uh, do a new a new window.
1:25:42New window. There's our new window.
1:25:50You know what I'm gonna do? I'm gonna do it this way. I am gonna go from here.
1:25:56I'm gonna go open the terminal.
1:26:00There's my terminal. I'm gonna type in code, period.
1:26:05And then we're gonna get this Versus code except we're gonna be in the playwright TypeScript interview project over here.
1:26:15Alright? Now the only thing that I would have to do is do a search for I don't know why that's open.
1:26:24Now search for playwright dash t s dash template.
1:26:34Template. Template, p l a t e, and we are gonna go and replace that course with interview.
1:26:51K. And we will go and replace all.
1:26:56We just made 37 changes, and most of them are probably in the results folder.
1:27:04Okay. We'll do that. Alright.
1:27:09Now if I go and run this, let's bring this up to full screen.
1:27:17And now I've got my own custom version. So I could start fresh and then start doing a we'll do a new terminal.
1:27:25And we're gonna go and run this. That's the base here.
1:27:31Hey. Where's my history? You rat monkey.
1:27:39Where's my history?
1:27:42Because I was running all this. I've I've lost my whole history. That makes me mad.
1:27:48Come on.
1:27:51Do I have the other one open? Come on. That's not that.
1:27:57It's not what I want.
1:28:03We wanna go that is what I want, and I don't know why that is not in my history. I can't explain it.
1:28:11But, fortunately, I can copy and paste it. Now if I do this, I should get the exact same thing, and I do.
1:28:23Alright. And that said it passed. That's kinda cool.
1:28:29Now in my interview, I'll be they'd be asking me doing something other, um, on this.
1:28:35So if I were to go to my Playwright package, uh, config TypeScript, that's my config.
1:28:43I want my tests over here.
1:28:48And we have the admin username and password baked into that. We definitely mentioned we don't actually do that.
1:28:57We go to our URL. Now so I mentioned, uh, when we go to log in, go to definition.
1:29:08So we're doing this fill. And what I wanna do next is I want to have the fill just describe what it's doing.
1:29:22So I'm gonna say extend fill to describe the action.
1:29:37Entered, uh, user into username field.
1:29:56Let's try that.
1:30:00So I'm gonna see if we can build an external, uh, extension on this to actually write out stuff.
1:30:08This is monkey monkey testing. Another term for it.
1:30:18Uh, let's see.
1:30:22Alright. So it's gonna do this login and have this in here, and then it's running it.
1:30:36And I'm not quite, uh, I'm not crazy about the way it's doing this. It's basically saying it's going to enter this in here, and I I don't wanna do that.
1:30:46I'm gonna say undo. Yes, please.
1:30:51I want to extend the bill function.
1:31:21So it created fill with description, and it's now using fill with description.
1:31:31I'm gonna undo that. That I do not want to create a new function.
1:31:49Want to extend the fill command globally to add more functionality.
1:32:08Try it. Try that.
1:32:30Yeah. So now we're gonna do a patch to extend the fill. Alright.
1:32:38So we're gonna extend that.
1:32:47Reading the types. Interesting. Cool stuff to try and add.
1:32:58So we're doing a monkey patch. That's the term we needed. New is monkey something.
1:33:04Monkey patch.
1:33:07K. So we are passing this in.
1:33:33Not sure why I need to add this. I would definitely like to have this just say one k.
1:33:43K. I am going to keep this.
1:33:49I guess we're gonna keep that.
1:33:55And then wait. Wait. Wait.
1:33:56Wait. Wait. It says user and yeah.
1:33:58Username. It was so the user in the past is being put in.
1:34:03A mask value goes through field name.
1:34:15Not sure why lines thirty one and thirty two needed to be revised.
1:34:28So I don't like that it's adding more stuff here.
1:34:36It should just have the exact same things except it's gonna spit it out. They were optional for functionality but necessary for readability and the safety of the stuff output.
1:34:49Okay. Well, we're gonna we're gonna undo that one, but we're gonna keep the rest. Alright.
1:34:55So if I give this a run, let's see what we get. Hope I'm entertaining you, black eye Moody. And, of course, it just popped up here.
1:35:08And does it say what it is doing?
1:35:15K? It did not. So I'm not happy with with this.
1:35:22Not happy at all.
1:35:28And my dog's having a nightmare downstairs.
1:35:37The monkey patch should console log.
1:35:51Cancel log.
1:36:02K. I get this instead.
1:36:14It's currently adding test steps, not terminal console outputs. Update the global fill patch to omit console log entries. Active, but only wrapping a step.
1:36:26So I confirm that. So now that they extend fill.
1:36:31Cool.
1:36:34And there is our browser there. Cool.
1:36:43And now I will try it over here. Bring that in. Alright.
1:36:55And look at that.
1:36:59It did that. And by the way, it also there's ways exactly what I was saying is that you should be able to do the mass the password.
1:37:11So I like that.
1:37:19Alright. If I go search for where that is, entered.
1:37:38Not sure why I'm oh, there.
1:37:43So that's our results. This is here it is. Keep.
1:37:50I like that. Entered something into this target. So when I do that, I prefer to have it in quotes.
1:38:00So we'll have that in quotes, and we'll have this in quotes. Cool. Now we've done that.
1:38:10We'll give that another run.
1:38:14And now we're console logging that we're entering this stuff in here.
1:38:20Cool.
1:38:24Let's do the same for click. I want to know what the click is. Now I could do that from over here, but why spend my tickets?
1:38:34My my we're gonna do we're gonna do an export. I think we're gonna do I just copy everything here.
1:38:48Paste that in, and we're gonna say install expected click.
1:38:57Alright.
1:39:00This is click extended. This is the original click. This is click.
1:39:06As blah blah blah. Okay.
1:39:13And then entered. This is gonna be clicked, and we don't need this display value at all.
1:39:27Original click over here. And that is kinda done.
1:39:37This guy is saying, hey. I don't see what that is. So let's see.
1:39:42Force new option out. Field name. I don't need the field name.
1:39:48I need the button name. Target equals see, native options, Bill, I don't think I need that.
1:40:05So could spend an hour looking at the stuff.
1:40:14K. Click doesn't have native options.
1:40:21So we don't do no native options. We'll take those out.
1:40:30Take those out. Display value.
1:40:34This is we'll do that. So we're gonna take the field name, except field name is actually gonna be button name.
1:40:48Button name. Button name.
1:40:52Alright.
1:40:55And I don't think we're going to be needing we just have this, and that's all.
1:41:09Well, this So what's wrong with this? We need the fill name.
1:41:20Click. Click.
1:41:23Find fill. Let's feed fill. There are no options there.
1:41:36So this is gonna be click.
1:41:43There you go. That's the way I want it.
1:41:49Guess I don't need this and I don't need this.
1:41:59We need to get the button name.
1:42:09Cancel. Button name equals this. I don't think I have a display value that I need.
1:42:16And what's wrong with this? Original click, all this.
1:42:26Display value.
1:42:31Add that in there. And I think we got almost everything except this ain't right.
1:42:42So let's fix that.
1:42:49Can't believe, like iMoody, you're still watching.
1:42:57Alright.
1:43:02Well, at some point, I give up and say fix the install extended click to show the button being clicked.
1:43:26Alright. Kinda cool.
1:43:36So it's gonna go fill, fix that item.
1:43:45Oh, so it's called extend fill. I think we want to extend yeah.
1:44:01So let's go ask this.
1:44:07Should we have separate files for each extension?
1:44:17Or or one common extension file.
1:44:33K. I'm gonna keep all this and see if we get that click.
1:44:49And it says click roll button login. Awesome. Alright.
1:44:56So let's go ask that question. You're now in ask mode, I believe. Yeah.
1:45:26One file. Alright.
1:45:31Then I think we're gonna go move these.
1:45:49Move the click out of the bill and create a new extend click file.
1:46:13Alright. So we kinda got that. The other thing is I noticed that when I clicked on this, it doesn't have a highlight, and I'd like to see a highlight.
1:46:31It's not quite a highlight. The flash.
1:46:46So let's go take a look at our files, The utilities, we have a logger, browser, and a oh, we gotta see where the logger what how we see the logger.
1:46:58We have test results.
1:47:06Allure results.
1:47:12What else we got?
1:47:25I would do this for two hours.
1:47:37So you got the extend click right here.
1:47:49I used to think outside. Did they not put it in?
1:48:07Oh, shoot. I'm still in ass mode.
1:48:12Please do it. Waste freaking tokens on that.
1:48:36There we go.
1:48:40Oh, keep all that. Uh-oh.
1:48:45Keep all that. Keep all that.
1:48:51And we are in fixtures. Cool.
1:48:57So we added these extended features. We put them through fixtures, and we did the wrappers and the logger.
1:49:06Now rename extend fill for symmetry. I I don't think so.
1:49:15I think it's fine.
1:49:23Clear and extend locator fill to do with click naming.
1:49:29No. It's fine. K.
1:49:43And a highlight called flash.
1:49:54And flash, it will be called in the click.
1:50:04It must be try catch.
1:50:15So it never fails.
1:50:24Do documents.
1:50:28Do console log.
1:50:34If the element was not found.
1:50:45A flash should be two hundred milliseconds.
1:51:09Alright. Let's go see where the flash goes. We're putting in a flash.
1:51:15Still got one person watching.
1:51:25Probably should have some music on. Well, he towers in. He said put some music on, man.
1:51:56Alright. I've got that added. I don't like this music.
1:52:21I'd say it's kinda loud and annoying for me.
1:52:36I don't think I can add the music on. I can't listen to it at the same time. Alright.
1:52:45So our logger, we extend this, click. Alright. Let's go see if this now highlights the click.
1:52:56There it is. Alright.
1:53:01Let's go search for flash.
1:53:15And what's our color?
1:53:19Oh, it should be green. I like green.
1:53:40Let's go change this to green.
1:53:44There we go.
1:53:49Like that. Let's give one more run.
1:54:01Now there's one more thing I wanna do. It's it's it's been popping up on the screen at the top.
1:54:11We open the browser centered.
1:54:21We'll do that because it is popping up on my top screen. I don't really want that.
1:54:40Alright. See if that pops up centered. I'll try and drag it down.
1:54:46Yeah.
1:54:49Okay.
1:54:52Cool.
1:55:33I have two monitors.
1:55:42You know what? I guess I could show the picture. Picture.
1:55:44Maybe I could do that. Let's go show it a picture. Personalized display settings.
1:56:02I'm gonna go grab a picture of this. I'm gonna go paste it in here. So essentially, this is what my display looks like and it's popping up up here and we wanna put it on display one.
1:56:19As in the image.
1:56:29Link the browser to open or move to the center of display one.
1:57:04See how you figure that one out, buddy.
1:57:11Still got one person just watching and no chat.
1:57:22K. I will allow this.
1:57:39Keep that. See what it does. Give it another run.
1:58:04Okay. Let's take a look at that file.
1:58:09Window size.
1:58:13Window size.
1:58:28A twelve sixty. I think I want it at three and zero.
1:58:38Let's try that.
1:58:42Bring it up into the left. That did not do anything.
1:59:03Alright.
1:59:11I'll give it another run. Give it another picture.
1:59:16Now take a picture.
1:59:24Here we go.
1:59:48Spell it again. Alright. See if we can get it to be centered.
2:00:03It's thinking about it.
2:00:09It's thinking a little home.
2:00:24Alright.
2:00:31Running.
2:00:34Cool. Let's see what it did.
2:00:46It's still fixing it.
2:01:00Nope.
2:01:06Tiny run time adjustment global and to recenter it.
2:01:13Same position.
2:01:28If I can make it think deeper.
2:01:51Try it again.
2:01:56Right centered.
2:02:00And I wanna stop my two hour recording.
2:02:32How you doing?
2:02:35I got I got visitors here. Y'all wanna see my visitors? Take a look at my visitors.
2:02:42This is Willow. Oh, Willow, and she likes to lick me.
2:02:48She's like, daddy, you've been up there for two hours. Please knock it off. Like, okay.
2:02:57Do you wanna say hi to the people? Come on. Show me your face.
2:03:01Show your face. Yes. Yes.
2:03:05Alright. Yes. I'll let you out.
2:03:07Just give me a minute.
2:03:10Alright.
2:03:13We'll try that one more time.
2:03:29Alright. Alright. Stop.
2:03:31Meaty you you are such meaty. Ow. You scratched my arm.
2:03:37know what? I think we're gonna call this for a minute and see if I can fix that later because my dogs definitely need me. Alright, everybody.
2:03:46Hope you have a good day. Cheers.
Frameworks

Named ideas worth stealing.

1:01:00model

Three-Layer Automation Framework

  1. Test scripts
  2. Page Object Models
  3. Support/utility functions

A standard UI automation framework separates what a test does (scripts), how it finds and interacts with the page (page objects), and how it handles edge-case quirks like a field that silently rejects input (support utilities). Gherkin/SpecFlow-style frameworks add a fourth feature-file layer on top, which increases both data handling and maintenance cost.

Steal forany team building a maintainable UI test suite, regardless of whether the tool is Playwright, Selenium, or Cypress
1:03:20list

Automation Framework Feature Checklist

  1. OS/Browser coverage
  2. Framework support (React, .NET, Vue, Angular)
  3. Basic actions (click, select, hover, upload)
  4. Element identification (id, name, data-qa)
  5. Wait strategies
  6. Reporting & CI/CD integration
  7. Security (masked passwords)

The personal checklist Paul uses to evaluate any automation tool before adopting it, split into basic and advanced tiers for each category.

Steal fora structured rubric for vendor-comparing any test automation or codeless testing tool
1:20:20list

CandyMapper 8-Step Challenge

  1. Navigate to the site
  2. Close the blocking modal
  3. Enter a name
  4. Click submit
  5. See the email-required validation
  6. Enter a valid-format email
  7. Click submit again
  8. Verify the confirmation message

A fixed, repeatable 8-step benchmark task Paul runs against every automation tool he evaluates, deliberately including an off-screen dropdown option, a forced load delay, and low-contrast colors as edge cases.

Steal fora lightweight, apples-to-apples benchmark for trialing any new test-automation or codeless tool before committing to it
1:26:40list

Selenium's Four Wait Types

  1. Hard-coded sleep
  2. Implicit wait
  3. Explicit wait
  4. Fluid wait

The four ways automated code can pause for an element to become ready, in increasing order of sophistication. Paul treats not knowing these as an automatic red flag in a technical interview.

Steal fora fast interview self-check before a QA/SDET technical screen
CTA Breakdown

How they asked for the click.

VERBAL ASK
00:20link
I am looking for my new job. And, uh, if you are happen to be hiring... please, uh, consider looking for me.

Delivered as a casual personal aside at the very top of the stream and referenced lightly again near the end — not a hard sell, no paid product or link-in-bio push, just a job-search plug woven into the technical content.

Storyboard

Visual structure at a glance.

open
hookopen00:00
scaffold project
valuescaffold project10:36
install Allure + logger
valueinstall Allure + logger16:46
folder structure
valuefolder structure28:50
login page + demo site
valuelogin page + demo site44:10
reusable prompt / audience joins
valuereusable prompt / audience joins56:34
tool comparison tour
valuetool comparison tour1:02:47
feature checklist
valuefeature checklist1:19:49
monkey-patch fill()
valuemonkey-patch fill()1:36:35
final review / sign-off
ctafinal review / sign-off2:01:30
Frame Gallery

Visual moments.

Chat about this