Playwright: toHaveAttribute is not working when checking the Meta Keywords

Question

I wanted to verify the meta keywords in our site. To verify, I used toHaveAttribute and this xpath:

page.locator('[name="keywords"]');

My scenario is:

Go to view page source
Locate the meta keywords:
Verify if the expected and actual string matched by using toHaveAttribute

But somehow when checking the meta keywords it didn't pass. I am using the same method/script when checking the meta description and it works. Now I am confused why it is not working when checking the meta keywords. Here is my script:

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

test('test', async ({ page }) => {
  await page.goto('https://stage-unientwww.euwest01.umbraco.io/');
  await page.getByLabel('User name').click();
  await page.getByLabel('User name').fill('unienttest');
  await page.getByLabel('Password').click();
  await page.getByLabel('Password').fill('Unient1234');
  await page.getByRole('button', { name: 'Log in' }).click();
  await page.getByRole('button', { name: 'Accept All' }).click();
  await page.getByRole('heading', { name: 'Your Versatile Partner for Better Offshoring' }).click({
    button: 'right'
  });
  await page.goto('view-source:https://stage-unientwww.euwest01.umbraco.io/');
  const Keywords = page.locator('[name="keywords"]');
  await expect(Keywords).toHaveAttribute('content','Unient, bpo company, outsource company, bpo company philippines, bpo outsource, one outsource, offshoring australia, outsourcing philippines, outsourced bpo, bpo companies.');

The meta element:

<head>
    <meta name="description" content="Empower your business to function onshore and offshore as one enterprise with Unient's versatile range of services and regional service delivery capabilities."
    <meta name="keywords" content="Unient, bpo company, outsource company, bpo company philippines, bpo outsource, one outsource, offshoring australia, outsourcing philippines, outsourced bpo, bpo companies"
</head>

As discussed in your [last thread](https://stackoverflow.com/q/75705565/6243352), don't navigate to `view-source`, just go right to the page. `view-source` returns the page as text, so you'd have to either plop that text (with `page.content()`) into an HTML parser or use a substring test, but you're trying to manipulate it as HTML, so a normal nav seems correct. — ggorlen, Mar 13 '23 at 16:16

ggorlen · Answer 1 · 2023-03-15T00:39:57.533

Instead of

await page.goto('view-source:https://stage-unientwww.euwest01.umbraco.io/');

Use

await page.goto('https://stage-unientwww.euwest01.umbraco.io/');

view-source: renders a page source as text with HTML for formatting instead of parsing and executing the source HTML. If you want to use locators and query or manipulate the page in any way, you'll need the actual parsed HTML page and a DOM.

I'd also tighten the CSS selector (not an XPath) a bit to clarify the tag:

page.locator('meta[name="keywords"]');

Looking at the page a bit more closely, you have two head tags and malformed HTML, so the page is invalid:

<!-- ... -->
        </nav>
    </header>

    

<head>
    <meta name="description" content="Empower your business to function onshore and offshore as one enterprise with Unient's versatile range of services and regional service delivery capabilities."
    <meta name="keywords" content="Unient, bpo company, outsource company, bpo company philippines, bpo outsource, one outsource, offshoring australia, outsourcing philippines, outsourced bpo, bpo companies"
</head>

<style>

</style>
<!-- ... -->

You can see this second <head> tag is dumped randomly inside the <body> and is missing closing > characters, so it's probably ignored by the browser. If you can move it into the actual <head> and fix those missing >s, then the above code should work. You can see the missing >s in your original question.

https://validator.w3.org/nu/#textarea is useful for validating your HTML. Invalid HTML can be ignored and rearranged in surprising ways.

Playwright: toHaveAttribute is not working when checking the Meta Keywords

1 Answers1

Linked