The following POP is the process to follow in order to successfully test the client website before handover.

The QA Report process has 3 stages

1. Testing & Report (QA Tester)
2. Fixes (Lead Dev)
3. Re-test validation of fixes (PM)

‍

1. Preparation & Setup

1. Access the QA Environment
   • Ensure you have the correct staging or test site URL in Webflow.
   • Confirm credentials (if applicable) are ready for any password-protected pages.
     ‍
2. Gather Project-Specific Requirements
   • Familiarise yourself with any special functionality or integrations that need testing (e.g., forms, CMS filtering, eCommerce, animations).
     ‍
3. Organize Your Tools
   • LambdaTest for cross-browser and device testing.
   • Markup for visual feedback/bug tracking - Create a Markup with the correct website already added. Name the Markup Project Name - INTERNAL QA (e.g. Paddle Creative - INTERNAL QA)

‍

2. Testing in LambdaTest

LambdaTest is used to ensure the site performs correctly across various browsers and devices. Below is the recommended process and order:

2.1 Cross-Browser Testing

1. Select Browsers & Versions
   • Test on the latest versions of Chrome, Firefox, Safari, Edge, (there is no need to test Opera, Internet Explorer or other browsers)
   • Prioritize the browsers used most by your client’s audience or that meet project requirements.
     ‍
2. Desktop Viewports
   • Start with the most common desktop resolution (e.g., 1920x1080).
   • Also check smaller, laptop specofic sixes such as 1366x768 or other relevant screen sizes.
     ‍
3. Test Key Functionalities
   • Check the site’s layout and spacing (header, footer, body content).
   • Verify navigation (menu items, dropdowns, sticky headers).
   • Confirm any animations or interactions (hover states, scrolling effects).
   • Ensure images and icons load properly/
     ‍
     
4. Document Issues
   • As you identify any bugs or inconsistencies, take screenshots through LambdaTest or record a Loom of the issue within LambdaTest.
   • Make notes on the specific browser version, resolution, and steps to reproduce the issue.
   • Add a note in the correct place in Markup of the project which is a comment/screenshot/Loom recording.
     ‍

2.2 Mobile & Tablet Testing

1. Device Selection
   • We need to test latest devices and selected older devices on iOS and Android.
   • Start with the latest iPhone and Android devices. On iPhone test on Safari and Chrome. On Android test on Chrome.
   • Then go back to older phone versions on iOS and Android and test as above.
   • Test on tablets such as iPad or Android tablets as well.
     ‍
2. Responsive Checks
   • Verify the responsiveness of each page’s layout.
   • Check for text alignment, button sizing, and spacing.
   • Test mobile-specific features like off-canvas menus, mobile form factor, etc.
     ‍
3. Functional Testing
   • Confirm all touch interactions work correctly (taps, swipes, long-press if applicable).
   • Check that forms are easy to use on mobile (correct keyboard types, no overlapping elements).
   • Ensure pop-ups or modals display and close properly.
     ‍
4. Document Issues
   • Capture screenshots via LambdaTest for any bugs.
   • Note the exact device, OS version, and browser in your remarks.

3. Reporting in Markup

Here’s how to effectively capture and report each issue:

1. Open the Page in Markup
   ‍
2. Add a Comment or Bug
   • Click directly on the part of the page where the issue is located.
   • Provide a concise and descriptive comment:
     • Example: “Safari 14 on macOS 11 – the ‘Submit’ button overlaps the text field when zoomed to 125%.”
       ‍
3. Attach Screenshots
   • Where possible, attach the relevant screenshot from LambdaTest for clarity (screenshots / Loom video).
   • Include environment details: browser, version, device, OS.
     ‍
4. Outline Steps to Reproduce
   • In the comment, detail the steps needed to replicate the bug (e.g., “Open page on iPhone 12, tap the hamburger menu, scroll down—notice the menu items overlap.”).
     ‍
5. Save and Notify
   • Ensure the comment/bug is saved.

4. Deliverable: QA Bug Report

After completing cross-browser and device tests and logging issues in Markup:

1. Create a Summary Report
   • Include a link to the Markup project in the Monday task.
   • Summarise any major findings or recurring trends.
     ‍
2. Share with Project Manager & Dev Team
   • Provide them with a brief outline of the testing completed (browsers/devices used, main focus areas, etc.).
   • Highlight critical or blocker issues that need immediate attention.