Cross Browser Compatibility Testing Basics

Web browsers
1. Google Chrome
  1. Version 51
    1. #1.Home page moves blocks of text when the zoom is under 100%
      1. http://www.screencast.com/t/BIHitqGqXp
      2. Explore with TemplateMonster a solution, the original template acts the same way
    2. #2. Message box jumps around the screen in contact us
      1. http://www.screencast.com/t/EtdU1INygv6
      2. Test case: Test if the problem occurs because of Grammerly Add-on
      3. IE 10 & 11 no add on
      4. Pass
      5. Firefox 46.0.1 no add on
      6. Pass
      7. Chrome no add on
      8. Pass
      9. Chrome with Grammerly
      10. Fail
      11. Problem appears to be caused by a specific add-on, Grammerly
    3. #24 Pop up background page spinner wrong color
      1. Fixed by David
2. Internet Explorer
  1. Version 10
    1. Fail
      1. #3 Buttons dont load to page
      2. Explore why?
      3. #4 Takes a long time to refresh a web page
      4. http://www.screencast.com/t/UrpT5trXopEo
      5. #5 Home page has large white box taking over left side of screen, ~25% of screen
      6. Big_white_box.png
      7. Template monster find out why
      8. #6 Home page moves blocks of text when the zoom is under 100%
      9. http://www.screencast.com/t/QUzeGGwP0yX
      10. #24 Pop up background page spinner wrong color
      11. Fixed by David
      12. #7 Shows a different favicon compared to other browsers
      13. Different_browser_logo.png
      14. Fixed by David
      15. #8 Copyright and Privacy Policy Text is cut off a little bit
      16. Copyright_and_Privacy_policy_text_IE.png
      17. #9 The Blog widgets are below Blog Posts
      18. http://www.screencast.com/t/gWSdEp9c1
      19. Blog_widgets_showing_below_blog_posts.png
      20. #20 Strange X button that links to a microsoft.com page when you refresh the website
      21. http://www.screencast.com/t/mW3Fvc9s
      22. Strange_x_button.png
      23. Explore what causes this?
      24. #22 Scroll bar does not work
      25. Scroll_bar_broken.png
      26. #23 Name box slightly shifts to the left after clicking on the box
      27. Name_box_shift.png
  2. Version 11
    1. #21 Shows a different favicon compared to other browsers
      1. http://www.screencast.com/t/cUmjuwJ4l13y
      2. Fixed by David
    2. #24 Pop up background page spinner wrong color
      1. Fixed by David
    3. #22 Background image jumps when scrolling with the arrow keys - on 1366*768 resolution
      1. Test Case - Test the same resolution on another type of laptop
3. Mozilla Firefox
  1. Version 46.0.1
    1. #10 Home page looks different when the zoom is under 100%
      1. http://www.screencast.com/t/aTreOMKXL8jS
    2. #24 Pop up background page spinner wrong color
      1. Fixed by David
CSS Elements
1. CSS Version?
UI Elements
1. Components Overlapping?
  1. Text
    1. # Blog Search Tool, over # digits will run across the screen
  2. Buttons
    1. IE 10 #
      1. Fail
      2. Refer to Bug#3
2. Test across various standard resolutions
  1. 1440 x 900
    1. Pass
  2. 1366 X 768
    1. Pass
  3. 1360 X 768
    1. Pass
  4. 1280 X 800
    1. Pass
  5. 1280 X 768
    1. Pass
  6. 1280 X 720
    1. Pass
  7. 1024 X 768
    1. Pass
  8. 960 X 600
    1. Fail
  9. 800 X 600
    1. Fail
Cross Platform
1. Windows 7
2. Windows 10
Mobile Browsers
1. Google Chrome
  1. Version 51.0.2704.104
    1. #13 Background picture moves
2. Mozilla Firefox
  1. Version 4.0
    1. #15 Background picture moves
3. Apple Safari
  1. Version 9
    1. #19 Background picture moves
Resolution Tests
1. Test for standard resolutions
2. Try with random resolutions apart from standard ones
Devices
1. iPad Pro
2. iPhone 6 Plus
  1. Google Chrome
    1. Version 51.0.2704.104
      1. #14 Job Board looks like a narrow wall of text in portrait view
      2. Let people use landscape view, put a note on the website?
      3. #12 Can't flip back to the mobile theme from Desktop theme
  2. Mozilla Firefox
    1. Version 4.0
      1. #14 Job Board looks like a narrow wall of text in portrait view
      2. #16 Can't flip back to the mobile theme from Desktop theme
  3. Apple Safari
    1. Version 9
      1. #14 Job Board looks like a narrow wall of text in portrait view
      2. #18 Can't flip back to the mobile theme from Desktop theme
Mobile Platform
1. iOS 9.3.2
Automation
1. CSS Coverage
2. SiteShoter - Take Full page Screenshots
3. Beyond Compare - Helps in comparing the images of version 1 with version 2.
4. QuirksMode.org Thanks to Peter Paul Koch for building this matrix
5. imagemagick.org Pixcel by pixel picture comparison
6. Now, come up with an approach of connecting all these & creating a framework
Learning
1. What causes the page to change with zoom under 100%
  1. The original template does the same.
2. How CSS affects various browsers?
3. Look at the most current and popular browser versions to first test in
4. How do we do device testing? What are the main things you test devices for with one website?
5. How to change the Favicon
  1. Done
6. More Clarity on bug writing
Miscellaneous
1. Private Browsing
2. Incognito Window
3. With Internet
4. Without Internet
5. JS elements or client side behavior on various web browsers (if required based on context)
Test on web browsers
1. Change browser size
  1. Pass
2. Check the buttons go to the right place
  1. Pass
3. Refresh the web page
  1. Pass
4. Check for spelling errors
  1. Pass
5. Check the hyperlinks works
  1. Pass
6. Test the search bar works
  1. Pass
    1. http://screencast.com/t/Wjj51YBxqcgX
7. Zoom the web browser in and out
  1. Fail
    1. Refer to Bug#1
Test on mobile browsers
1. Zoom the web browser in and out
  1. Pass
2. Tilt the device portent to landscape
  1. Pass
3. Refresh the web page
  1. Pass
4. Check the buttons go to the right place
  1. Pass
5. Check for spelling errors
  1. Pass
6. Check the hyperlinks works
  1. Pass
7. Test the search bar works
  1. Pass