%% date:: [[2022-11-04]] %% # [[Tips for writing browser-based test scripts]] ## Determine user flow While protocol-based testing sends requests to simulate user behavior, browser-based testing automates interactions with webpage elements. Identify the steps that would be taken by a user that you'd like to simulate, focusing on the specific actions they might take to fulfill a general process, such as purchasing an item. Writing down every step helps you focus on what *users* do, rather than the messages their browsers send. ## Identify unique selectors Elements on a web page are given identifiers to distinguish them from each other. Since a script doesn't have the heuristic capabilities that a human user would, your browser-level script uses CSS *selectors* to identify elements to interact with. Choosing a good selector is essential to making frontend automated scripts that are reliable. ```javascript const element = page.$('a[class="woocommerce-LoopProduct-link woocommerce-loop-product__link"]'); element.click(); ``` In the code snippet above, the selector identifies the link on the page that has the class `woocommerce-LoopProduct-link woocommerce-loop-product__link` before clicking on it. Selectors can be based on element types, attribute values, element position within the page, and others. A good selector is: - **Unique**. Choose a selector that identifies only one element on the page, to avoid confusion. - **Static**. To avoid unnecessary rework of test scripts, choose a selector based on elements that are not changed frequently. For example, if the ID of a button is dynamically generated, consider using a selector based on the *label* of the button instead, which is less likely to change. If necessary, communicate to frontend developers to reduce unnecessary changes that break your test scripts. - **Simple**. Identifying elements based on the hierarchy of the page is usually simpler than writing complex regular expressions that may be more flaky or more difficult to maintain. Using the Element Inspector feature of [DevTools](https://developer.chrome.com/docs/devtools/) on most modern browsers can be very helpful in identifying the element you want your script to interact with. Some of them will even write selectors for you, but make sure you review them so that they follow the guidelines above. ## Use elements to verify responses In protocol-based test scripts, checks are used to verify that every page is successfully retrieved, usually by checking a part of the response headers or body. In browser-based test scripts, you can achieve the same type of verification by adding code that looks for key elements. For example, the code below looks for the checkbox element before it proceeds with the rest of the test. ```javascript const res = page.goto('https://test.k6.io/browser.php'); const checkbox = page.locator('#checkbox1'); checkbox.check(); ``` ## Take screenshots One of the advantages of using a browser-based test script is the ability to take screenshots during test execution. While it's good practice to handle all known errors within the script, it can also be useful to visually record what happened in the browser window for future troubleshooting. The following command saves a screenshot to the specified path. ```javascript page.screenshot({ path: 'screenshots/error.png' }); ``` Having screenshots tied to key actions or errors may help debug the script, especially in the beginning.