Why Test?
- Test criteria’s allows testers to monitor the quality of a product throughout its development cycle by spending more time familiarizing themselves with its features and functions. This helps maintain their knowledge of the project, which will be useful if issues arise after changes have been made to the code.
- It also helps to understand the usability of developed software from an end-user perspective.
- It helps in validation and verification in all the aspects, such as checking the basic criteria’s which are documented below.
Performance
The first step is to load your project in a Chrome browser and then get ready to trigger the performance problem you're experiencing. You'll want to open Chrome's developer tools and select the Performance tab. Click the record button when you're ready to start profiling the performance of your Angular app.
Responsive design
Responsive testing is a process of testing websites or web applications to see how they perform on different devices such as desktops, laptops, tablets, and smartphones. Responsive testing helps ensure that the user experience is as good as possible no matter what device they are using to access the application.
The first step in a responsive test is to manually test your code against our common viewport sizes.
The second step is to test your website on real mobile devices, this will provide more behavioural insights.
Testing should include:
- Display and align the content consistently
- Render text legibly on all scales and viewports
- Keep content (text and images) within their containers
- Display and resize images as needed
- Allow users to scroll vertically or horizontally, as in the case of responsive data tables
- Let users navigate via links and menus on all devices
- Scale/resize content based on portrait or landscape orientations in mobile devices
If you want to find any issues, you’ll need to run your mobile responsive test. Here are a few responsive design test tools that you can use:
- Chrome Developer Tools
- Responsive Test by DesignModo
- Browser Stack Responsive Tools
Accessibility Testing
Accessiblity testing of all our code and components is critical to Phoenix Groups commitment to being inclusive and supporting vulernable customers.
As part of our test criteria, it is important to familiarise yourself with our accessibility guidelines and what is required for testing.
The guidelines will change in line with web standards so it is also important to review our changelog for updates as well as specific code samples in our documentation
Accessibility checks with a11y addon
- Accessibility tests audit the rendered DOM against a set of heuristics based on WCAG rules and other industry-accepted best practices. They act as the first line of QA to catch blatant accessibility violations.
- This Storybook add-in can help you improve the accessibility of your UI components. Accessibility is the process of making websites accessible to everyone. It means supporting accessibility requirements like: Keyboard navigation Screen reader support Touch-friendly Useable color contrast Reduced motion Zoom support.
How it works
Storybook's a11y addon runs Axe on the selected story. Allowing you to catch and fix accessibility issues during development. It will show the violations like below.
Cross Browser compatibility testing
- Cross-browser compatibility testing is non-functional testing to ensure all the functionalities are consistently working parallelly across all browsers- Edge, Chrome, Safari, etc. All browsers have different configurations and code interpretations. Browser compatibility ensures uniformity across all browsers.
- It ensures that everything works perfectly irrespective of the operating systems, devices, and browsers it is accessed from.
- This is a type of non-functional testing that validates the compatibilities of applications on a range of browsers. The application might not respond as expected across different browsers and devices if cross-browser compatibility testing is not conducted.
Cross browser compatibility testing checklist:
The cross-browser compatibility testing checklist includes three parts –
- General Browser Compatibility Testing Checklist
- Layout and Design Checklist
- Functional Compatibility Checklist
General browser compatibility testing checklist:
The General Browser Compatibility Testing checklist emphasizes testing the fundamental features that are essential for the website’s proper functioning. Some of them are as follows:
- Validate the CSS, HTML and XHTML. Always ensure that all definitions abide by relevant standards and that you haven’t left any open tags.
- Validate the SSL certificate. Some SSL certificates are not compatible with all browser versions. Hence, proper verification of certificates must be done. You also need to make sure who is the owner of the website domain that you are using.
- Validate the fonts, fields, and design
- Verify that the code is working effectively on multiple screens with different size ratios and resolutions.
- Verify the DOCTYPE instructions on every webpage. This is done to ensure that the webpages are parsed in the same way by all the various browsers.
- Since API calls are browser-dependent, you must be careful if your application uses APIs. It would be best if you made sure that the APIs are compatible across various browsers.
- Verify the X-UA-Compatibility meta tag in the HTML. It is done to overturn a user’s compatibility view setting in Internet Explorer for your website.
Layout and design checklist:
The Layout and Design checklist includes all the parameters that play an important part in ensuring the optimal aesthetics of the webpage.
- Verify the consistency in layout, style, and design in all the browsers used for Cross Browser Compatibility Testing
- Verify that all the images are present in standard resolution
- Take care of basic alignment settings on all the browsers and operating systems used for Cross Browser Compatibility Testing
- Verify that all the fonts and designs are incorporated correctly.
- Check that fonts are consistent in size, colours, etc., on all the browsers used for Cross Browser Compatibility Testing
- Verify that all the forms and fields are correctly aligned on all the various browsers
- Verify that the colours are consistent on all the different browsers
- Validate the website’s responsiveness on the various browsers used for Cross Browser Compatibility Testing
- Validate the proper alignment of data
- Verify that the spacing of text, images, and all the other elements are proper and consistent on all browsers
- Validate the browser compatibility for all the audio and video formats included in your code
- Validate that the scroll bars are functioning correctly on all the browsers
- Validate the source code for any usage of special characters
- Verify that the zoom in and zoom out functions are working correctly
- Verify that the mouse arrow can hover over elements and select elements correctly
- Verify that all the drop-down fields show all the options in it
- Verify the appearance of pop-ups and the consistency of pop-ups on all the browsers
Functional compatibility checklist:
Below is a functional checklist to verify that all the functionalities of the code are working as expected across all the browsers used for Cross Browser Compatibility Testing:
- Verify that all the third-party code incorporated in the code are compatible with all the browsers
- Verify that the filled forms and fields are validated across all browsers.
- Verify that all the different functions of the forms are working correctly. Some examples of these functions are saved data, import data, export data, and the submit button.
- Verify that the script is validated across all the different browsers.
Cross-browser testing with Browser Stack
Follow the following steps to perform Cross Browser Compatibility Testing using Browser Stack:
- First, identify all the features you want to test and note the steps to specify the scenarios. For instance, let us say you want to test the login feature of Facebook.
- Then, identify the combinations of all the browsers and platforms you want to test. You can use the popularity or site traffic analysis for the identification process. Going by our example, assume that you want to test this on all Samsung devices.
- Decide if you want to run the tests manually or automatically. Let’s say we want to test it manually.
- Once everything is fixed, sign up and create a free account on BrowserStack Account.
- Go to the Live dashboard and select a device (Samsung Galaxy S22).
- Execute the noted test scenarios on the selected combination of browsers and devices.
- Record and share the results of the test scenarios with the relevant teams who are in charge of debugging and fixing issues
- Execute the Cross Browser Compatibility tests continuously to ensure you didn’t miss any critical bugs.
Code is peer reviewed
A peer review is an evaluation at the end of a development cycle. A peer review is when another developer or a team of developers review code written by one developer or a group of developers. The purpose of a peer review is to verify that the code follows specifications and follows best practices and standards.
Unit tests
To run Unit Tests, a section of code is written by the developers to test a particular function in the software application.
The function can also be isolated by the developers to perform a more thorough test, which will reveal any unnecessary dependencies between the function being tested and the other units so that the dependencies can be removed. Most of the time, the developers use frameworks (?) to create automated test cases for unit testing.
- Code coverage techniques used in Unit Testing are listed below:
- Statement Coverage
- Line Coverage
- Branch Coverage
- Function Coverage
- Unit tests help to fix bugs early in the development cycle and save costs. It helps the developers to understand the testing code base and enables them to make changes quickly.
To test the design system components we are going to use Playwright.