Using cy.request()
command how to get meta
tag and script
tag content. Example given below:
<meta data-n-head="ssr"
data-hid="og-title" property="og:title"
content="Blue zone booking area">
<script data-n-head="ssr" data-hid="nuxt-jsonld-6378ffa8" type="application/ld+json">
{"@context":"https://schema.org", "@type":"WebPage",
"headline":"Parcel area for Blue Zone one",
"url":"https://staging.booking.com/au/booking-area/zone/blue/"}
</script>
I have tried cy.wrap($meta) and iterate but it doesn't work ?. Can anyone suggest how can we grab content="Blue zone booking area" attribute from meta tag and headline attribute content from the script tag ?
note : This is not a front end test, that's why I am using cy.request()
to make sure that the SEO/SSR are looking good in our website. As google SEO send a request and hit the above url, so then we should make sure that the rendering are looking good. When you use cy.visit() or cy.get() command it will enable the browser javascript and that is not I want
cy.request(apiHelper.makeGeneralRequestObject("au/booking-area/zone/blue/"))
.then((response) => {
const htmlString = response.body;
const parser = new DOMParser();
const parseHtml = parser.parseFromString(htmlString, 'text/html');
const $meta = parseHtml.getElementsByTagName('meta');
$meta.each(($elem)=>{
// how to get at here
})
});
Looks like you are mixing up Cypress/jQuery style with DOM (native) style queries.
This should do it using the DOM parser
cy.request({
url: 'https://www.booking.com/au',
failOnStatusCode: false
}).then(response => {
const parser = new DOMParser()
const doc = parser.parseFromString(response.body, 'text/html')
const metaTags = doc.head.querySelectorAll('meta') // pull <meta> from document head
metaTags.forEach(metaTag => { // it's a DOMList, use forEach()
const key = metaTag.name // not all have a "name"
const content = metaTag.content // all will have content
console.log(key, content)
})
})
Or with Cypress (arguably better if performing SEO)
cy.visit('https://www.booking.com/au')
cy.document().then(doc => {
cy.wrap(doc.head).find('meta').each($meta => {
const key = $meta.attr('name')
const content = $meta.attr('content')
console.log(key, content)
})
})
Also consider Bahmutov - Cypress Lighthouse Example. There is a SEO section in Lighthouse, and the results for https://www.booking.com/au
currently show
No
<meta name="viewport">
tag found
jsonLD
There is an example of jsonLD test here cypress-automated-test-for-seo-data
it("Verify jsonLD structured data - simple", () => {
// Query the script tag with type application/ld+json
cy.get("script[type='application/ld+json']").then((scriptTag) => {
// we need to parse the JSON LD from text to a JSON to easily test it
const jsonLD = JSON.parse(scriptTag.text());
// once parsed we can easily test for different data points
expect(jsonLD["@context"]).equal("https://schema.org");
expect(jsonLD.author).length(2);
// Cross referencing SEO data between the page title and the headline
// in the jsonLD data, great for dynamic data
cy.title().then((currentPageTitle) =>
expect(jsonLD["headline"]).equal(currentPageTitle)
)
})
})