DEV Community: Luc Gagan

Introducing Auto Playwright: Transforming Playwright Tests with AI

Luc Gagan — Sat, 11 Nov 2023 14:48:49 +0000

Introducing Auto Playwright: Transforming Playwright Tests with AI

In the dynamic field of software development, efficient and effective testing solutions are crucial. I'm excited to introduce a project that's close to my heart - Auto Playwright. This open-source tool integrates AI with Playwright to revolutionize web testing, offering a seamless, intuitive way to automate testing tasks using plain-text AI-driven prompts.

The original article: https://ray.run/blog/auto-playwright

Streamlining Your Testing Workflow with Auto Playwright

Auto Playwright is here to redefine how we approach Playwright tests. It's straightforward to get started:

Installation: Simply install the auto-playwright dependency via npm:

   $ npm install auto-playwright -D

Configuration: Set up your OpenAI API key to leverage the AI capabilities:

   $ export OPENAI_API_KEY='your_key_here'

Usage: Integrate auto function in your tests easily:

   import { test, expect } from "@playwright/test";
   import { auto } from "auto-playwright";

End-to-end test example:

test("executes query, action and assertion", async ({ page }) => {
  await page.goto("/");

  // `auto` can query data
  // In this case, the result is plain-text contents of the header
  const headerText = await auto(
    "get the header text",
    { page, test },
  );

  // `auto` can perform actions
  // In this case, auto will find and fill in the search text input
  await auto(
    `type "${headerText}" in the search box`,
    { page, test },
  );

  // `auto` can assert the state of the website
  // In this case, the result is a boolean outcome
  const searchInputHasHeaderText = await auto(
    `is the contents of the search box equal to "${headerText}"?`,
    { page, test },
  );

  expect(searchInputHasHeaderText).toBe(true);
});

Practical Use Cases

Simplifying Complex Tasks

Auto Playwright can handle a variety of tasks, from simple queries to complex navigation and data retrieval. For example, automating a user registration process becomes a breeze with instructions like "go to registration page" and "fill in name, email, and password".

Efficient Testing

Auto Playwright excels in making test development faster and more efficient. Though not a complete replacement for traditional testing methods due to AI processing times and API costs, it shines in detailed, less frequent testing scenarios.

The Tech Behind Auto Playwright

At its core, Auto Playwright uses OpenAI's technology to interpret plain text instructions into executable test commands. This makes the process more intuitive and accessible, even for those with limited coding expertise.

Why Choose Auto Playwright?

Ease of Use: Rapid creation of tests using plain text prompts.
Wide Compatibility: Supports all browsers compatible with Playwright.
Cost-Effective: Free to use, with minimal costs associated with OpenAI usage.

Join the Community

I encourage you to try Auto Playwright in your projects and join our community to shape the future of AI-powered test automation. Your feedback and contributions are invaluable.

Conclusion

Auto Playwright isn't just a tool; it's a leap forward in test automation. It makes testing more accessible and aligned with the dynamic nature of web development. As the digital landscape evolves, tools like Auto Playwright will shape the future of testing and development.

Embrace the future of test automation - simplified, efficient, and AI-powered.

The Power of Conversion: Docker Run to Docker Compose and Vice-Versa

Luc Gagan — Thu, 09 Nov 2023 10:09:09 +0000

Title: Streamline Your Docker Workflow: Introducing Rayrun's Docker Run and Compose Conversion Tool

As the world of software development continuously evolves, so does the need for more efficient and simplified workflows. Docker, a cornerstone in this evolving landscape, has revolutionized the way applications are built, shipped, and run. However, navigating between Docker commands and Docker Compose manifests can often be a cumbersome task. This is where Rayrun's latest tool makes a significant impact.

The Power of Conversion: Docker Run to Docker Compose and Vice-Versa

Rayrun has unveiled a groundbreaking tool on its website, Ray.run, designed to seamlessly convert docker run commands to Docker Compose manifests and the other way around.

What is Docker Run and Docker Compose?

Before diving into the specifics of the tool, let's understand the basics:

Docker Run: This command is used to run a Docker container. It offers a plethora of options to configure the container at startup.
Docker Compose: An essential tool for defining and running multi-container Docker applications. It uses YAML files to configure application services.

The Conversion Tool: Simplifying the Process

The tool's functionality is straightforward yet powerful. A typical docker run command like:

docker run -d --name redis -p 6379:6379 redis

is effortlessly transformed into a Docker Compose manifest:

version: '3.3'
services:
    redis:
        container_name: redis
        ports:
            - '6379:6379'
        image: redis

Users can access this tool at Docker Run to Docker Compose and Docker Compose to Docker Run.

Leveraging Open-Source: Composerize and Decomposerize

The foundation of this tool is built on the robust open-source packages, Composerize and Decomposerize. These packages ensure reliable and accurate conversion, making the tool not just a utility but a necessity for developers working with Docker.

Why This Tool Matters: Enhancing Workflow Efficiency

The significance of this tool lies in its ability to streamline workflow processes. It's particularly beneficial for developers who frequently switch between single-container and multi-container setups. The tool ensures that this transition is smooth, error-free, and efficient.

A Use-Case in Playwright End-to-End Testing

A compelling use-case for this tool is in the context of Playwright for end-to-end (e2e) testing. Playwright, a framework for web testing, benefits significantly from a Dockerized environment, ensuring consistency across testing platforms. Here's how Rayrun's tool enhances this process:

Simplified Configuration: Quickly convert Playwright's Docker run commands to Compose files, making it easier to manage and scale test environments.
Efficient Testing Pipelines: Integrate seamlessly into CI/CD pipelines, allowing for more robust and reliable testing scenarios.
Flexibility and Scalability: Effortlessly switch between single-container tests and complex, multi-container setups depending on testing needs.

Conclusion: A Step Towards Simplified Docker Management

In conclusion, Rayrun's Docker conversion tool is more than just a utility – it's a step towards more efficient and manageable Docker workflows. By bridging the gap between Docker run commands and Compose manifests, it not only saves time but also enhances the overall development and testing process, especially in sophisticated frameworks like Playwright.

Experience the ease and efficiency of Docker management with Rayrun's tool – a must-have in every developer's toolkit.

What would you like to see in a Playwright cheat sheet?

Luc Gagan — Tue, 17 Oct 2023 03:45:02 +0000

https://ray.run/blog/mastering-playwright-test-automation-your-comprehensive-cheat-sheet

This is currently my #1 post by popularity. I am trying to level it up to keep the high ranking position. What do you typically seek when you search for a Playwright cheat sheet?

Efficient E2E Testing for Next.js: A Playwright Tutorial

Luc Gagan — Sun, 15 Oct 2023 00:10:15 +0000

Supercharge your Next.js app testing with Playwright – a tool for automating Chromium, Firefox, and WebKit browsers. Whether you're gearing up for End-to-End (E2E) or Integration tests, Playwright offers a seamless experience across all platforms. In this guide, I will walk you through setting up and running your first Playwright E2E test for a Next.js application.

Quickstart

If you're eager to dive right in, the quickest way to kick things off is by leveraging the create-next-app with the with-playwright example:

npx create-next-app@latest --example with-playwright with-playwright-app

Then run npm run test:e2e to run the tests. Continue reading to learn how to setup Playwright in an existing Next.js project.

Manual Setup

For those of you with an existing NPM project and would prefer a manual setup, no worries, you're covered! Begin by installing the @playwright/test package:

npm install --save-dev @playwright/test

Now, update your package.json scripts to incorporate Playwright:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "test:e2e": "playwright test"
  }
}

Crafting Your First Playwright E2E Test

Imagine you have two Next.js pages set up as shown:

// pages/index.js
import Link from 'next/link'

export default function Home() {
  return (
    <nav>
      <Link href="/about">About</Link>
    </nav>
  )
}

// pages/about.js
export default function About() {
  return (
    <div>
      <h1>About Page</h1>
    </div>
  )
}

It's time to ensure your navigation operates flawlessly. Here's how to craft a test for it:

// e2e/example.spec.ts
import { test, expect } from '@playwright/test'

test('navigates to the about page', async ({ page }) => {
  await page.goto('/')
  await page.getByRole('link', { name: /About/ }).click();
  await expect(page).toHaveURL('/about')
  await expect(page.getByRole('heading', { level: 1 })).toContainText('About Page');
})

Note: Use page.goto('/') and have "baseURL": "http://ray.run" set in the playwright.config.ts file for concise code.

Running Playwright Tests

Remember, Playwright tests the actual Next.js app, so the server should be up and running. It is also a good idea to test against production build to mimic real-world behavior.

Start your Next.js server:

npm run build
npm run start

Then in another terminal, run your Playwright tests:

npm run test:e2e

Use `webServer` to Start the Development Server

With Playwright's webServer feature, you can let it handle starting the development server and ensuring it's ready for action.

Just add this configration to your playwright.config.ts file:

import { type PlaywrightTestConfig } from '@playwright/test';

const config: PlaywrightTestConfig = {
  webServer: {
    command: 'npm run dev',
    port: 3000,
    reuseExistingServer: !process.env.CI,
  },
};

export default config;

Now you can run your tests without having to start the development server manually:

npm run test:e2e

Playwright on Continuous Integration (CI)

When running on CI, Playwright defaults to headless mode. To have all dependencies in place, execute:

npx playwright install-deps

Using the Experimental test mode for Playwright

There is not a lot of documentation on this yet, but Vercel team is working on an experimental test mode for Playwright. This mode will allow you to intercept requests and mock responses. This is useful for testing API routes and other server-side code.

Suppose you have an API route at /api/hello:

// pages/api/hello.ts
import type { NextApiRequest, NextApiResponse } from 'next'

type ResponseData = {
  name: string
}

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<ResponseData>
) {
  res.status(200).json({ name: 'Foo' });
}

This route is called using getServerSideProps:

// pages/index.tsx
import { GetServerSideProps } from 'next'

export default function Home({ name }) {
  return <div data-testid="message">Hello {name}</div>
}

export const getServerSideProps: GetServerSideProps = async () => {
  const res = await fetch('http://localhost:3000/api/hello')
  const data = await res.json();

  return {
    props: {
      name: data.name,
    },
  }
}

Now you want to write a test that verifies that the page renders the name returned by the API.

import { test, expect } from '@playwright/test';

test('prints name retrieved from the API', async ({ page, msw }) => {
  await page.goto('/');

  await expect(page.getByTestId('message')).toHaveText('Hello Foo');
});

The latter asserts that the page renders the name returned by the API. However, using the experimental test proxy, you can intercept the request to /api/hello and mock the response.

Mocking API responses

First, you need to install msw to mock responses:

npm install -D msw

Then you need to change your import to next/experimental/testmode/playwright/msw:

import { test, expect } from 'next/experimental/testmode/playwright/msw'

Now you can mock the response:

import { test, expect, rest } from 'next/experimental/testmode/playwright/msw';

test('prints name retrieved from the API', async ({ page, msw }) => {
  msw.use(
    rest.get('http://localhost:3000/api/hello', (req, res, ctx) => {
      return res.once(
        ctx.status(200),
        ctx.json({
          name: 'Bar',
        })
      )
    })
  );

  await page.goto('/');

  await expect(page.getByTestId('message')).toHaveText('Hello Bar');
});

App Router

You can also use the experimental test mode to test the Next.js app/ router.

Define a route:

// app/api/hello/route.ts
export async function GET() { 
  return Response.json({ name: 'Foo' })
}

Fetch the data in your page:

// app/page.tsx
const getData = async () => {
  const res = await fetch('http://localhost:3000/api/hello')
  const data = await res.json();

  return {
    name: data.name,
  }
};

export default async () => {
  const { name } = await getData();

  return <div data-testid="message">Hello {name}</div>
}

Now you can test the page:

import { test, expect, rest } from 'next/experimental/testmode/playwright/msw';

test('prints name retrieved from the API', async ({ page, msw }) => {
  msw.use(
    rest.get('http://localhost:3000/api/hello', (req, res, ctx) => {
      return res.once(
        ctx.status(200),
        ctx.json({
          name: 'Bar',
        })
      )
    })
  );

  await page.goto('/');

  await expect(page.getByTestId('message')).toHaveText('Hello Bar');
});

Error: No test info

It appears that when you are running tests in the experimental test mode, you may get the following error:

Error: No test info

This happens when you try to access the web server directly, outside of the test. As far as I can tell, there is no way to access the Next.js web server directly when running in the experimental test mode. You can only access it by running a Playwright test.

Conclusion

In closing, integrating Playwright into your Next.js workflow ensures a robust, tested, and reliable application. If this is your first time using Playwright, you should familiarize with Trace viewer next as it will help you debug your tests. Now, go ahead and craft tests that leave no stone unturned. Happy testing!

DevTools

Luc Gagan — Thu, 12 Oct 2023 02:49:14 +0000

I developed an obsession! Here, I said it.

For the last 3 months, I've been spending every afternoon building DevTools. It started with utilities that I use for testing. Then I needed something simple to migrate from Cypress to Playwright. Then I was learning Regex, etc. In total it now features 85 tools.

All tools are ad free and free to use. No catch. I just wanted to build something that others would use.

Here is the current list:

ASCII to Hex Converter – An ASCII to Hex tool converts ASCII (American Standard Code for Information Interchange) text, which represents characters, into hexadecimal format, which is a base-16 number system commonly used in computing and digital systems.
Base64 Decoder – A Base64 text decoder tool converts Base64 text into its original form, allowing for the decoding of binary data that has been encoded using Base64.
Base64 Encoder – A Base64 text encoder tool converts text into Base64, a group of binary-to-text encoding schemes that represent binary data in an ASCII string format by translating it into a radix-64 representation.
Base64URL Decoder – A Base64URL text decoder tool converts Base64URL text into its original form, allowing for the decoding of binary data that has been encoded using Base64URL.
Base64URL Encoder – A Base64URL text encoder tool converts text into Base64URL, a variant of Base64 that uses URL and filename safe alphabet, allowing for the encoding of binary data into a URL-friendly format.
Bash Command Formatter – A Bash command formatter tool takes in a Bash command and formats it, applying proper indentation, line breaks, and formatting to make it more readable and structured.
Byte Pair (BPE) Decoder – A byte pair decoder tool decodes text that has been encoded using byte pair encoding (BPE), a data compression technique that replaces the most frequently occurring character pairs with a single, unused character, reducing the size of the data. It is used by a lot of Transformer models, including GPT, GPT-2, RoBERTa, BART, and DeBERTa.
Byte Pair (BPE) Encoder – A byte pair encoder tool encodes text using byte pair encoding (BPE), a data compression technique that replaces the most frequently occurring character pairs with a single, unused character, reducing the size of the data. It is used by a lot of Transformer models, including GPT, GPT-2, RoBERTa, BART, and DeBERTa.
Color Converter – A color converter tool converts colors between different color spaces, such as RGB (Red, Green, Blue), CMYK (Cyan, Magenta, Yellow, Black), and HEX (Hexadecimal).
Cron Expression Generator – A cron expression generator tool takes in custom instructions and generates a cron expression, which is a string that represents a set of times, allowing for the scheduling of tasks to be run at specific times.
Cron Expression Parser – A cron expression parser tool parses a cron expression into a human-readable description, allowing for easy understanding and analysis of the cron expression.
CSS Formatter – Takes a CSS string and applies proper indentation, line breaks, and formatting to make it more readable and structured.
CSV to JSON Converter – A CSV to JSON tool converts CSV (Comma-Separated Values) formatted data into JSON (JavaScript Object Notation) format, allowing for interoperability and compatibility between the two data representations.
CSV to XML Converter – A CSV to XML tool converts CSV (Comma-Separated Values) formatted data into XML (Extensible Markup Language) format, allowing for interoperability and compatibility between the two data representations.
CSV to YAML Converter – A CSV to YAML tool converts CSV (Comma-Separated Values) formatted data into YAML (YAML Ain't Markup Language) format, allowing for interoperability and compatibility between the two data representations.
cURL Command Builder – A cURL builder tool takes in custom YAML instructions and generates a cURL (Client URL) command, which is a command-line tool that allows for the transfer of data using various protocols, such as HTTP, HTTPS, FTP, FTPS, and SFTP.
cURL to Fetch Converter – A cURL to Fetch tool converts cURL (Client URL) commands into Fetch commands, allowing for easy migration from cURL to Fetch.
Cypress to Playwright Converter – A Cypress to Playwright tool converts Cypress code into Playwright code, allowing for easy migration from Cypress to Playwright.
Date Parser – A natural language date parser tool parses a date string into various canonical expressions of date, allowing for easy manipulation and analysis of the date.
File Size Converter – A file size converter tool converts file sizes between different units, such as bytes, kilobytes, megabytes, gigabytes, and terabytes, allowing for easy transformation of file sizes to suit different use cases.
Glob to Regex Converter – A glob to regex tool converts a glob pattern into a regular expression, allowing for easy transformation of glob patterns into regular expressions.
GraphQL Formatter – Takes a GraphQL string and applies proper indentation, line breaks, and formatting to make it more readable and structured.
Hash Generator – A hash generator tool takes in a string of characters and outputs a hash value, which is a fixed-length alphanumeric string that uniquely identifies the input data.
Hash Identifier – A hash identifier tool takes in a hash value and identifies the type of hash, such as MD5, SHA-1, or SHA-256.
Hex to ASCII Converter – A Hex to ASCII tool converts hexadecimal (a base-16 number system) into ASCII (American Standard Code for Information Interchange) text, allowing the representation of hexadecimal numbers as readable characters.
HTML Entity Decoder – HTML entity decoder tool converts HTML entities back into their corresponding characters, ensuring the proper display and interpretation of special characters and symbols in HTML code.
HTML Entity Encoder – HTML entity encoder tool converts special characters and symbols in HTML code into their corresponding HTML entities, ensuring proper rendering and preventing parsing issues.
HTML Formatter – Takes an HTML string and applies proper indentation, line breaks, and formatting to make it more readable and structured.
HTML to Markdown Converter – An HTML to Markdown tool converts HTML (Hypertext Markup Language) formatted text into Markdown, a lightweight markup language that uses plain text formatting syntax to convert to HTML.
IDN Decoder – An IDN decoder tool converts IDN (Internationalized Domain Name) text into its Unicode representation, allowing for the decoding of Punycode into Unicode characters.
IDN Encoder – An IDN encoder tool converts IDN (Internationalized Domain Name) text into its Punycode representation , allowing for the encoding of Unicode characters into ASCII characters.
JavaScript Formatter – Takes a JavaScript string and applies proper indentation, line breaks, and formatting to make it more readable and structured.
JSON Diff Analyzer – A JSON diff analyzer tool compares two JSON (JavaScript Object Notation) objects and highlights the differences between them, allowing for easy comparison and analysis of the two objects.
JSON Formatter – Takes a JSON string and applies proper indentation, line breaks, and formatting to make it more readable and structured.
JSON Minifier – Reduces the size of a JSON file by removing unnecessary white spaces, line breaks, and comments, optimizing it for faster transmission and improved efficiency.
JSON Schema to TypeScript Converter – A JSON Schema to TypeScript tool converts JSON Schema (JavaScript Object Notation Schema) into TypeScript, a typed superset of JavaScript that compiles to plain JavaScript.
JSON to CSV Converter – A JSON to CSV tool converts JSON (JavaScript Object Notation) formatted data into CSV (Comma-Separated Values) format, allowing for interoperability and compatibility between the two data representations.
JSON to JSON Schema Converter – A JSON to JSON Schema tool converts JSON (JavaScript Object Notation) data into a JSON schema, which is a vocabulary that allows you to annotate and validate JSON documents.
JSON to TOML Converter – A JSON to TOML tool converts JSON (JavaScript Object Notation) formatted data into TOML (Tom's Obvious, Minimal Language) format, enabling easy transformation and representation of JSON data in a more human-readable and structured TOML syntax.
JSON to TypeScript Converter – A JSON to TypeScript tool converts JSON (JavaScript Object Notation) into TypeScript, a typed superset of JavaScript that compiles to plain JavaScript.
JSON to XML Converter – A JSON to XML tool converts JSON (JavaScript Object Notation) formatted data into XML (Extensible Markup Language) format, enabling easy transformation and representation of JSON data in a more human-readable and structured XML syntax.
JSON to YAML Converter – A JSON to YAML tool converts JSON (JavaScript Object Notation) formatted data into YAML (YAML Ain't Markup Language) format, enabling easy transformation and representation of JSON data in a more human-readable and structured YAML syntax.
JSON Viewer – A JSON viewer tool takes in a JSON (JavaScript Object Notation) string and displays it in a tree-like structure, allowing for easy visualization and navigation of the data.
Line Deduplicator – A line deduplicator tool processes a list of lines and removes any duplicates, leaving only unique lines, which can help in data cleaning and information management.
Line Sorter – A line sorter tool takes in a list of lines as input and rearranges them into a specified order, such as alphabetical or numerical, aiding in the organization and analysis of data.
Markdown Previewer – A Markdown previewer tool takes in a Markdown string and displays how it would render, allowing for easy visualization and navigation of the data.
Markdown to HTML Converter – A Markdown to HTML tool converts Markdown formatted text into HTML (Hypertext Markup Language), a markup language that uses tags to structure and format web pages.
Playwright to Cypress Converter – A Playwright to Cypress tool converts Playwright code into Cypress code, allowing for easy migration from Playwright to Cypress.
Query String Parser – A query string parser tool parses a query string into a JavaScript object, allowing for easy manipulation and analysis of the query string.
Random Credit Card Generator – A random credit card generator tool generates a random credit card number, expiration date, and CVV, which can be used for testing and data generation purposes.
Random IP Address Generator – A random IP address generator tool generates a random IP address, which can be used for testing and data generation purposes.
Random MAC Address Generator – A random MAC address generator tool generates a random MAC address, which can be used for testing and data generation purposes.
Random Mailing Address Generator – A random address generator tool generates a random address, which can be used for testing and data generation purposes.
Random Person Generator – A random person generator tool generates a random person's name, age, email, address, interests, and other information, which can be used for testing and data generation purposes.
Regular Expression Optimizer – A regular expression optimizer tool optimizes a regular expression by removing unnecessary characters and expressions, allowing for the creation of more efficient regular expressions.
Regular Expression Tester – A regular expression tester tool takes in a regular expression and tests it against a string, allowing for easy testing and debugging of regular expressions.
SAML Decoder – A SAML decoder tool decodes SAML (Security Assertion Markup Language) formatted data, which is an XML-based open standard for exchanging authentication and authorization data between parties, allowing for the interpretation of SAML messages.
SQL Formatter – Takes a SQL query and applies proper indentation, line breaks, and formatting to make it more readable and structured.
String Analyzer – A string inspector tool analyzes a string of text and provides information about its length, character count, word count, sentence count, and line count, aiding in the processing and management of text data.
String Case Converter – A string case converter tool converts text between different cases, such as camelCase, PascalCase, snake_case, and kebab-case, allowing for easy transformation of text to suit different naming conventions.
SVG to JSX Converter – An SVG to JSX tool converts SVG (Scalable Vector Graphics) formatted data into JSX (JavaScript XML) format, enabling easy transformation and representation of SVG data in a more human-readable and structured JSX syntax.
Text Diff Analyzer – A text diff analyzer tool compares two pieces of text and highlights the differences between them, allowing for easy comparison and analysis of the two texts.
TOML to JSON Converter – A TOML to JSON tool converts TOML (Tom's Obvious, Minimal Language) formatted data into JSON (JavaScript Object Notation) format, enabling easy transformation and representation of TOML data in a more human-readable and structured JSON syntax.
TOML to XML Converter – A TOML to XML tool converts TOML (Tom's Obvious, Minimal Language) formatted data into XML (Extensible Markup Language) format, enabling easy transformation and representation of TOML data in a more human-readable and structured XML syntax.
TOML to YAML Converter – A TOML to YAML tool converts TOML (Tom's Obvious, Minimal Language) formatted data into YAML (YAML Ain't Markup Language) format, enabling easy transformation and representation of TOML data in a more human-readable and structured YAML syntax.
TypeScript to JavaScript Converter – A TypeScript to JavaScript tool converts TypeScript, a typed superset of JavaScript that compiles to plain JavaScript, into JavaScript.
Unit Converter – A unit converter tool converts units between different systems of measurement, such as converting miles to kilometers or converting pounds to kilograms.
URL Extractor – A URL extractor tool extracts URLs (Uniform Resource Locators) from a string of text, allowing for easy extraction and analysis of URLs.
URL Parser – A URL parser tool parses a URL (Uniform Resource Locator) into its component parts, such as the protocol, host, port, path, query parameters, and fragment, allowing for easy manipulation and analysis of the URL.
UUID Decoder – A UUID decoder tool converts UUIDs (Universally Unique Identifiers) into their component parts, allowing for easy analysis and manipulation of the UUID.
UUID Generator – A UUID generator tool generates a universally unique identifier (UUID), a 128-bit number used to identify information in computer systems, ensuring uniqueness across space and time.
UUID Validator – A UUID validator tool validates a UUID (Universally Unique Identifier), which is a 128-bit number used to uniquely identify information in computer systems.
XML Formatter – Takes an XML string and applies proper indentation, line breaks, and formatting to make it more readable and structured.
XML to CSV Converter – An XML to CSV tool converts XML (Extensible Markup Language) formatted data into CSV (Comma-Separated Values) format, allowing for interoperability and compatibility between the two data representations.
XML to JSON Converter – An XML to JSON tool converts XML (Extensible Markup Language) formatted data into JSON (JavaScript Object Notation) format, enabling easy transformation and representation of XML data in a more human-readable and structured JSON syntax.
XML to TOML Converter – An XML to TOML tool converts XML (Extensible Markup Language) formatted data into TOML (Tom's Obvious, Minimal Language) format, enabling easy transformation and representation of XML data in a more human-readable and structured TOML syntax.
XML to YAML Converter – An XML to YAML tool converts XML (Extensible Markup Language) formatted data into YAML (YAML Ain't Markup Language) format, enabling easy transformation and representation of XML data in a more human-readable and structured YAML syntax.
YAML Formatter – Takes a YAML string and applies proper indentation, line breaks, and formatting to make it more readable and structured.
YAML to CSV Converter – A YAML to CSV tool converts YAML (YAML Ain't Markup Language) formatted data into CSV (Comma-Separated Values) format, allowing for interoperability and compatibility between the two data representations.
YAML to JSON Converter – A YAML to JSON tool converts YAML (YAML Ain't Markup Language) formatted data into JSON (JavaScript Object Notation) format, allowing for interoperability and compatibility between the two data representations.
YAML to TOML Converter – A YAML to TOML tool converts YAML (YAML Ain't Markup Language) formatted data into TOML (Tom's Obvious, Minimal Language) format, enabling easy transformation and representation of YAML data in a more human-readable and structured TOML syntax.
YAML to XML Converter – A YAML to XML tool converts YAML (YAML Ain't Markup Language) formatted data into XML (Extensible Markup Language) format, enabling easy transformation and representation of YAML data in a more human-readable and structured XML syntax.

Mastering Playwright: Best Practices for Web Automation with the Page Object Model

Luc Gagan — Mon, 02 Oct 2023 23:48:50 +0000

Originally published on https://ray.run/blog/mastering-poms.

In the realm of web automation, integrating Playwright with the Page Object Model (POM) can turbocharge your testing strategy. By following best practices, you can achieve maintainable, reliable, and scalable test scripts. Let's dive deep into how POM elevates Playwright's capabilities for all you QA engineers out there.

The Anatomy of a Page Object

A Page Object encapsulates all the interactions and elements of a particular web page (or a segment of it) within a class. This separation brings about three primary constituents:

Element Selectors: These are the definitions that point to specific elements on the web page.
Methods: Functions that encapsulate one or more interactions with the web elements.
Properties: Any additional information or attributes related to the page, such as its URL.

In the heart of POM lies the principle of abstraction. You're not merely scripting tests; you're crafting an intuitive interface to your application's UI.

Understanding Page Object Model Significance

Using POMs ensures an organized approach to test script creation. The core idea is abstracting the UI interactions and elements into easily manageable objects. This abstraction ensures that changes in the UI only necessitate updates in one place, making your test scripts resilient to frequent application updates.

For example, consider logging into a web application on https://ray.run/. Instead of writing raw Playwright commands in every test, with POM you'll encapsulate them within a SignInPage class.

Identifying Properties

Imagine you're dealing with a login form on https://ray.run/signin. First, identify the properties of the page:

import { type Page } from '@playwright/test';

class SignInPage {
  readonly page: Page;
  readonly url: string = 'https://ray.run/signin';

  public constructor(page: Page) {
    this.page = page;
  }
}

Identifying Locators

Then, pinpoint the elements:

import { type Page, type Locator } from '@playwright/test';

class SignInPage {
  readonly page: Page;
  readonly url: string = 'https://ray.run/signin';
  readonly emailInputLocator: Locator;
  readonly passwordInputLocator: Locator;
  readonly signinButtonLocator: Locator;

  public constructor(page: Page) {
    this.page = page;
    page.emailInputLocator = page.getByLabel('Email');
    page.passwordInputLocator = page.getByLabel('Password');
    page.signInButtonLocator = page.getByRole('button', { name: 'Sign In' })
  }
}

Identifying Actions

Then, identify the actions:

import { type Page, type Locator } from '@playwright/test';

class SignInPage {
  readonly page: Page;
  readonly url: string = 'https://ray.run/signin';
  readonly emailInputLocator: Locator;
  readonly passwordInputLocator: Locator;
  readonly signinButtonLocator: Locator;

  public constructor(page: Page) {
    this.page = page;
    page.emailInputLocator = page.getByLabel('Email');
    page.passwordInputLocator = page.getByLabel('Password');
    page.signInButtonLocator = page.getByRole('button', { name: 'Sign In' })
  }

  async visit() {
    await this.page.goto(this.url);
  }

  async login(email: string, password: string) {
    await this.emailInputLocator.fill(email);
    await this.passwordInputLocator.fill(password);
    await this.signInButtonLocator.click();
  }
}

Identifying Assertions

Then, identify the assertions:

import { type Page, type Locator, expect } from '@playwright/test';

class SignInPage {
  readonly page: Page;
  readonly url: string = 'https://ray.run/signin';
  readonly emailInputLocator: Locator;
  readonly passwordInputLocator: Locator;
  readonly signinButtonLocator: Locator;

  public constructor(page: Page) {
    this.page = page;
    page.emailInputLocator = page.getByLabel('Email');
    page.passwordInputLocator = page.getByLabel('Password');
    page.signInButtonLocator = page.getByRole('button', { name: 'Sign In' })
  }

  async visit() {
    await this.page.goto(this.url);
  }

  async login(email: string, password: string) {
    await this.emailInputLocator.fill(email);
    await this.passwordInputLocator.fill(password);
    await this.signInButtonLocator.click();
  }

  async isSignedIn() {
    await expect(this.page.getByTestId('status')).toHaveText('Signed In');
  }
}

This structure ensures that any UI change only mandates an update within our SignInPage class, not across multiple test scripts.

Notice how we've added every abstraction layer one by one. This is similar to how you'd adopt POMs in a real-world scenario. Also, the level of abstraction that you choose is entirely up to you.

Using Page Objects in Tests

With the page objects in place, we can now write tests that utilize the encapsulated functionality. Here's an example test using the previously defined page objects:

import { test, expect } from '@playwright/test';
import { SignInPage } from './SignInPage';

test('user signs in', async ({ page }) => {
  const signInPage = new SignInPage(page);
  await signInPage.visit();
  await signInPage.login('foo@ray.run', 'bar');
  await signInPage.isSignedIn();
});

Isn't this neat? We've abstracted away the low-level details of interacting with the page, such as finding the email and password fields and clicking the submit button. This makes the test code more readable and focused on the high-level behavior of the page.

Using Fixtures to Create Page Objects

A big part of the Playwright test framework is the concept of fixtures. Fixtures are used to set up the test environment and provide access to the browser and page objects. They can also be used to create page objects that can be used across multiple tests.

Let's see how we can use fixtures to create page objects.

import { test as base } from '@playwright/test';
import { SignInPage } from './SignInPage';

export const test = base.extend<{ signInPage: SignInPage }>({
  signInPage: async ({ page }, use) => {
    const signInPage = new SignInPage(page);
    await use(signInPage);
  },
});

Now we can use the signInPage fixture in our tests to access the page object:

import { test, expect } from '@playwright/test';
import { SignInPage } from './SignInPage';

test('user signs in', async ({ signInPage }) => {
  await signInPage.visit();
  await signInPage.login('foo@ray.run', 'bar');
  await signInPage.isSignedIn();
});

Best Practices for Page Objects

Now that you've got a good understanding of the Page Object Model and how it can be implemented in Playwright, let's take a look at some best practices for creating page objects.

Separate Page Objects for Each Page

Each page of your application should have its own page object. This ensures that the code remains organized and maintainable, with clear boundaries between different areas of functionality.

Separate Actions and Assertions

It's a good practice to separate the actions and assertions in your page objects. This makes it easier to understand the flow of the test and ensures that the page object is reusable across different tests.

For example, you might be tempted to write the login method like this:

public async login(email: string, password: string) {
  await this.emailInputLocator.fill(email);
  await this.passwordInputLocator.fill(password);
  await this.signInButtonLocator.click();
  await expect(this.page.getByTestId('status')).toHaveText('Signed In');
}

However, putting the assertion in the login method makes it less reusable.

Avoid Extending Page Objects

It's a good practice to avoid extending page objects. This can lead to a bloated page object with too many methods and properties, making it difficult to maintain and understand.

// ❌ Don't do this
class AuthenticationPage {}
class SignInPage extends AuthenticationPage {}
class SignupPage extends AuthenticationPage {}

As a general rule, if you find yourself extending a POM class, it's a sign that you need to refactor your code. And if you are finding yourself duplicating code between POMs, then consider if you need to introduce another abstraction layer.

Keep Page Objects Small

It's a good practice to keep your page objects small and focused on a single page or a small section of a page. This ensures that the code remains organized and maintainable, with clear boundaries between different areas of functionality.

In general, avoid adding actions/assertions that are not re-used across multiple tests.

Do Not Use State in Page Objects

It's a good practice to avoid using state in your page objects. This ensures that the page object is reusable across different tests and makes it easier to understand the flow of the test.

// ❌ Don't do this
import { type Page, expect } from '@playwright/test';

class SignInPage {
  authenticated: boolean;

  // ...

  async isSignedIn() {
    await expect(this.page.getByTestId('status')).toHaveText('Signed In');

    this.authenticated = true;
  }
}

Principles of Good Page Objects

When implementing the Page Object Model with Playwright, it's essential to adhere to the following principles:

Single Responsibility Principle (SRP): Each page object should be responsible for a single page or a small section of a page. This ensures that the code remains organized and maintainable, with clear boundaries between different areas of functionality.
Abstraction: Page objects should abstract away the details of interacting with the page, such as locators and methods for interacting with elements. By providing a more readable and intuitive interface, abstraction reduces the brittleness of the test code and improves its maintainability.
Encapsulation: Page objects should encapsulate the state and behavior of the page, making it easy to reason about the page's current state and the actions that can be performed on it. This helps in maintaining a clear separation of concerns and improves the overall readability of the tests.
Reusability: Page objects should be designed to be reusable across different tests, reducing code duplication and improving the efficiency of test development. By creating modular and self-contained page objects, you can easily compose tests from reusable building blocks.
Easy to Understand: The naming of methods and variables in page objects should be self-explanatory, making it easy for anyone to understand the purpose and functionality of the code. Clear and descriptive names enhance the readability and maintainability of the tests.
Separation of Concerns: The test code should focus on the high-level behavior of the page, while the page objects should handle the low-level details of interacting with the page. This separation allows for better code organization and promotes a more maintainable and scalable test suite.

Advantages of the Page Object Model

POMs offer distinct advantages for you as a QA engineer:

Reusability: Common page interactions are defined once and used across multiple test scripts.
Readability: Tests become self-explanatory. Colleagues can understand the flow without diving into the UI details.
Maintainability: UI changes? No problem. Update the respective page object, and you're good to go!

Key Takeaways

The Page Object Model (POM) is a design pattern that abstracts page specific properties, locators, actions, and assertions.
Implementing POM in Playwright involves creating separate classes for each page, implementing methods for user actions, and using these page objects in your tests.
Avoid common pitfalls such as extending page objects, mixing actions and assertions, and creating bloated page objects.

Additional Resources

Playwright Official POM Documentation

Remember, the implementation of the Page Object Model in Playwright is just one part of a comprehensive test automation strategy. Read the other articles in Rayrun blog to continue exploring and learning about other design patterns and best practices to enhance your test automation efforts. Happy testing!

The Ultimate Software Testing Glossary: Your Feedback Needed!

Luc Gagan — Sat, 23 Sep 2023 16:05:44 +0000

Introduction

Every so often, we stumble upon challenges that push us to create solutions. For me, that challenge was identifying a singular, detailed, and comprehensive reference for software testing terms. While there are numerous resources available, most seemed either incomplete or lacking in depth. Driven by this, I've combined insights from ChatGPT and my personal notes to craft what I believe is the most thorough glossary dedicated to software testing. However, this is just the beginning, and I'm reaching out to the vibrant Dev.to community to make this resource even better!

Dive Into The Glossary

Curious about what's inside? Here's the link: Software Testing Glossary

How You Can Help

Your expertise is invaluable. To ensure the glossary is as valuable as possible, I've incorporated a feedback mechanism. Every term comes with a "Was this helpful?" form that will gather your insights.

You might wonder, "Do I need to review all 184 terms?" The answer is no. Simply browse and if something stands out or needs correction, do let me know. Every piece of feedback, whether minute or significant, can lead to a richer and more refined resource.

What's On The Horizon?

To give you a glimpse of what I'm planning next:

Wikipedia Links: Enhancing each term with a relevant Wikipedia link for deeper insights.
Synonyms: Including alternative terms to make searches more user-friendly.
Category Tags: Classifying each term under relevant categories (e.g., automated testing, manual testing) for streamlined navigation.
Interactive References: Anytime these terms are cited in https://ray.run/ articles, users will have the convenience of hovering over the term to view its definition.

Let's Co-create

I've laid the foundation, but with your insights and suggestions, we can elevate this glossary to new heights. What features or improvements would make this your go-to reference in times of need? Let's collaborate and create a tool that benefits us all!

Looking forward to your invaluable feedback and suggestions!

Bash Command Prettifier: The Solution to Formatting Tedious, Long Commands

Luc Gagan — Tue, 19 Sep 2023 21:09:23 +0000

Hello fellow DevOps enthusiasts and command-line warriors!

If you're anything like me, you value clarity and readability in your documentation. But there's a common nuisance we all face: those lengthy, unbroken bash commands. You know the ones I'm talking about. The ones that scroll endlessly, making you lose track of parameters, especially when copying them from tutorials or platforms like GCP.

The Problem:

Let me paint a picture:

GCP throws at you:

gcloud beta container --project "rayrun" node-pools create "test-runners-1" --cluster "rayrun" --zone "us-central1-c" --machine-type "e2-medium" --image-type "COS_CONTAINERD" --disk-type "pd-balanced" --disk-size "100" --metadata disable-legacy-endpoints=true --scopes "https://www.googleapis.com/auth/devstorage.read_only","https://www.googleapis.com/auth/logging.write","https://www.googleapis.com/auth/monitoring","https://www.googleapis.com/auth/servicecontrol","https://www.googleapis.com/auth/service.management.readonly","https://www.googleapis.com/auth/trace.append" --num-nodes "3" --enable-autoupgrade --enable-autorepair --max-surge-upgrade 1 --max-unavailable-upgrade 0

And with a sigh, you reformat it to:

gcloud beta container \
  --project "rayrun" \
  node-pools create "test-runners-1" \
  --cluster "rayrun" \
  --zone "us-central1-c" \
  --machine-type "e2-medium" \
  --image-type "COS_CONTAINERD" \
  --disk-type "pd-balanced" \
  --disk-size "100" \
  --metadata disable-legacy-endpoints=true \
  --scopes "https://www.googleapis.com/auth/devstorage.read_only","https://www.googleapis.com/auth/logging.write","https://www.googleapis.com/auth/monitoring","https://www.googleapis.com/auth/servicecontrol","https://www.googleapis.com/auth/service.management.readonly","https://www.googleapis.com/auth/trace.append" \
  --num-nodes "3" \
  --enable-autoupgrade \
  --enable-autorepair \
  --max-surge-upgrade 1 \
  --max-unavailable-upgrade 0

If you are wondering, the example is taken directly from Google Cloud Platform documentation.

I found myself sinking more time into reformatting these lines than I'd like to admit. And I knew there had to be a better way.

Introducing the Bash Command Prettifier:

This is where the Bash Command Prettifier comes into play. I designed this tool to tackle this exact issue head-on. The aim? To convert tedious, single-line commands into a neatly organized, multi-line format that's both pleasant to the eye and perfect for documentation.

Simply input your marathon-length bash command, and voila! Out comes a formatted, doc-friendly version.

🌟 Find the open-source code here: Bash Command Prettifier on GitHub

Here is an online demo: https://ray.run/tools/bash-command-formatter

In Conclusion:

In our fast-paced DevOps world, every second counts. Little efficiencies can make all the difference in productivity and mental well-being. My hope is that the Bash Command Prettifier serves you well and shaves precious minutes off your documentation tasks.

I'd love to hear your feedback or any suggestions for improvement. Wishing you clear and readable bash commands! Until next time. 🚀

Getting JSON with TypeScript types from ChatGPT response

Luc Gagan — Tue, 27 Jun 2023 07:18:54 +0000

I updated completions library to allow statically typed responses:

const response = await chat.sendMessage("Suggest a random startup name", {
  expect: {
    // These are the examples of what
    // the response should look like.
    examples: [
      {
        name: "OpenAI",
        domain: "openai.com",
      },
    ],
    // This is the schema that the
    // response must satisfy.
    schema: {
      additionalProperties: false,
      type: "object",
      properties: {
        name: { type: "string" },
        domain: { type: "string" },
      },
      required: ["name", "domain"],
    },
  },
});

Now the response.content value's type is:

{
  name: string;
  domain: string
}

Behind the scenes, the SDK will use the expect parameter to generate a prompt that will be sent to the API. The prompt will look like this:

Suggest a random startup name

Respond ONLY with a JSON object that satisfies the following schema:

{
  "type": "object",
  "properties": {
    "name": { "type": "string" },
    "domain": { "type": "string" },
  },
  "required": ["name", "domain"],
}

Examples:

{
  "name": "OpenAI",
  "domain": "openai.com"
}

The SDK will parse the response and validate it against the schema. If the response is invalid, it will throw an error. If the response is valid, it will return the response.

response.content;
// {
//   name: "Dex",
//   domain: "dex.com",
// }

This abstraction makes it easy to get JSON response from ChatGPT and you get a typed result!

Accessibility Testing with Playwright

Luc Gagan — Mon, 26 Jun 2023 14:45:23 +0000

Web accessibility (a11y) is a critical aspect of modern software development, ensuring that applications are usable by as many people as possible, including those with disabilities. As software QA engineers, we are often tasked with ensuring that our applications meet varying a11y standards. One of the most powerful tools we can leverage for this task is @playwright/test. This article will delve into the intricacies of utilizing playwright for a11y testing, offering a comprehensive guide on how to harness its capabilities effectively.

Understanding Accessibility (a11y) Testing

Before we delve into the specifics of a11y testing using Playwright, it's essential to understand what a11y testing entails. This form of testing helps identify and rectify usability issues in your application that could hinder users with disabilities. These issues could range from text with poor color contrast, making it hard to read for users with vision impairments, to UI controls and form elements lacking labels that a screen reader can identify.

However, it's important to note that while automated a11y tests can detect some common issues, many problems can only be discovered through manual testing. Therefore, a combination of automated testing, manual assessments, and inclusive user testing is recommended.

Introduction to Playwright

Playwright is a powerful, open-source framework that provides a high-level API to control web browsers. It's designed to enable reliable end-to-end testing of web applications. Though Playwright supports multiple programming languages, we will focus on TypeScript in this article.

Playwright for Accessibility Testing

Playwright offers several features that make it a valuable tool for a11y testing. One of its most significant features is the ability to capture accessibility tree snapshots, offering you an insight into how your application is perceived by assistive technologies.

import { test, expect } from "@playwright/test";

test.beforeEach(async ({ page }) => {
  await page.goto("https://ray.run/");
});

test.describe("accessibility", () => {
  test("accessibility tree", async ({ page }) => {
    const tree = await page.accessibility.snapshot();
    expect(JSON.stringify(tree, null, 2)).toMatchSnapshot("accessibility-tree.json");
  });
});

In the above code snippet, we navigate to the desired page and capture the accessibility tree, comparing it with a previous run stored in accessibility-tree.json. This comparison allows you to identify any changes in the accessibility tree that may affect a11y.

Leveraging Axe-Core/Playwright for Automated Accessibility Testing

The @axe-core/playwright package is a valuable tool in the Playwright ecosystem for automating a11y tests. It provides support for running the axe accessibility testing engine as part of your Playwright tests. Let's take a look at how to utilize this package.

import { test, expect } from "@playwright/test";
import AxeBuilder from "@axe-core/playwright";

test.describe("homepage", () => {
  test("should not have any automatically detectable accessibility issues", async({ page }) => {
    await page.goto("https://ray.run/");
    const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
    expect(accessibilityScanResults.violations).toEqual([]);
  });
});

In this example, we're testing a page for automatically detectable accessibility violations. We import the @axe-core/playwright package and use Playwright's syntax to navigate to the page under test. We then await AxeBuilder.analyze() to run the accessibility scan against the page and verify that there are no violations in the returned scan results.

Advanced Accessibility Testing Scenarios with Playwright

Playwright provides several advanced features that allow you to perform more sophisticated a11y tests. For example, the AxeBuilder class supports numerous configuration options for axe. You can specify these options using a Builder pattern.

import { test, expect } from "@playwright/test";
import AxeBuilder from "@axe-core/playwright";

test.describe("homepage", () => {
  test("should not have any automatically detectable accessibility issues", async({ page }) => {
    await page.goto("https://ray.run/");
    const axeBuilder = new AxeBuilder({ page });
    axeBuilder.include("#someElement");
    const accessibilityScanResults = await axeBuilder.analyze();
    expect(accessibilityScanResults.violations).toEqual([]);
  });
});

Here, we've used the AxeBuilder.include() function to constrain an a11y scan to only run against one specific part of a page. This allows for more targeted testing based on your application's specific needs.

Landmark Testing with Playwright

Landmark testing involves checking for the existence of specific landmarks on your webpage. These landmarks are critical because they help users with assistive technologies navigate your website more effectively. Here's an example of how you can utilize Playwright for landmark testing.

import { test, within } from "@playwright/test";

test.describe("landmarks", () => {
  test("has main nav", async ({ page }) => {
    const nav = await page.$('navigation');
    expect(nav).toBeVisible();
  });

  test("has main landmark", async ({ page }) => {
    const main = await page.$('main');
    expect(main).toBeVisible();
  });

  test("has banner landmark", async ({ page }) => {
    const banner = await page.$('banner');
    expect(banner).toBeVisible();
  });
});

In this example, we're checking for the existence of a navigation, main, and banner landmark and ensuring they're visible on the page.

Incorporating Lighthouse for Accessibility Testing

While Axe provides robust automated accessibility testing capabilities, it's important to supplement it with additional tools for a comprehensive evaluation. One such tool is Lighthouse, an open-source project by Google that offers a range of audits for assessing web page quality, including accessibility.

You can access Lighthouse from Chrome by opening Developer Tools and selecting the Lighthouse tab.

To incorporate Lighthouse into your Playwright tests, you can use the playwright-lighthouse package. Here's an example of how you can run a Lighthouse accessibility audit:

import { type Browser, chromium, test as base } from '@playwright/test';
import getPort from 'get-port';
import { playAudit } from 'playwright-lighthouse';

export const test = base.extend<{}, { browser: Browser; port: number }>({
  browser: [
    async ({ port }, use) => {
      const browser = await chromium.launch({
        args: [`--remote-debugging-port=${port}`],
      });
      await use(browser);
      await browser.close();
    },
    { scope: 'worker' },
  ],

  port: [
    // eslint-disable-next-line no-empty-pattern
    async ({}, use) => {
      // Assign a unique port for each playwright worker to support parallel tests
      const port = await getPort();

      await use(port);
    },
    { scope: 'worker' },
  ],
});

test.describe('Accessibility Testing with Lighthouse', () => {
  test('should pass the Lighthouse accessibility audit', async ({
    page,
    port,
  }) => {
    await page.goto('https://ray.run/');

    await playAudit({
      page,
      port,
      thresholds: {
        accessibility: 100,
      },
    });
  });
});

In this example, we run the Lighthouse audit and assess that the accessibility score is 100, indicating that the page passes the audit.

Manual Validation and Exploratory Testing

While automated accessibility testing is a valuable tool, it's important to remember that it can only cover a portion of the WCAG (Web Content Accessibility Guidelines) requirements. To ensure a truly inclusive user experience, manual validation and exploratory testing are essential.

Manual validation involves manually inspecting and interacting with a website or application using assistive technologies, such as screen readers or keyboard navigation. This allows testers to identify any accessibility issues that may not be captured by automated tests.

Exploratory testing, on the other hand, involves exploring a website or application from the perspective of different user personas. By simulating real-world scenarios, testers can uncover potential accessibility barriers and usability issues that may impact users with disabilities.

Conclusion

Playwright is a powerful tool for a11y testing, providing a high-level API for automated and manual testing. By leveraging its capabilities, QA engineers can ensure that their applications are accessible to as many users as possible, enhancing user experience and inclusivity.

Unlock the Power of ChatGPT Functions and Supercharge Your Conversations!

Luc Gagan — Mon, 26 Jun 2023 00:24:26 +0000

OpenAI's cutting-edge models, like gpt-3.5-turbo-0613 and gpt-4-0613, introduce an exciting feature called "function calling." It empowers developers to define and invoke functions within the model's responses, making it a breeze to retrieve structured data and accomplish a wide range of tasks. In this article, we'll dive into the world of ChatGPT functions, exploring what they are, how to use them, and providing you with inspiring examples of their boundless use cases.

Let's start by unraveling the magic of ChatGPT functions!

What are ChatGPT Functions?

By embedding functions directly into the system prompt, you can guide the model to output a JSON object containing function arguments that seamlessly integrate with your code. It's important to note that the Chat Completions API doesn't execute the functions itself. Instead, it generates the necessary JSON to facilitate function calls, giving you complete control and flexibility.

The latest ChatGPT models have been fine-tuned to intelligently detect when to call functions based on the input and respond with JSON that perfectly matches the function's signature.

Exciting Use Cases for ChatGPT Functions

Let's explore some captivating use cases:

Supercharged Chatbots: Energize your chatbots by defining functions that interact with external APIs. Your chatbot can now answer questions and provide information sourced from various services. Imagine defining functions like send_email(to: string, body: string) or get_current_weather(location: string, unit: 'celsius' | 'fahrenheit') to send emails or fetch weather information, respectively.
Natural Language to API Calls: Convert user queries expressed in natural language into powerful API calls. Define functions that leverage context to transform queries like "Who are my top customers?" into API calls such as get_customers(min_revenue: int, created_before: string, limit: int). Seamlessly retrieve customer data from your internal API and dazzle your users with personalized insights.
Unleashing Structured Data: Extract structured data from unstructured text with ease. Define functions like extract_data(name: string, birthday: string) or sql_query(query: string) to dive into text inputs and extract specific information. Turn mountains of unstructured data into actionable insights, giving you a competitive edge.

As another example, I use functions in my Playwright Job Board to extract the name of the company from a job description and pull information from Crunchbase.

These examples merely scratch the surface of what ChatGPT functions can achieve. They open doors to integrating AI-driven conversational agents with external services, automating workflows, and unlocking hidden gems in unstructured data.

How to Harness the Power of ChatGPT Functions

Now that we've ignited your curiosity, let's explore how to put ChatGPT functions into action using the completions JavaScript package. Buckle up, here's your guide:

1. Get started by installing the completions package via npm. A single command sets the stage for your ChatGPT adventure:

npm install completions

2. Import the necessary modules and create a chat instance. It's time to rev up the engines!

import { createChat, CancelledCompletionError } from "completions";

const chat = createChat({
  apiKey: OPENAI_API_KEY,
  model: "gpt-3.5-turbo-0613",
});

3. Define your functions within the createChat configuration. Get ready to unleash the magic!

const chat = createChat({
  apiKey: OPENAI_API_KEY,
  model: "gpt-3.5-turbo-0613",
  functions: [
    {
      name: "get_current_weather",
      description: "Get the current weather in a given location",
      parameters: {
        type: "object",
        properties: {
          location: {
            type: "string",
            description: "The city and state, e.g. San Francisco, CA",
          },
          unit: { type: "string", enum: ["celsius", "fahrenheit"] },
        },
        required: ["location"],
      },
      function: async ({ location }) => {
        return {
          location: "Albuquerque",
          temperature: "72",
          unit: "fahrenheit",
          forecast: ["sunny", "windy"],
        };
      },
    },
  ],
  functionCall: "auto",
});

4. Send a message to the chat:

const response = await chat.sendMessage("What is the weather in Albuquerque?");

console.log(response.content);
// Prepare to be amazed: "The weather in Albuquerque is 72 degrees Fahrenheit, sunny with a light breeze."

As mentioned earlier, ChatGPT will automatically determine when and which function to call, but you can optionally tell it to call a specific function:

const response = await chat.sendMessage("What is the weather in Albuquerque?", {
  functionCall: {
    name: "get_current_weather"
  },
});

console.log(response.content);
// Output: "The weather in Albuquerque is 72 degrees fahrenheit, sunny with a light breeze."

The latter is mostly useful if you have functions with similar descriptions. Otherwise, ChatGPT is doing Okay job at picking the right function to call automatically.

With a simple message to the chat, the model will work its magic and, if suitable, invoke the defined function to retrieve the current weather in Albuquerque. The response you receive will contain the generated text, including the weather information obtained through the function.

Conclusion

ChatGPT functions empower you to build captivating conversational AI experiences by seamlessly integrating external services, automating workflows, and extracting meaningful insights. With ChatGPT, the possibilities are endless! So let your creativity soar, follow the provided examples, and embrace the exhilarating world of ChatGPT functions. Get ready to make your applications intelligent, interactive, and truly extraordinary!

Discover Your Next Role on My New Playwright QA Job Board!

Luc Gagan — Sat, 24 Jun 2023 21:43:21 +0000

Discover Your Next Role on My New Playwright QA Job Board!

Hello everyone! I hope you're all as excited about this news as I am. This weekend, I embarked on a fantastic journey of development and successfully built a niche QA job board - but it's not just any job board, it's one specifically for companies using Playwright (https://playwright.dev/)! Check it out at https://ray.run/jobs!

This might sound a bit unusual at first. A job board exclusively for Playwright jobs? But before you dismiss it as too specialized, allow me to explain why I felt this was a necessary step.

Why a Playwright-specific Job Board?

There's currently a massive, industry-wide shift taking place, with a surge towards test automation using Playwright. Playwright is a fantastic tool that has taken the tech industry by storm. It's allowing businesses to automate their browser-based testing, making QA more streamlined, faster, and more effective than ever.

However, despite this boom, there's one problem that's been glaringly evident. Finding these specific Playwright jobs is like searching for a needle in a haystack! It's painstakingly hard. So, to make life easier for everyone in our wonderful community, I thought, "Why not create a focused platform where employers and potential employees can connect, without the clutter of irrelevant listings?"

What Makes https://ray.run/jobs Unique?

Here's the exciting part: https://ray.run/jobs is not just your ordinary job board. All the jobs listed are:

100% Remote 🌎: The beauty of technology is that it brings the world to our doorstep. With the world rapidly embracing remote work, we ensure that all job postings are remote, allowing you to work from the comfort of your home, or wherever else you fancy!
Specifically for Playwright Users 🎭: This job board is built specifically for Playwright enthusiasts. If you have skills in @playwright/test, this is THE platform for you to showcase your expertise and find companies looking for your skills.
Manually Sourced by Me 🙈: That's right, folks! Every job you see on this platform has been handpicked by me. I've scoured the internet to bring the best, most relevant opportunities to you.
Direct Apply Links 🎯: There's no jumping through hoops here. All jobs listed on the board link directly to the application form. No middlemen, no unnecessary steps, just a straightforward path to your potential new job.

Final Thoughts

So there you have it, folks! A high-energy weekend project turned into a unique platform that brings you one step closer to your dream job. If you're a Playwright enthusiast looking for an exciting new opportunity, make sure you visit https://ray.run/jobs. You might just find your next role there.

Remember, in this ever-changing tech landscape, it's the niche skills that often set you apart. So keep honing your Playwright skills and get ready to make a significant impact in the industry. Here's to an exciting journey ahead with Playwright!

DEV Community: Luc Gagan

Introducing Auto Playwright: Transforming Playwright Tests with AI

Introducing Auto Playwright: Transforming Playwright Tests with AI

Streamlining Your Testing Workflow with Auto Playwright

Practical Use Cases

Simplifying Complex Tasks

Efficient Testing

The Tech Behind Auto Playwright

Why Choose Auto Playwright?

Join the Community

Conclusion

The Power of Conversion: Docker Run to Docker Compose and Vice-Versa

The Power of Conversion: Docker Run to Docker Compose and Vice-Versa

What is Docker Run and Docker Compose?

The Conversion Tool: Simplifying the Process

Leveraging Open-Source: Composerize and Decomposerize

Why This Tool Matters: Enhancing Workflow Efficiency

A Use-Case in Playwright End-to-End Testing

Conclusion: A Step Towards Simplified Docker Management

What would you like to see in a Playwright cheat sheet?

Efficient E2E Testing for Next.js: A Playwright Tutorial

Quickstart

Manual Setup

Crafting Your First Playwright E2E Test

Running Playwright Tests

Use webServer to Start the Development Server

Playwright on Continuous Integration (CI)

Using the Experimental test mode for Playwright

Mocking API responses

App Router

Error: No test info

Conclusion

DevTools

Mastering Playwright: Best Practices for Web Automation with the Page Object Model

The Anatomy of a Page Object

Understanding Page Object Model Significance

Identifying Properties

Identifying Locators

Identifying Actions

Identifying Assertions

Using Page Objects in Tests

Using Fixtures to Create Page Objects

Best Practices for Page Objects

Separate Page Objects for Each Page

Separate Actions and Assertions

Avoid Extending Page Objects

Keep Page Objects Small

Do Not Use State in Page Objects

Principles of Good Page Objects

Advantages of the Page Object Model

Key Takeaways

Additional Resources

The Ultimate Software Testing Glossary: Your Feedback Needed!

Introduction

Dive Into The Glossary

How You Can Help

What's On The Horizon?

Let's Co-create

Bash Command Prettifier: The Solution to Formatting Tedious, Long Commands

Getting JSON with TypeScript types from ChatGPT response

Accessibility Testing with Playwright

Understanding Accessibility (a11y) Testing

Introduction to Playwright

Playwright for Accessibility Testing

Leveraging Axe-Core/Playwright for Automated Accessibility Testing

Advanced Accessibility Testing Scenarios with Playwright

Landmark Testing with Playwright

Incorporating Lighthouse for Accessibility Testing

Manual Validation and Exploratory Testing

Conclusion

Unlock the Power of ChatGPT Functions and Supercharge Your Conversations!

What are ChatGPT Functions?

Exciting Use Cases for ChatGPT Functions

How to Harness the Power of ChatGPT Functions

Conclusion

Discover Your Next Role on My New Playwright QA Job Board!

Discover Your Next Role on My New Playwright QA Job Board!

Why a Playwright-specific Job Board?

What Makes https://ray.run/jobs Unique?

Final Thoughts

Use `webServer` to Start the Development Server