A Login Profile allows you to take screenshots of pages that require a user to be logged in. This only applies to websites where a user can login via an HTML form on the website itself, not for sites requiring Basic/HTTP authentication.
Overview of how login profiles work with screenshots:
- The Login URL is loaded in the browser. This can be different from the Screenshot Test URL depending on where the login form can found.
- The screenshot driver searches for the form fields by the Locators specified for username, password, and submit button. If all fields are found, the login credentials are keyed in and the submit button clicked, else the test is marked as failed.
- If submitting the form causes a new page to load, the process will wait until the page completes. For AJAX-based forms, the system waits 10 seconds by default. (You can increase this time by adding a delay under the screenshots Advanced Options.)
- Since many login forms take the browser to a different page than the one requested for screenshots, the screenshot driver loads the Screenshot Test URL before beginning the actual screenshots.
Note: Since the process cannot tell whether or not we are truly logged in, be sure to verify this profile on one browser before running a test with multiple browsers, otherwise you may get unexpected results.
Step 1 – Start a new screenshot test
- Login to crossbrowsertesting.com and click ‘Screenshots’ at the left side of the app.
- Enter the URL for the page you would like to take screenshots of.
In this example, we are taking a screenshot of our secure account page.
Step 2 – Access advanced options
- Click the Advanced Options button next to the URL.
Step 3 – Turn on login profile option
- Click the toggle button next to Login Profile option to turn it on. It should now say ‘ON’ with a green background.
- Then click the New button to create a new profile which launches a dialog window.
Step 4 – Enter the login URL
- The New Login Profile dialog will appear on the screen.
- Change the Login URL to point to the path where your login form can be found and then click Next. (We recommend changing this even if the web server will redirect to the link by itself.)
Since the login page for the entire crossbrowsertesting.com website is always at /login, we change the login profile’s URL to use this path. This means we can use this same login profile for future screenshot tests for any page on our site.
Step 5 – Select or fill in the form field locators
- On the next screen, the window will ask for the locators for each field in the login form.
- By default, the system will attempt to find all possible fields and display them as options in the dropdowns. It will also try to automatically select the best option.
- Verify and select the correct field in the dropdown options since the automated selection may not be the correct field.
- If unsure of your selections, it is recommended to look at the source HTML of the login page and either select the appropriate field in the dropdown, or manually enter the correct locator string. (See next step.)
Here we can see that the Username and Password fields were automatically found and selected but the submit locator was not.
Step 6 – Find missing locators
- Looking at the source HTML for our login page, we can see that the submit button has the attribute id=”login-btn”.
- We manually enter this locator for the submit button as: id=login-btn. (Do not use quotes!)
- The format for entering locators is ‘attribute=value’. Additional examples can be found here: Specifying Element Locators.
- Once all locator options have been filled in, click Next.
Step 7 – Enter username and password
- Next we enter our username and password for logging in to the website and click Next.
Step 8 – Review profile
- The next step asks you to review your profile settings and details the steps the screenshot system will take to automatically log in to your website.
- Click Back if you need to make any changes, or click Next to continue.
Step 9 – Name and save the profile
- By default, the system will name your profile with the domain name of the login URL. You can change this at this step if you want to name it something more specific. If unsure, you can always rename it later.
- Click Save Profile to finish.
Step 10 – Run a test with your new profile
- The new profile will be automatically selected after saving and can be selected from the dropdown on future screenshot tests.
- Before running screenshots on multiple browsers, we recommend testing the login profile on one browser to ensure it works as intended. If one of the locators is incorrect, or the username and password was entered wrong, the screenshot will fail or return an unexpected result.
- Clear the browsers selected and pick only one from the list before clicking Run Test.
Step 11 – Verify results
- After your screenshot test completes, if everything works as expected, you should see a screenshot result for the page you intended. If not, you can edit the Login Profile and make changes as necessary.
- Once you’ve verified your profile works, you can select the same login profile in advanced options from the dropdown on any screenshot test that requires it and feel confident to run tests on multiple browsers.
