Answer

Verifying Website Title with Playwright's Actionability Checks

Playwright's actionability checks are your go-to tool for ensuring a website title is set. These checks include Attached, Visible, Stable, Receives Events, and Enabled Editable check.

You can use the innerText or innerHTML actionability check. These checks confirm that the element is attached to the DOM, visible on the page, and its content is stable.

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

test('Check website title', async ({ page }) => {
  await page.goto('https://ray.run/');
  const title = await page.title();
  console.log(title);
});

Once you've confirmed the title is set, you can perform further actions like getting its text content or asserting its value against an expected value.

Be aware that some actions like page.click() support a force option that disables non-essential actionability checks. It's best to avoid using this unless absolutely necessary as it may lead to unreliable test results.

For debugging, consider using Playwright's trace viewer for CI failures. It provides a full trace of your tests as a local Progressive Web App (PWA) that can be shared for troubleshooting.

For local debugging in VSCode, install the VS Code extension and run tests in debug mode. Just right-click on the line next to the test you want to run, and it will open a browser window and pause at the breakpoint.

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

test('Check website title', async ({ page }) => {
  await page.goto('https://ray.run/');
  const title = await page.title();
  console.log(title);
  debugger;
});

Remember, efficient testing is all about using the right tools at the right time. Happy testing with Playwright!