{"id":308,"date":"2022-01-27T03:04:16","date_gmt":"2022-01-27T11:04:16","guid":{"rendered":"https:\/\/blog.mozilla.org\/performance\/?p=308"},"modified":"2022-01-27T03:04:16","modified_gmt":"2022-01-27T11:04:16","slug":"another-step-in-automating-the-pageload-recordings","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/performance\/2022\/01\/27\/another-step-in-automating-the-pageload-recordings\/","title":{"rendered":"Another Step in Automating the Pageload Recordings"},"content":{"rendered":"

Background<\/h3>\n

In a previous article, Kimberly Sereduck<\/a> told us about Updates to Warm Page Load Tests<\/a> and how we are continuously working to make our tests more representative of real user behavior. Besides that, we are working on automating the process of recording the website’s page load.<\/p>\n

The Issue<\/h3>\n

One challenge in this process is the GDPR prompts that appear in the EU territory. There are a few ways the internet sites allow visitors to set their cookie preferences, from a simple notice included in the page, to prompts that load on a layer over the website. One problem with those is that they sometimes take a while to load, especially on cold loads (first page load after the browser is open). Some of them even take a good portion of the screen, obstructing the calculation of the visual metrics.<\/p>\n

\"espn.com

espn.com cookie prompt – before<\/p><\/div>\n

The Fix<\/h3>\n

In order to have an objective measurement of the page load times, we had to treat them in one way or the other. The automation consists of saving the minimal cookie preferences allowed by every website.<\/p>\n

\"cnn.com

cnn.com – after<\/p><\/div>\n

Once the prompt is dismissed, it won’t appear on subsequent loads of the page. This is translated into cleaner and more objective measurements of the site. The way we treat those prompts can be used in the future for automating all sorts of similar scenarios.<\/p>\n

The code that handles those prompts is pretty simple. We save the list of Xpath addresses of the elements to be clicked on and we use browsertime\u2019s click by Xpath<\/a> to interact with the page.<\/p>\n

await commands.measure.start(testUrl);\r\nif (input_cmds) {\r\n  context.log.info(\"Searching for cookie prompt elements...\");\r\n  let cmds = input_cmds.split(\";;;\");\r\n  for (let cmdstr of cmds) {\r\n    let [cmd, ...args] = cmdstr.split(\":::\");\r\n    context.log.info(cmd, args);\r\n    let result = await commands.js.run(\r\n      `return document.evaluate(\"` +\r\n        args +\r\n        `\", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;`\r\n    );\r\n    if (result) {\r\n      context.log.info(\"Element found, clicking on it.\");\r\n      await run_command(cmdstr, context, commands);\r\n    } else {\r\n      context.log.info(\r\n        \"Element not found! The cookie prompt may have not appeared, please check the screenshots.\"\r\n      );\r\n      break;\r\n    }\r\n  }\r\n}<\/pre>\n
This is how a side-by-side comparison looks before and after:<\/p>\n
\nhttp:\/\/blog.mozilla.org\/performance\/files\/2022\/01\/cold-side-by-side.mp4<\/a><\/video><\/div>\n
What’s Next?<\/h3>\n
This automation was tested on desktop site only, but we plan to include the mobile sites as well. And this doesn\u2019t stop here. Gregory Mierzwinsky<\/a> is working on an automated system of logging into the websites that require authentication in our scenarios.<\/p>\n","protected":false},"excerpt":{"rendered":"
Background In a previous article, Kimberly Sereduck told us about Updates to Warm Page Load Tests and how we are continuously working to make our tests more representative of real … Read more<\/a><\/p>\n","protected":false},"author":1808,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[457005,453323,311,812,265],"_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/performance\/wp-json\/wp\/v2\/posts\/308"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/performance\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/performance\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/performance\/wp-json\/wp\/v2\/users\/1808"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/performance\/wp-json\/wp\/v2\/comments?post=308"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/performance\/wp-json\/wp\/v2\/posts\/308\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/performance\/wp-json\/wp\/v2\/media?parent=308"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/performance\/wp-json\/wp\/v2\/categories?post=308"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/performance\/wp-json\/wp\/v2\/tags?post=308"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}