diff --git a/404.html b/404.html index 9703ba819b7..27f29eca85e 100644 --- a/404.html +++ b/404.html @@ -5,6 +5,12 @@ ---
-

404: Page not found

-

Sorry, we've misplaced that URL or it's pointing to something that doesn't exist. Head back home to try finding it again.

+

404: Page not found - Tudalen heb ei ddarganfod

+

+ Sorry, we've misplaced that URL or it's pointing to something that doesn't + exist. Head back home to try finding it + again.
+
Mae'r URL ar goll! + Ewch nol i'r hafan i drio eto. +

diff --git a/CNAME b/CNAME index 77c1018ca7d..fdaf251b5b3 100644 --- a/CNAME +++ b/CNAME @@ -1 +1 @@ -hyde.getpoole.com \ No newline at end of file +testiotech.com \ No newline at end of file diff --git a/_config.yml b/_config.yml index 3e2f2432dd5..f70376e413b 100644 --- a/_config.yml +++ b/_config.yml @@ -4,18 +4,18 @@ highlighter: pygments # Permalinks permalink: pretty -relative_permalinks: true +# relative_permalinks: true # Setup -title: Hyde -tagline: 'A Jekyll theme' -description: 'A brazen two-column Jekyll theme that pairs a prominent sidebar with uncomplicated content. Made by @mdo.' -url: http://hyde.getpoole.com -baseurl: / +title: Testio Tech +tagline: 'A blog related to software testing' +description: 'Welcome to my blog related to software testing.' +url: https://dp2020-dev.github.io +baseurl: author: - name: 'Mark Otto' - url: https://twitter.com/mdo + name: 'Daniel Phillips' + url: www.linkedin.com/in/daniel-phillips-ba99161b8 paginate: 5 @@ -23,4 +23,4 @@ paginate: 5 version: 2.1.0 github: - repo: https://github.com/poole/hyde + repo: https://github.com/dp2020-dev/dp2020-dev.github.io diff --git a/_includes/head.html b/_includes/head.html index e2b070e242a..a995084e60c 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -15,9 +15,9 @@ - - - + + + diff --git a/_includes/sidebar.html b/_includes/sidebar.html index 586f47b2d74..9b2bd728679 100644 --- a/_includes/sidebar.html +++ b/_includes/sidebar.html @@ -10,7 +10,7 @@

diff --git a/_layouts/default.html b/_layouts/default.html index c99f6e636a2..ec7f447b802 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -10,6 +10,11 @@
{{ content }}
+ + + + + diff --git a/_layouts/page.html b/_layouts/page.html index 4e0d4ebf09e..dcfe33aa4d5 100644 --- a/_layouts/page.html +++ b/_layouts/page.html @@ -5,4 +5,12 @@

{{ page.title }}

{{ content }} + + + +
diff --git a/_layouts/post.html b/_layouts/post.html index 2a6c7c1d9d3..04fda691d41 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -8,18 +8,43 @@

{{ page.title }}

{{ content }} + +

Related Posts

+ + + +
diff --git a/_posts/2012-02-06-whats-jekyll.md b/_posts/2012-02-06-whats-jekyll.md deleted file mode 100644 index a6d28b59212..00000000000 --- a/_posts/2012-02-06-whats-jekyll.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -layout: post -title: What's Jekyll? ---- - -[Jekyll](http://jekyllrb.com) is a static site generator, an open-source tool for creating simple yet powerful websites of all shapes and sizes. From [the project's readme](https://github.com/mojombo/jekyll/blob/master/README.markdown): - - > Jekyll is a simple, blog aware, static site generator. It takes a template directory [...] and spits out a complete, static website suitable for serving with Apache or your favorite web server. This is also the engine behind GitHub Pages, which you can use to host your project’s page or blog right here from GitHub. - -It's an immensely useful tool and one we encourage you to use here with Hyde. - -Find out more by [visiting the project on GitHub](https://github.com/mojombo/jekyll). \ No newline at end of file diff --git a/_posts/2012-02-07-example-content.md b/_posts/2012-02-07-example-content.md deleted file mode 100644 index 7dc8108543b..00000000000 --- a/_posts/2012-02-07-example-content.md +++ /dev/null @@ -1,138 +0,0 @@ ---- -layout: post -title: Example content ---- - - -
- Howdy! This is an example blog post that shows several types of HTML content supported in this theme. -
- -Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. *Aenean eu leo quam.* Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. - -> Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit. - -Etiam porta **sem malesuada magna** mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. - -## Inline HTML elements - -HTML defines a long list of available inline tags, a complete list of which can be found on the [Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/HTML/Element). - -- **To bold text**, use ``. -- *To italicize text*, use ``. -- Abbreviations, like HTML should use ``, with an optional `title` attribute for the full phrase. -- Citations, like — Mark otto, should use ``. -- Deleted text should use `` and inserted text should use ``. -- Superscript text uses `` and subscript text uses ``. - -Most of these elements are styled by browsers with few modifications on our part. - -## Heading - -Vivamus sagittis lacus vel augue rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. - -### Code - -Cum sociis natoque penatibus et magnis dis `code element` montes, nascetur ridiculus mus. - -{% highlight js %} -// Example can be run directly in your JavaScript console - -// Create a function that takes two arguments and returns the sum of those arguments -var adder = new Function("a", "b", "return a + b"); - -// Call the function -adder(2, 6); -// > 8 -{% endhighlight %} - -Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa. - -### Gists via GitHub Pages - -Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo. Donec sed odio dui. - -{% gist 5555251 gist.md %} - -Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper. - -### Lists - -Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. - -* Praesent commodo cursus magna, vel scelerisque nisl consectetur et. -* Donec id elit non mi porta gravida at eget metus. -* Nulla vitae elit libero, a pharetra augue. - -Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. - -1. Vestibulum id ligula porta felis euismod semper. -2. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. -3. Maecenas sed diam eget risus varius blandit sit amet non magna. - -Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. - -
-
HyperText Markup Language (HTML)
-
The language used to describe and define the content of a Web page
- -
Cascading Style Sheets (CSS)
-
Used to describe the appearance of Web content
- -
JavaScript (JS)
-
The programming language used to build advanced Web sites and applications
-
- -Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. - -### Images - -Quisque consequat sapien eget quam rhoncus, sit amet laoreet diam tempus. Aliquam aliquam metus erat, a pulvinar turpis suscipit at. - -![placeholder](http://placehold.it/800x400 "Large example image") -![placeholder](http://placehold.it/400x200 "Medium example image") -![placeholder](http://placehold.it/200x200 "Small example image") - -### Tables - -Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameUpvotesDownvotes
Totals2123
Alice1011
Bob43
Charlie79
- -Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. - ------ - -Want to see something else added? Open an issue. diff --git a/_posts/2013-12-28-introducing-hyde.md b/_posts/2013-12-28-introducing-hyde.md deleted file mode 100644 index 98e8a0c446d..00000000000 --- a/_posts/2013-12-28-introducing-hyde.md +++ /dev/null @@ -1,37 +0,0 @@ ---- -layout: post -title: Introducing Hyde ---- - -Hyde is a brazen two-column [Jekyll](http://jekyllrb.com) theme that pairs a prominent sidebar with uncomplicated content. It's based on [Poole](http://getpoole.com), the Jekyll butler. - -### Built on Poole - -Poole is the Jekyll Butler, serving as an upstanding and effective foundation for Jekyll themes by [@mdo](https://twitter.com/mdo). Poole, and every theme built on it (like Hyde here) includes the following: - -* Complete Jekyll setup included (layouts, config, [404](/404), [RSS feed](/atom.xml), posts, and [example page](/about)) -* Mobile friendly design and development -* Easily scalable text and component sizing with `rem` units in the CSS -* Support for a wide gamut of HTML elements -* Related posts (time-based, because Jekyll) below each post -* Syntax highlighting, courtesy Pygments (the Python-based code snippet highlighter) - -### Hyde features - -In addition to the features of Poole, Hyde adds the following: - -* Sidebar includes support for textual modules and a dynamically generated navigation with active link support -* Two orientations for content and sidebar, default (left sidebar) and [reverse](https://github.com/poole/lanyon#reverse-layout) (right sidebar), available via `` classes -* [Eight optional color schemes](https://github.com/poole/hyde#themes), available via `` classes - -[Head to the readme](https://github.com/poole/hyde#readme) to learn more. - -### Browser support - -Hyde is by preference a forward-thinking project. In addition to the latest versions of Chrome, Safari (mobile and desktop), and Firefox, it is only compatible with Internet Explorer 9 and above. - -### Download - -Hyde is developed on and hosted with GitHub. Head to the GitHub repository for downloads, bug reports, and features requests. - -Thanks! diff --git a/_posts/2023-10-28-compare-cypress-playwright.md b/_posts/2023-10-28-compare-cypress-playwright.md new file mode 100644 index 00000000000..8a6767a04ac --- /dev/null +++ b/_posts/2023-10-28-compare-cypress-playwright.md @@ -0,0 +1,278 @@ +--- +layout: post +title: Getting hands on with test tools- Cypress versus Playwright +--- + +This post will give some practical advice on installing [Cypress](#-setting-up-cypress-and-run-tests) and [Playwright](#-set-up-playwright-and-run-tests) to create and run some simple UI tests, and [a brief comparison](#-summary) between the two tools. + +Alongside Selenium, Cypress and Playwright are currently amongst the most widely used test automation tools. There is a lot of discussion about the pros and cons of each tool, which is the most suitable for a given project etc. but you may want to try these tools out for yourself, this post will help you to get up and running, and run some basic UI tests. + +To evaluate these tools myself, I set up [a Git repo](https://github.com/dp2020-dev/blazemeter-ecommerce-automated-tests) to do some basic UI automation, one using Cypress the other Playwright to compare them side by side (I will add Selenium Webdriver soon). If you can set up these tools locally, you will be able to follow and implement the simple test plan outlined below, or alternatively clone the material in the repo itself and run it. + +> ⓘ For reference, I installed both tools on a Mac, and the system under test/code used was JavaScript. However, the instructions I link to cover Windows/Linux and other code bases. + +### Test Plan + +To compare these test tools, I used the [5W](https://testiotech.com/2024/01/26/5W-Framework/) approach in ChatGPT to come up with this outline of a test scope: + +
    +
  • Page Loads: Ensure that specified page load correctly.
    • +
  • Navigation: Verify the navigation within the web shop.
    • +
  • Registered User Login: Test the login process for registered users.
    • +
  • Add to Basket and Checkout: Check the functionality of adding items to the basket and completing the checkout process.
    • +
+ +The system under test used here ([https://www.demoblaze.com](https://www.demoblaze.com)) has proven to be well suited for e-commerce UI testing, but you of course may have a preferred alternative (generally we'll be covering standard e-commerce transactions). + +### Setting up Cypress and run tests + +The documentation on installing Cypress itself is pretty user friendly, so rather than repeat material this section will highlight some of the key areas. + +[https://docs.cypress.io/guides/getting-started/installing-cypress#System-requirements](https://docs.cypress.io/guides/getting-started/installing-cypress#System-requirements) + +> ⓘ If you see a 'Cypress Configuration Error' when running 'npx cypress open' , ensure you are running cypress from the right folder level, it needs to be in a folder above the cypress.config.js level to avoid any config errors. + +Provided the installation has been successful, my preferred approach is to open a command line/terminal in the project folder, and run: + +{% highlight js %} +npx cypress open +{% endhighlight %} + +This should open up the Cypress Launchpad, and for this post we'll be concentrating on E2E testing (to cover an e-commerce system). + +Once cypress is up and running in the browser, my approach was to follow the Getting Started page to set up the first 'E2E' test, and build on that to start covering the project plan: + +[https://docs.cypress.io/guides/end-to-end-testing/writing-your-first-end-to-end-test](https://docs.cypress.io/guides/end-to-end-testing/writing-your-first-end-to-end-test) + +#### Setting the baseURL + +For UI tests it's very useful to not have to explicitly use the url of the system under test (e.g. www.demoblaze.com). We can define the baseUrl in the cypress.config.js in project root. Cypress calls this base url when '/' is used in an E2E test, e.g. + +{% highlight js %} +cy.visit('/') // uses the baseUrl (i.e. www.demoblaze.com in our example) in the cypress.config to open the url. +{% endhighlight %} + +#### Fixtures + +A lot of the UI tests in this plan use the same user details info for each test, and rather than repeat those strings in each test, we can define a fixture file to store all our log in data, and reuse it in each test. + +##### Example: + +In the fixtures file, the userDetails class contains user log in details: + +{% highlight js %} +{ +"username": "test", +"password": "test", +"welcomeText": "Welcome test", +"name": "Sid Spendalot", +"country": "UK", +"city": "Testville", +"creditCard": "554433221", +"month": "April", +"year": "2023" +} +{% endhighlight %} + +This class is used in E2E tests, e.g. in E2EloginPurchases test file, we get the fixture file: + +{% gist 2febfb086c687c0939edf2f1551e847b %} + +..and from that line on we can use the details from the fixture file in the test (i.e. the E2E test class is getting the userDetails.password & userDetails.username are those defined in the fixture file): + +{% gist dc6175465df73d5c706268bf8add1429 %} + +In addition to Cypress documentation, this blog proved useful in understand more about Cypress Fixtures: +[https://testersdock.com/cypress-fixtures/](https://testersdock.com/cypress-fixtures] + +#### Time Travel + +The time travel feature is effectively a record of the changing state of the system under test, which has proven to be invaluable in understanding how the website behaves in response to our test inputs and for debugging. + +Lets demonstrate this by looking at an E2E test that uses our baseUrl set in config, and some of our imported fixture data. + +##### Example + +The [E2EloginPurchases](https://github.com/dp2020-dev/blazemeter-ecommerce-automated-tests/blob/main/cypress/e2e/E2EloginPurchases.cy.js) E2E test verifies the log in process works with a valid username/password, and checks a successful log in message appears on screen. + +![Passing E2E run in Cypress browser view](/images/1_test_passes.png) + +In the spec window of Cypress browser we can see our test code has used our configured baseURL and knows '/' should be 'www.demoblaze.com', and uses the imported config to pass in userName & userPassword. + +![Passing E2E run in Cypress browser view](/images/2_travel_back.png) + +On the successful run, we can see the test step to verify a message appears on screen 'Welcome ' ('Welcome test' in this case): + +![Passing E2E run in Cypress browser view](/images/3_loggedIn.png) + +The advantage of time travel is that it makes it really convenient and efficient to check the variables we're passing in, and how the system behaves. If we have a failing test, we can efficiently debug by 'travelling' to the steps in question. In the example below, the test step expects a different user name to what's being passed on screen. + +![Passing E2E run in Cypress browser view](/images/4_failed_test.png) + +The failed step is identified and we can have a closer look at exactly what was happening at that point on the system under test. + +### Cypress - Summary + +In summary, the Cypress documentation allows us to get up and running pretty quickly, and the example given of setting up the first test allows us to build up the test plan. In the post we had a quick look at setting a base url and test config, and I personally I was impressed with the [time travel feature]- {#cypress_page_locator}some of the page elements on the system under test were difficult to identify in javascript, the time travel showed the exact stage and screen where the issues were, which was invaluable when it came to debugging. + +## Set up Playwright and run tests + + This is a rough guide to get up and running (follow the links for more detailed instruction) and we'll use the same test plan as mentioned in [Test Plan.](#test-plan) + +### Installation + +To install and configure Playwright, I used the following guide which got me up & running: + +[Automating End-to-End testing with Playwright and Azure Pipelines](https://techcommunity.microsoft.com/t5/azure-architecture-blog/automating-end-to-end-testing-with-playwright-and-azure/ba-p/3883704) + +I recommend setting up the folder structure using Visual Studio Code (see step 2 of the linked guide.) You'll also need an NPM package installed as mentioned in the guide, this should be installed in step 6 by running: + +{% highlight js %} +npm init playwright@latest +{% endhighlight js %} + +> ⓘ during installation step 6 'Execute Playwright Test Script' would not work for me, my solution was to change directory (in command line/terminal) to my playwright project folder, then run: npm init playwright@latest + +#### Run tests directly in Visual Studio Code + +To run directly in VSC, you need to install playwright extension, as per: +[https://playwright.dev/docs/getting-started-vscode#installation](https://playwright.dev/docs/getting-started-vscode#installation). + +Once installed you should see a green run icon in the test spec window: +![VSC run icon](/images/VSC_pw_run_icon.png) + +### Create tests + +The initial set up of Playwright helpfully includes a file called [tests/example.spec.ts](https://github.com/dp2020-dev/blazemeter-ecommerce-automated-tests/blob/main/playwright/tests/demo.spec.ts), this gives us a solid example to explain how the tool works, and I used this to build up the test scope. + +{% highlight js %} +import { test, expect } from '@playwright/test'; + +test('has title', async ({ page }) => { +await page.goto('https://playwright.dev/'); + +// Expect a title "to contain" a substring. +await expect(page).toHaveTitle(/Playwright/); +}); + +test('get started link', async ({ page }) => { +await page.goto('https://playwright.dev/'); + +// Click the get started link. +await page.getByRole('link', { name: 'Get started' }).click(); + +// Expects page to have a heading with the name of Installation. +await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible(); +}); + +{% endhighlight js %} + +To run tests, use the following command in either VSC or the command line/terminal. +{% highlight js %} +npx playwright test -- + +{% endhighlight js %} + +### Playwright codegen + +Playwright has an impressive feature to record script automatically called Codegen. In theory it can record the whole log in, add item to basket etc. steps for us, but I found it more useful to find those page elements which were [awkward to find and use in Cypress.](cypress_page_locator) +For example, if we run the following command, the specified website and Playwright inspector will load up. + +{% highlight js %} +npx playwright codegen browserstack.com +{% endhighlight js %} + +We can undertake our actions on the website, e.g. lets click log in, and input a user name and password. As you can see in the clip below, the user actions in the browser is tracked in the Playwright Inspector, so we can see the locators, tags and roles etc. + + + +In my experience, it didn't quite capture the whole test code I needed, but it definitely saved time in getting the right elements. + +Browerstack has a useful summary here: [www.browserstack.com/guide/playwright-debugging/](https://www.browserstack.com/guide/playwright-debugging#:~:text=Playwright%20is%20an%20open%2Dsource,the%20headful%20mode%20for%20tests) + +### Authenticated log in state + +Rather than have to repeat the log in steps explicitly for each test that requires a logged in user (e.g. adding items to cart and checking out), its possible to save the 'logged in state' to a setting in the [.config.ts file](https://github.com/dp2020-dev/blazemeter-ecommerce-automated-tests/blob/main/playwright/playwright/.auth/user.json): + +{% highlight js %} +storageState: "playwright/.auth/user.json" +{% endhighlight js %} + +This object points at [auth.setup](https://github.com/dp2020-dev/blazemeter-ecommerce-automated-tests/blob/main/playwright/tests/auth.setup.ts) (which is in the testDir location specified in the config). This file is effectively the successful log in test, and writes its logged in state back to the user.json file configured in playwright.config: + +{% highlight js %} +await page.context().storageState({ path: authFile }); +{% endhighlight js %} + +Now, by importing the Test class, the logged in state is used, i.e. each test which imports this class is in a logged state as a begin action. + +If you want to see this applied, see the [auth.setup](https://github.com/dp2020-dev/blazemeter-ecommerce-automated-tests/blob/main/playwright/tests/auth.setup.ts) file in playwright/tests, and the [user.json](https://github.com/dp2020-dev/blazemeter-ecommerce-automated-tests/blob/main/playwright/playwright/.auth/user.json) in playwright/playwright/.auth, or checkout this helpful write up: [https://www.cuketest.com/playwright/docs/auth/](https://www.cuketest.com/playwright/docs/auth/) + +### Traceviewer + +Traceviewer allows us to review a record of completed tests, similar in a way to Cypress Time travel (which we looked at previously), it reports the test result and allows us to check the outcome of each test step. The benefits here are for reporting itself, and when necessary for debugging, we can review a failed test and see exactly where/why it failed the given test step. + +To enable traceviewer, we need the following value in the [config](https://github.com/dp2020-dev/blazemeter-ecommerce-automated-tests/blob/main/playwright/playwright.config.ts) file. + +{% highlight js %} +/_ Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer _/ +trace: "on-first-retry +{% endhighlight js %} + +Lets demonstrate how to use traceviewer by change one of our passing tests so it fails. In [login.steps](https://github.com/dp2020-dev/blazemeter-ecommerce-automated-tests/blob/main/playwright/tests/login.spec.ts) , the log in message when logging in is 'Welcome test' (test being the username), so lets change the expected value in the test to 'Welcome visitor': + +{% highlight js %} +test.describe("Log in tests", () => { +test("Successful log", async ({ page }) => { +const loginPage = new login(page); +await loginPage.initializeLocators(); +await loginPage.loginFunction("test", "test"); +await expect( +page.getByRole("link", { name: "Welcome visitor" }) +).toBeVisible(); +{% endhighlight js %} + +To run traceviewer, go to the command line/terminal and input: +{% highlight js %} +npx playwright test login.spec.ts:10 --trace on +{% endhighlight js %} +This runs traceviewer for the specified test. + +![Traceviewer running](/images/Traceviewer1.png) + +Traceviewer saves the test run in a zip file, you can also view it in the browser, for example: +{% highlight js %} +Serving HTML report at http://localhost:57023. Press Ctrl+C to quit. +{% endhighlight js %} + +![Traceviewer test steps and traces](/images/Traceviewer2.png) + +The test report shows us the failing test, and clicking trace allows us to see screenshots of each test step. We can see that the message on screen is 'Welcome test' not 'Welcome visitor'. + +![Traceviewer screenshots of failed test step](/images/Traceviewer3.png) + +This is a really good explanation and summary of Traceviewer, from the official Playwright channel: + + + +## Summary - Playwright + +I found Playwright relatively straightforward to get up and running quickly, and am impressed by the utility and intuitiveness of codegen and traceviewer. We used a simple example [above](#-traceviewer) for traceviewer but it definitely enables quick and effective reporting and debugging, and the codegen tool did help in finding the more awkward page elements which took more time in Cypress. + +# Cypress versus Playwright (and Selenium) + + This is a summary of what we've seen in this exercise, and compares to a tool I am more familiar with, Selenium. + +Both Cypress and Playwright are marketed as more 'modern' to use than the older Selenium, and this exercise has demonstrated to me that both Cypress & Playwright are more 'lightweight' to install, intuitive to use and quicker to get up and running and getting good UI test coverage efficiently. [Cypress documentation](https://docs.cypress.io/guides/overview/why-cypress#Our-mission) states it should ideally be used when building a web application, and I can see how its user friendliness would enable devs/testers to efficiently undertake good test driven design. + +The debugging and selection tools mentioned in this exercise were a big help, and well designed in my opinion. The impressive built in reporting tool (Traceviewer) in Playwright is something Selenium lacks (at least without a plug in). + +However, there are some points to consider when we compare to what is still the mostly widely used alternative, Selenium. Both Cypress and Playwright can be described as 'opinionated' i.e. they are designed in a specific way to work efficiently but therefore have constraints on how they are used. For example, both tools have implicit waits (i.e. a test step waits for an element to load). This is at first a glance an advantage, it allows the page to load and the test to proceed. However, it may mask a performance issue, perhaps the delay in loading is not acceptable for the users. Selenium does not have this implicit wait, you can add one to a test but its not the default. + +While the ease of use can appear to be an advantage, perhaps Selenium's flexibility in being able to integrate other third party tools and plug ins means it remains more adaptable, and can be used in a broader range of projects. + +Given the age of Selenium, which has been around substantially longer than the other tools, it has a wealth of support and knowledge available online, the others are building that legacy too but you will generally find someone has had the same issue you have in Selenium! + +To wrap up, I would recommend anyone weighing up the pros and cons of Cypress versus Playwright (and of course Selenium) to try out the tools as demonstrated in this blog. I found it invaluable to see for myself how Cypress and Playwright really do offer something different, and perhaps more 'modern', but its interesting to note I use Selenium on my day to day work. + +> ⓘIn future I will add a 3rd project to my github repo to cover off the [test plan](#test-plan) for Selenium webdriver. diff --git a/_posts/2023-11-10-AI-Fundamentals-AI900.md b/_posts/2023-11-10-AI-Fundamentals-AI900.md new file mode 100644 index 00000000000..de643b41688 --- /dev/null +++ b/_posts/2023-11-10-AI-Fundamentals-AI900.md @@ -0,0 +1,15 @@ +--- +layout: post +title: Azure AI Fundamentals (AI-900) +--- + +As I've started getting to grips with Large Language Models, code tools such as GitHub co-pilot, and seen some of the really interesting talks about AI in the test community I was keen to understand more about the fundamentals behind AI- the AI-900 course was ideal, and I can strongly recommend it. + +[Microsoft Certified: Azure AI Fundamentals](https://learn.microsoft.com/en-us/credentials/certifications/azure-ai-fundamentals/?practice-assessment-type=certification) +![Microsoft AI Fundamentals](/images/AI900.png) + +This has given me a really useful background in the fundamental concepts of AI and how its practically applied- it covers chat bots, prediction models, large language models etc. so certainly covers a wide range of relevant topics. The hands on 'sand pit' exercises were really well designed and give a good insight into how regression, machine learning, training data and other fundamental AI concepts work. At the same time, the course is engaging and pretty short, so I'd recommend anyone with an interest in AI to give it a go. + +In terms of the course itself and the exam, it has a thorough self learning path which along with the self practice exam is all you really need, but I can also definitely recommend [John Savill's AI-900 - Azure AI Fundamentals Study Guide](https://www.youtube.com/watch?v=E9aarWMLJw0) as a practical summary. + + diff --git a/_posts/2024-01-26-5W-Framework.md b/_posts/2024-01-26-5W-Framework.md new file mode 100644 index 00000000000..0cc06af33f6 --- /dev/null +++ b/_posts/2024-01-26-5W-Framework.md @@ -0,0 +1,68 @@ +--- +layout: post +title: Use the 5W framework to get your own personal study plan from ChatGPT, Gemini, Copilot or other LLM/Generative AI tool. +--- + +Note: this blog post is a summary of a talk I have delivered to test groups. + +One of the most rewarding (and challenging) aspects of software testing is keeping up to date with the pace of change in the industry- from new test tools, changes in the technology stack or wider disruption, e.g. AI is a great example. + +Therefore the ability to self-learn and learn ‘on the job’ is a key skill for a software tester, and with that in mind I’ve found utilising the 5W framework invaluable to take advantage of what ChatGPT or any other large language model (LLM) can offer. + +### Why do we need a framework? + +This is a simple technique that forces us to think through what information and material we want from the LLM. This will give us a structure to both our prompts and the response we get back. + +### What is the 5W? + +This technique is from an excellent blog by Tina Huang, and is originally based on learning a programming language but is equally applicable to test-related learning: + +Apply 5 W framework to get a more relevant response (the example I've used here is to learn Selenium): + +
    + +
  • Who? What role does ChatGPT have- e.g. tutor/trainer.
    • +
  • What? Do we want to learn? (e.g. Selenium web driver with Java).
    • +
  • When? Timeline, amount of time available.
    • +
  • Where? Online courses, videos or text based courses.
    • +
  • Why? What's the goal? (e.g. Automated testing using Java/Selenium).
    • + +
+ +Source: [Tina Huang – YouTube: How to learn to code FAST using ChatGPT (it's a game changer seriously)](https://www.youtube.com/watch?v=VznoKyh6AXs&list=LL&index=2&t=377s&themeRefresh=1) + +### 5W prompt example + +Based on this example, this gives us the following prompt to input into the LLM: + +Act as a coding tutor to create a study plan to help me learn Selenium using Java to be able to create automated tests for front end e-commerce systems. I can study for up to 6 hours a week for 8 weeks, and prefer interactive, example based free resources. +Suggest reliable web resources that can be easily found through a web search or by directly visiting the official websites. + +The above style of prompt should give a structured plan based on the 5W what, in the timelines defined in the when. I’ve found this approach helpful when learning Cypress for example. + +![An example response, 'How to use ChatGPT for your own study plan', January 2024](/images/sampleResponse.jpg) + +### Do we need a framework? + +Some of the advantages of using this framework in ChatGPT (or another LLM): + +
    + +
  • Gives a structured plan, with suggested resources.
    • +
  • It's adaptable- if our focus or timelines change, we can change the study plan.
    • +
  • Keeps it relevant- we can add or remove topics/elements of the plan where necessary (not possible in an ‘off the shelf’ course)
    • +
+ +### Talks + +![Test Talks Wales, 'How to use ChatGPT for your own study plan', January 2024](/images/TTW_January2024.jpg) + +As mentioned above, I’ve used this framework both personally and as part of development and learning professionally in work, and it’s the basis of a talk I’ve presented at [Test Talks Wales](https://www.meetup.com/test-talks-wales/events/298323939/), [South West Test](https://www.meetup.com/south-west-test/events/301151914/) and [Ministry of Testing Talks Newcastle](https://www.meetup.com/mot-newcastle/events/298859530/). + +![MoT Newcastle Group, 'How to use ChatGPT for your own study plan', JMarch 2024](/images/MoT_Newcastle.webp) + +If you have any questions of feedback based on this post or after a talk, do please get in touch. + +email2 + +LI icon - small diff --git a/about.md b/about.md index 9b2605bb4ce..e7ba5e3eb29 100644 --- a/about.md +++ b/about.md @@ -1,30 +1,26 @@ --- layout: page -title: About +title: About Me --- -

- Hey there! This page is included as an example. Feel free to customize it for your own use upon downloading. Carry on! -

+After years of experience as a Test Lead working on test strategy, planning, test management etc. I started working in cloud first, CI/CD projects and really enjoyed the more technical aspect to these projects. -In the novel, *The Strange Case of Dr. Jeykll and Mr. Hyde*, Mr. Poole is Dr. Jekyll's virtuous and loyal butler. Similarly, Poole is an upstanding and effective butler that helps you build Jekyll themes. It's made by [@mdo](https://twitter.com/mdo). +To further my knowledge and skills I joined a tech consultancy to gain hands on experience of test engineering, including automation, test tools, CI/CD, Non Functional testing and more. -There are currently two themes built on Poole: +Working in successful, productive agile teams in CI/CD projects has given me a great insight into how automated testing fits into an effective project delivery, the role quality and testing plays in this and a technical understanding of the tools and technology involved. -* [Hyde](http://hyde.getpoole.com) -* [Lanyon](http://lanyon.getpoole.com) + -Learn more and contribute on [GitHub](https://github.com/poole). +
Daniel Phillips
-## Setup +## About the Testio Tech blog -Some fun facts about the setup of this project include: +One of the interesting challenges of working in software testing is keeping up to date with the pace of change in our industry- for example disruption from AI, new or evolving test tools, certifications and so on. This blog will cover some of the ways I stay on top of these changes, I hope it will be useful for others. -* Built for [Jekyll](http://jekyllrb.com) -* Developed on GitHub and hosted for free on [GitHub Pages](https://pages.github.com) -* Coded with [Sublime Text 2](http://sublimetext.com), an amazing code editor -* Designed and developed while listening to music like [Blood Bros Trilogy](https://soundcloud.com/maddecent/sets/blood-bros-series) +Finally, as I'm based in Wales the word 'Testio' is a slang/informal word for testing in Welsh (emphasis on informal) so its a bi-lingual blog title! -Have questions or suggestions? Feel free to [open an issue on GitHub](https://github.com/poole/issues/new) or [ask me on Twitter](https://twitter.com/mdo). +## Contact Me -Thanks for reading! +email2 + +LI icon - small diff --git a/images/1_test_passes.png b/images/1_test_passes.png new file mode 100644 index 00000000000..7a0ada7c565 Binary files /dev/null and b/images/1_test_passes.png differ diff --git a/images/2_travel_back.png b/images/2_travel_back.png new file mode 100644 index 00000000000..8c7d96cc0c3 Binary files /dev/null and b/images/2_travel_back.png differ diff --git a/images/3_loggedIn.png b/images/3_loggedIn.png new file mode 100644 index 00000000000..8d8dd44d468 Binary files /dev/null and b/images/3_loggedIn.png differ diff --git a/images/4_failed_test.png b/images/4_failed_test.png new file mode 100644 index 00000000000..7a2a9995878 Binary files /dev/null and b/images/4_failed_test.png differ diff --git a/images/AI900.png b/images/AI900.png new file mode 100644 index 00000000000..430c123d44d Binary files /dev/null and b/images/AI900.png differ diff --git a/images/LinkedIn-small.png b/images/LinkedIn-small.png new file mode 100644 index 00000000000..515d96a5195 Binary files /dev/null and b/images/LinkedIn-small.png differ diff --git a/images/MoT_Newcastle.webp b/images/MoT_Newcastle.webp new file mode 100644 index 00000000000..beabceed407 Binary files /dev/null and b/images/MoT_Newcastle.webp differ diff --git a/images/PW_Codegen.mp4 b/images/PW_Codegen.mp4 new file mode 100644 index 00000000000..f16743fc625 Binary files /dev/null and b/images/PW_Codegen.mp4 differ diff --git a/images/TTW_January2024.jpg b/images/TTW_January2024.jpg new file mode 100644 index 00000000000..d554d750b78 Binary files /dev/null and b/images/TTW_January2024.jpg differ diff --git a/images/Traceviewer1.png b/images/Traceviewer1.png new file mode 100644 index 00000000000..4c5c05e8189 Binary files /dev/null and b/images/Traceviewer1.png differ diff --git a/images/Traceviewer2.png b/images/Traceviewer2.png new file mode 100644 index 00000000000..de53b833fb8 Binary files /dev/null and b/images/Traceviewer2.png differ diff --git a/images/Traceviewer3.png b/images/Traceviewer3.png new file mode 100644 index 00000000000..723c2c1d3a6 Binary files /dev/null and b/images/Traceviewer3.png differ diff --git a/images/VSC_pw_run_icon.png b/images/VSC_pw_run_icon.png new file mode 100644 index 00000000000..4cf8f540417 Binary files /dev/null and b/images/VSC_pw_run_icon.png differ diff --git a/images/codegen_actions.png b/images/codegen_actions.png new file mode 100644 index 00000000000..e3a8a368812 Binary files /dev/null and b/images/codegen_actions.png differ diff --git a/images/codegen_browser.png b/images/codegen_browser.png new file mode 100644 index 00000000000..a578ceb83d1 Binary files /dev/null and b/images/codegen_browser.png differ diff --git a/images/dummy.jpg b/images/dummy.jpg new file mode 100644 index 00000000000..8b137891791 --- /dev/null +++ b/images/dummy.jpg @@ -0,0 +1 @@ + diff --git a/images/email2.webp b/images/email2.webp new file mode 100644 index 00000000000..34b7ee7c6f1 Binary files /dev/null and b/images/email2.webp differ diff --git a/images/emailIcon1.jpeg b/images/emailIcon1.jpeg new file mode 100644 index 00000000000..bca648250e7 Binary files /dev/null and b/images/emailIcon1.jpeg differ diff --git a/images/emailIcon2.jpeg b/images/emailIcon2.jpeg new file mode 100644 index 00000000000..18ad30957dc Binary files /dev/null and b/images/emailIcon2.jpeg differ diff --git a/images/linkedin3.webp b/images/linkedin3.webp new file mode 100644 index 00000000000..43c08979654 Binary files /dev/null and b/images/linkedin3.webp differ diff --git a/images/sampleResponse.jpg b/images/sampleResponse.jpg new file mode 100644 index 00000000000..f47021c8d09 Binary files /dev/null and b/images/sampleResponse.jpg differ