diff --git a/src/features/lcp-beacon-script.feature b/src/features/lcp-beacon-script.feature index 6348510..42e631c 100644 --- a/src/features/lcp-beacon-script.feature +++ b/src/features/lcp-beacon-script.feature @@ -10,77 +10,10 @@ Feature: Beacon script captures the right images. Scenario: Beacon captures expected images in desktop When I log out - And I visit the following urls in 'desktop' - | path | atfs | - | lcp_bg_inline_template | /wp-content/rocket-test-data/images/lcp/testjpeg.jpeg | - | lcp_bg_samestyle_template | wp-content/rocket-test-data/images/lcp/testjpg.jpg | - | lcp_img_loadedbydynamicjs_template | http://www.google.com/intl/en_com/images/logo_plain.png | - | lcp_bg_multimage_template | https://fastly.picsum.photos/id/976/200/300.jpg?hmac=s1Uz9fgJv32r8elfaIYn7pLpQXps7X9oYNwC5XirhO8, https://rocketlabsqa.ovh/wp-content/rocket-test-data/images/fixtheissue.jpg | -# | lcp_with_space_after_title | /wp-content/rocket-test-data/images/test_inline2.jpeg | - | lcp_test_template | /wp-content/rocket-test-data/images/lipsum_logo.jpg | -# | lcp_bg_responsive_webkit_template | /wp-content/rocket-test-data/image/test3.webp, /wp-content/rocket-test-data/images/lcp/testwebp.webp | -# | lcp_regular_image_template | /test.png, /wp-content/rocket-test-data/images/test_inline2.jpeg, /wp-content/rocket-test-data/images/Przechwytywanie.PNG, /wp-content/rocket-test-data/images/file_example_JPG_100kB.jpg | - | lcp_bg_multimage_template | https://fastly.picsum.photos/id/976/200/300.jpg?hmac=s1Uz9fgJv32r8elfaIYn7pLpQXps7X9oYNwC5XirhO8, https://rocketlabsqa.ovh/wp-content/rocket-test-data/images/fixtheissue.jpg | -# | lcp_bg_reponsive_imgset_template | https://fastly.picsum.photos/id/976/200/300.jpg?hmac=s1Uz9fgJv32r8elfaIYn7pLpQXps7X9oYNwC5XirhO8 | -# | lcp_rsponsive_imagegrid | https://www.w3schools.com/w3images/wedding.jpg, https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/lcp/testjpg4.jpg, https://www.w3schools.com/w3images/ocean.jpg, https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/lcp/testjpg4.jpg, https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/lcp/testavif.avif, /wp-content/rocket-test-data/images/lcp/testwebp.webp, /wp-content/rocket-test-data/images/Przechwytywanie.PNG, /wp-content/rocket-test-data/images/file_example_JPG_100kB.jpg, /wp-content/rocket-test-data/images/file_example_JPG_100kB.jpg | -# | lcp_attribute_template | https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/images/lcp/testPng.png, https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/images/wp-rocket2.svg, /wp-content/rocket-test-data/images/lcp/testsvg.svg, /wp-content/rocket-test-data/images/lcp/testjpeg.jpeg, https://rocketlabsqa.ovh/wp-content/rocket-test-data/images/fixtheissue.jpg, /wp-content/rocket-test-data/images/lcp/testavif.avif, /test.png, /wp-content/rocket-test-data/images/lcp/testgif.gif | - | lcp_no_dimension_svg | [] | - | lcp_no_dimensions_picture | /test.png, https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/test3.gif | -# | lcp_no_dimension_absolute_url | /rocket-test-data/images/lcp/testPng.png, https://cdn.pixabay.com/photo/2023/06/05/02/01/starry-sky-8041247_1280.jpg | -# | lcp_image_withspecialchar_template | /wp-content/rocket-test-data/images/testspace%202.png, https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/images/paperéquipesTest.jpeg | -# | lcp_img_addedbydynamicstyle_template | /wp-content/rocket-test-data/images/paper.jpeg, https://cdn.pixabay.com/photo/2023/06/05/02/01/starry-sky-8041247_1280.jpg | -# | lcp_withfetchpriorityhigh_template | https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/lcp/testjpeg.jpeg | -# | lcp_single_double | /wp-content/rocket-test-data/images/lcp/testwebp.webp | - | lcp_withfetchprioritylow_template | [] | - | lcp_withfetchpriorityempty_template | [] | - | lcp_withfetchpriorityinurl_template | [] | - | lcp_video_poster_template | [] | - | lcp_big_image_template | [] | - | lcp_no_fetchpriority | [] | - | lcp_6330_template | [] | - Then lcp and atf should be as expected in 'desktop' + And I visit the urls for 'desktop' Scenario: Beacon captures expected images in mobile - When I log out - And I visit the following urls in 'mobile' - | path | atfs | - | lcp_bg_inline_template | /wp-content/rocket-test-data/images/test_inline2.jpeg | - | lcp_bg_samestyle_template | https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/images/lcp/testavif.avif | - | lcp_img_loadedbydynamicjs_template | http://www.google.com/intl/en_com/images/logo_plain.png | -# | lcp_img_loadedbyjs_template | /test.png, https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/images/istockphoto-1184692500-612x612.webp | -# | lcp_with_space_after_title | https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/images/test_inline2.jpeg | - | lcp_test_template | /wp-content/rocket-test-data/images/test_internal2.jpg, https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/images/lipsum_logo.jpg | -# | lcp_bg_responsive_webkit_template | https://rocketlabsqa.ovh/wp-content/rocket-test-data/images/fixtheissue.jpg | -# | lcp_regular_image_template | /test.png, /wp-content/rocket-test-data/images/test_inline2.jpeg, /wp-content/rocket-test-data/images/lcp/testPng.png, /wp-content/rocket-test-data/images/Przechwytywanie.PNG, /wp-content/rocket-test-data/images/file_example_JPG_100kB.jpg, /wp-content/rocket-test-data/images/img_nature.jpg, /wp-content/rocket-test-data/images/mountain.webp | - | lcp_bg_multimage_template | https://fastly.picsum.photos/id/976/200/300.jpg?hmac=s1Uz9fgJv32r8elfaIYn7pLpQXps7X9oYNwC5XirhO8, https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/image/test3.webp | -# | lcp_bg_reponsive_imgset_template | https://fastly.picsum.photos/id/976/200/300.jpg?hmac=s1Uz9fgJv32r8elfaIYn7pLpQXps7X9oYNwC5XirhO8 | -# | lcp_rsponsive_imagegrid | https://www.w3schools.com/w3images/wedding.jpg, https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/lcp/testjpg4.jpg, https://www.w3schools.com/w3images/ocean.jpg, https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/lcp/testjpg4.jpg, https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/lcp/testavif.avif, /wp-content/rocket-test-data/images/lcp/testwebp.webp, /wp-content/rocket-test-data/images/Przechwytywanie.PNG, /wp-content/rocket-test-data/images/file_example_JPG_100kB.jpg, /wp-content/rocket-test-data/images/file_example_JPG_100kB.jpg | -# | lcp_attribute_template | https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/images/lcp/testPng.png, https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/images/wp-rocket2.svg, /wp-content/rocket-test-data/images/lcp/testsvg.svg | - | lcp_no_dimension_svg | https://discuss-assets.s3.amazonaws.com/original/3X/1/9/19823cc1f1f887d70755e0b500dd8ce2c51ba7f9.svg | - | lcp_no_dimensions_picture | /test.png, https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/test3.gif | -# | lcp_no_dimension_absolute_url | /rocket-test-data/images/lcp/testPng.png, /rocket-test-data/images/lcp/testjpg.jpg | -# | lcp_image_withspecialchar_template | /wp-content/rocket-test-data/images/testspace%202.png, https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/images/paperéquipesTest.jpeg | -# | lcp_img_addedbydynamicstyle_template | https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/images/lcp/testjpg.jpg , /wp-content/rocket-test-data/images/paper.jpeg | -# | lcp_withfetchpriorityhigh_template | https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/lcp/testjpeg.jpeg | -# | lcp_single_double | [] | - | lcp_withfetchprioritylow_template | [] | - | lcp_withfetchpriorityempty_template | [] | - | lcp_withfetchpriorityinurl_template | [] | - | lcp_video_poster_template | [] | - | lcp_big_image_template | [] | - | lcp_no_fetchpriority | [] | - | lcp_6330_template | [] | - Then lcp and atf should be as expected in 'mobile' - - Scenario: Beacon returns no LCP and ATF in mobile Given I install plugin 'https://github.com/wp-media/wp-rocket-e2e-test-helper/blob/main/helper-plugin/force-wp-mobile.zip' And plugin 'force-wp-mobile' is activated When I log out - And I go to 'lcp_no_images' in 'mobile' - And plugin 'force-wp-mobile' is deactivated - Then I must not see any LCP or ATF - - Scenario: Beacon returns no LCP and ATF in desktop - When I log out - And I go to 'lcp_no_images' in 'desktop' - Then I must not see any LCP or ATF + And I visit the urls for 'mobile' diff --git a/src/support/results/expectedResultsDesktop.json b/src/support/results/expectedResultsDesktop.json new file mode 100644 index 0000000..e1c417a --- /dev/null +++ b/src/support/results/expectedResultsDesktop.json @@ -0,0 +1,239 @@ +{ + "lcp_bg_inline_template": { + "lcp": [ + "/wp-content/rocket-test-data/images/test_inline2.jpeg" + ], + "viewport": [ + "/wp-content/rocket-test-data/images/lcp/testjpeg.jpeg" + ], + "enabled": true + }, + "lcp_bg_samestyle_template": { + "lcp": [ + "https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/images/lcp/testavif.avif" + ], + "viewport": [ + "https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/lcp/testjpg.jpg" + ], + "enabled": true + }, + "lcp_img_loadedbydynamicjs_template": { + "lcp": [ + "https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/images/lcp/testavif.avif" + ], + "viewport": [ + "http://www.google.com/intl/en_com/images/logo_plain.png" + ], + "enabled": true + }, + "lcp_img_loadedbyjs_template": { + "lcp": [ + "/wp-content/rocket-test-data/images/istockphoto-1184692500-612x612.webp" + ], + "viewport": [ + "/test.png", + "https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/lcp/testwebp.webp" + ], + "enabled": true + }, + "lcp_bg_multimage_template": { + "lcp": [ + "https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/image/test3.webp", + "/wp-content/rocket-test-data/image/file_example_JPG_100kB.jpg" + ], + "viewport": [ + "https://fastly.picsum.photos/id/976/200/300.jpg?hmac=s1Uz9fgJv32r8elfaIYn7pLpQXps7X9oYNwC5XirhO8", + "https://rocketlabsqa.ovh/wp-content/rocket-test-data/images/fixtheissue.jpg" + ], + "enabled": true + }, + "lcp_with_space_after_title": { + "lcp": [ + "https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/images/lcp/testwebp.webp" + ], + "viewport": [ + "https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/images/test_inline2.jpeg" + ], + "enabled": true + }, + "lcp_test_template": { + "lcp": [ + "/wp-content/rocket-test-data/images/test_internal2.jpg" + ], + "viewport": [ + "/wp-content/rocket-test-data/images/lipsum_logo.jpg" + ], + "enabled": true + }, + "lcp_bg_responsive_webkit_template": { + "lcp": [ + "https://fastly.picsum.photos/id/976/200/300.jpg?hmac=s1Uz9fgJv32r8elfaIYn7pLpQXps7X9oYNwC5XirhO8", + "https://rocketlabsqa.ovh/wp-content/rocket-test-data/images/fixtheissue.jpg" + ], + "viewport": [ + "/wp-content/rocket-test-data/image/test3.webp", + "/wp-content/rocket-test-data/images/lcp/testwebp.webp", + "https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/images/lcp/testavif.avif" + ], + "enabled": true + }, + "lcp_regular_image_template": { + "lcp": [ + "/wp-content/rocket-test-data/images/600px-Mapang-test.gif" + ], + "viewport": [ + "/test.png", + "/wp-content/rocket-test-data/images/test_inline2.jpeg", + "https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/lcp/testPng.png", + "/wp-content/rocket-test-data/images/Przechwytywanie.PNG" + ], + "enabled": true + }, + "lcp_bg_reponsive_imgset_template": { + "lcp": [ + "/wp-content/rocket-test-data/images/lcp/testavif.avif", + "/wp-content/rocket-test-data/images/lcp/testwebp.webp" + ], + "viewport": [ + "https://fastly.picsum.photos/id/976/200/300.jpg?hmac=s1Uz9fgJv32r8elfaIYn7pLpQXps7X9oYNwC5XirhO8", + "https://rocketlabsqa.ovh/wp-content/rocket-test-data/images/fixtheissue.jpg" + ], + "enabled": true + }, + "lcp_rsponsive_imagegrid": { + "lcp": [ + "https://www.w3schools.com/w3images/underwater.jpg" + ], + "viewport": [ + "https://www.w3schools.com/w3images/wedding.jpg", + "https://www.w3schools.com/w3images/rocks.jpg", + "/wp-content/rocket-test-data/images/lcp/testPng.png", + "/wp-content/rocket-test-data/images/lcp/testavif.avif", + "/wp-content/rocket-test-data/images/file_example_JPG_100kB.jpg", + "/wp-content/rocket-test-data/images/maxime-lebrun-6g3Akg708E0-unsplash.jpg" + ], + "enabled": true + }, + "lcp_attribute_template": { + "lcp": [ + "https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/wp-rocket.svg" + ], + "viewport": [ + "https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/images/lcp/testPng.png", + "https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/images/wp-rocket2.svg", + "/wp-content/rocket-test-data/images/lcp/testsvg.svg", + "/wp-content/rocket-test-data/images/lcp/testjpeg.jpeg", + "/wp-content/rocket-test-data/images/lcp/testavif.avif", + "/test.png" + ], + "enabled": true + }, + "lcp_no_dimension_svg": { + "lcp": [ + "/wp-content/rocket-test-data/images/lcp/testsvg.svg" + ], + "viewport": [], + "enabled": true + }, + "lcp_no_dimensions_picture": { + "lcp": [ + "https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/lcp/testavif.avif" + ], + "viewport": [ + "/test.png", + "wp-content/rocket-test-data/images/lcp/testjpg.jpg" + ], + "enabled": true + }, + "lcp_no_dimension_absolute_url": { + "lcp": [ + "https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/lcp/testjpg.jpg" + ], + "viewport": [ + "https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/lcp/testPng.png", + "https://cdn.pixabay.com/photo/2023/06/05/02/01/starry-sky-8041247_1280.jpg" + ], + "enabled": true + }, + "lcp_image_withspecialchar_template": { + "lcp": [ + "/wp-content/rocket-test-data/images/lcp/image%20with%20space.jpg" + ], + "viewport": [ + "/wp-content/rocket-test-data/images/testspace%202.png", + "https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/images/paperéquipesTest.jpeg" + ], + "enabled": false + }, + "lcp_img_addedbydynamicstyle_template": { + "lcp": [ + "/wp-content/rocket-test-data/images/paper.jpeg" + ], + "viewport": [ + "https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/images/lcp/testjpg.jpg" + ], + "enabled": true + }, + "lcp_withfetchpriorityhigh_template": { + "lcp": [ + "https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/images/test_inline2.jpeg" + ], + "viewport": [ + "/wp-content/rocket-test-data/images/lcp/testjpeg.jpeg" + ], + "enabled": true + }, + "lcp_single_double": { + "lcp": [ + ], + "viewport": [], + "enabled": true + }, + "lcp_withfetchprioritylow_template": { + "lcp": [ + "/wp-content/rocket-test-data/images/test_inline2.jpeg" + ], + "viewport": [], + "enabled": true + }, + "lcp_withfetchpriorityempty_template": { + "lcp": [ + "/wp-content/rocket-test-data/images/test_inline2.jpeg" + ], + "viewport": [], + "enabled": true + }, + "lcp_withfetchpriorityinurl_template": { + "lcp": [ + "https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/images/fetchpriority='high'.jpg" + ], + "viewport": [], + "enabled": true + }, + "lcp_video_poster_template": { + "lcp": [ + "/wp-content/rocket-test-data/images/lcp/testjpg.jpg" + ], + "viewport": [], + "enabled": true + }, + "lcp_big_image_template": { + "lcp": [ + "/wp-content/rocket-test-data/images/BigJPGImage_20mbmb.jpg" + ], + "viewport": [], + "enabled": true + }, + "lcp_no_fetchpriority": { + "lcp": [ + "/wp-content/rocket-test-data/images/istockphoto-1184692500-612x612.webp" + ], + "viewport": [], + "enabled": true + }, + "lcp_no_images": { + "lcp": "not found", + "viewport": [], + "enabled": true + } +} \ No newline at end of file diff --git a/src/support/results/expectedResultsMobile.json b/src/support/results/expectedResultsMobile.json new file mode 100644 index 0000000..cd0126e --- /dev/null +++ b/src/support/results/expectedResultsMobile.json @@ -0,0 +1,241 @@ +{ + "lcp_bg_inline_template": { + "lcp": [ + "/wp-content/rocket-test-data/images/test_inline2.jpeg" + ], + "viewport": [ + "/wp-content/rocket-test-data/images/lcp/testjpeg.jpeg" + ], + "enabled": true + }, + "lcp_bg_samestyle_template": { + "lcp": [ + "https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/images/lcp/testavif.avif" + ], + "viewport": [ + "https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/lcp/testjpg.jpg" + ], + "enabled": true + }, + "lcp_img_loadedbydynamicjs_template": { + "lcp": [ + "https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/images/lcp/testavif.avif" + ], + "viewport": [ + "http://www.google.com/intl/en_com/images/logo_plain.png" + ], + "enabled": true + }, + "lcp_img_loadedbyjs_template": { + "lcp": [ + "/wp-content/rocket-test-data/images/istockphoto-1184692500-612x612.webp" + ], + "viewport": [ + "/test.png", + "https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/lcp/testwebp.webp" + ], + "enabled": true + }, + "lcp_bg_multimage_template": { + "lcp": [ + "https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/image/test3.webp", + "/wp-content/rocket-test-data/image/file_example_JPG_100kB.jpg" + ], + "viewport": [ + "https://fastly.picsum.photos/id/976/200/300.jpg?hmac=s1Uz9fgJv32r8elfaIYn7pLpQXps7X9oYNwC5XirhO8", + "https://rocketlabsqa.ovh/wp-content/rocket-test-data/images/fixtheissue.jpg" + ], + "enabled": true + }, + "lcp_with_space_after_title": { + "lcp": [ + "https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/images/lcp/testwebp.webp" + ], + "viewport": [ + "https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/images/test_inline2.jpeg" + ], + "enabled": true + }, + "lcp_test_template": { + "lcp": [ + "/wp-content/rocket-test-data/images/test_internal2.jpg" + ], + "viewport": [ + "/wp-content/rocket-test-data/images/lipsum_logo.jpg" + ], + "enabled": true + }, + "lcp_bg_responsive_webkit_template": { + "lcp": [ + "https://fastly.picsum.photos/id/976/200/300.jpg?hmac=s1Uz9fgJv32r8elfaIYn7pLpQXps7X9oYNwC5XirhO8", + "https://rocketlabsqa.ovh/wp-content/rocket-test-data/images/fixtheissue.jpg" + ], + "viewport": [ + "/wp-content/rocket-test-data/image/test3.webp", + "/wp-content/rocket-test-data/images/lcp/testwebp.webp", + "https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/images/lcp/testavif.avif" + ], + "enabled": true + }, + "lcp_regular_image_template": { + "lcp": [ + "/wp-content/rocket-test-data/images/600px-Mapang-test.gif" + ], + "viewport": [ + "/test.png", + "/wp-content/rocket-test-data/images/test_inline2.jpeg", + "https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/lcp/testPng.png", + "/wp-content/rocket-test-data/images/Przechwytywanie.PNG" + ], + "enabled": true + }, + "lcp_bg_reponsive_imgset_template": { + "lcp": [ + "/wp-content/rocket-test-data/images/lcp/testavif.avif", + "/wp-content/rocket-test-data/images/lcp/testwebp.webp" + ], + "viewport": [ + "https://fastly.picsum.photos/id/976/200/300.jpg?hmac=s1Uz9fgJv32r8elfaIYn7pLpQXps7X9oYNwC5XirhO8", + "https://rocketlabsqa.ovh/wp-content/rocket-test-data/images/fixtheissue.jpg" + ], + "enabled": true + }, + "lcp_rsponsive_imagegrid": { + "lcp": [ + "https://www.w3schools.com/w3images/underwater.jpg" + ], + "viewport": [ + "https://www.w3schools.com/w3images/wedding.jpg", + "/wp-content/rocket-test-data/images/file_example_JPG_100kB.jpg", + "/wp-content/rocket-test-data/images/lcp/testavif.avif", + "https://www.w3schools.com/w3images/rocks.jpg", + "/wp-content/rocket-test-data/images/lcp/testPng.png", + "/wp-content/rocket-test-data/images/maxime-lebrun-6g3Akg708E0-unsplash.jpg", + "https://www.w3schools.com/w3images/ocean.jpg" + ] + }, + "lcp_attribute_template": { + "lcp": [ + "/wp-content/rocket-test-data/images/wp-rocket.svg" + ], + "viewport": [ + "https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/images/lcp/testPng.png", + "https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/images/wp-rocket2.svg", + "/wp-content/rocket-test-data/images/lcp/testsvg.svg", + "https://fastly.picsum.photos/id/976/200/300.jpg?hmac=s1Uz9fgJv32r8elfaIYn7pLpQXps7X9oYNwC5XirhO8", + "https://rocketlabsqa.ovh/wp-content/rocket-test-data/images/fixtheissue.jpg", + "/wp-content/rocket-test-data/images/lcp/testjpeg.jpeg", + "/wp-content/rocket-test-data/images/lcp/testavif.avif", + "/test.png" + ], + "enabled": true + }, + "lcp_no_dimension_svg": { + "lcp": [ + "/wp-content/rocket-test-data/images/lcp/testsvg.svg" + ], + "viewport": [], + "enabled": true + }, + "lcp_no_dimensions_picture": { + "lcp": [ + "https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/lcp/testavif.avif" + ], + "viewport": [ + "https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/lcp/testjpg.jpg", + "/test.png" + ], + "enabled": true + }, + "lcp_no_dimension_absolute_url": { + "lcp": [ + "https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/lcp/testjpg.jpg" + ], + "viewport": [ + "https://e2e.rocketlabsqa.ovh/wp-content/rocket-test-data/images/lcp/testPng.png", + "https://cdn.pixabay.com/photo/2023/06/05/02/01/starry-sky-8041247_1280.jpg" + ], + "enabled": true + }, + "lcp_image_withspecialchar_template": { + "lcp": [ + "/wp-content/rocket-test-data/images/lcp/image%20with%20space.jpg" + ], + "viewport": [ + "/wp-content/rocket-test-data/images/testspace%202.png", + "https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/images/paperéquipesTest.jpeg" + ], + "enabled": false + }, + "lcp_img_addedbydynamicstyle_template": { + "lcp": [ + "/wp-content/rocket-test-data/images/paper.jpeg" + ], + "viewport": [ + "https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/images/lcp/testjpg.jpg" + ], + "enabled": true + }, + "lcp_withfetchpriorityhigh_template": { + "lcp": [ + "https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/images/test_inline2.jpeg" + ], + "viewport": [ + "/wp-content/rocket-test-data/images/lcp/testjpeg.jpeg" + ], + "enabled": true + }, + "lcp_single_double": { + "lcp": [ + ], + "viewport": [], + "enabled": true + }, + "lcp_withfetchprioritylow_template": { + "lcp": [ + "/wp-content/rocket-test-data/images/test_inline2.jpeg" + ], + "viewport": [], + "enabled": true + }, + "lcp_withfetchpriorityempty_template": { + "lcp": [ + "/wp-content/rocket-test-data/images/test_inline2.jpeg" + ], + "viewport": [], + "enabled": true + }, + "lcp_withfetchpriorityinurl_template": { + "lcp": [ + "https://new.rocketlabsqa.ovh/wp-content/rocket-test-data/images/fetchpriority='high'.jpg" + ], + "viewport": [], + "enabled": true + }, + "lcp_video_poster_template": { + "lcp": [ + "/wp-content/rocket-test-data/images/lcp/testjpg.jpg" + ], + "viewport": [], + "enabled": true + }, + "lcp_big_image_template": { + "lcp": [ + "/wp-content/rocket-test-data/images/BigJPGImage_20mbmb.jpg" + ], + "viewport": [], + "enabled": true + }, + "lcp_no_fetchpriority": { + "lcp": [ + "/wp-content/rocket-test-data/images/istockphoto-1184692500-612x612.webp" + ], + "viewport": [], + "enabled": true + }, + "lcp_no_images": { + "lcp": "not found", + "viewport": [], + "enabled": true + } +} \ No newline at end of file diff --git a/src/support/steps/lcp-beacon-script.ts b/src/support/steps/lcp-beacon-script.ts index 6b70c4e..ebe755c 100644 --- a/src/support/steps/lcp-beacon-script.ts +++ b/src/support/steps/lcp-beacon-script.ts @@ -10,34 +10,38 @@ */ import { ICustomWorld } from "../../common/custom-world"; import { expect } from "@playwright/test"; -import { Given, Then, When } from "@cucumber/cucumber"; -import {LcpDataTable, LcpData, Row, NoLcpData} from "../../../utils/types"; -import axios from 'axios'; +import { Given, Then } from "@cucumber/cucumber"; +import { LcpData, Row } from "../../../utils/types"; + import { dbQuery, getWPTablePrefix } from "../../../utils/commands"; import { extractFromStdout } from "../../../utils/helpers"; import { WP_BASE_URL } from '../../../config/wp.config'; +import fs from 'fs/promises'; -let data: LcpDataTable[], +let data: string, truthy: boolean = true, - failMsg: string = ""; - -const [actual, expected]: [LcpData, LcpData] = [{}, {}]; -const [noATF, expectedATF]: [NoLcpData, NoLcpData] = [{}, {}]; + failMsg: string = "", + jsonData: Record; + +const actual: LcpData = {}; /** * Executes step to visit page based on the form factor(desktop/mobile) and get the LCP/ATF data from DB. */ -Given('I visit the following urls in {string}', async function (this: ICustomWorld, formFactor: string, dataTable) { +Given('I visit the urls for {string}', async function (this: ICustomWorld, formFactor: string) { let sql: string, result: string, resultFromStdout: Row[], viewPortWidth: number = 1600, - viewPortHeight: number = 700; + viewPortHeight: number = 700, + resultFile: string = './src/support/results/expectedResultsDesktop.json', + isMobile = 0; // Set page to be visited in mobile. - if ( formFactor === 'mobile' ) { - viewPortWidth = 393; - viewPortHeight = 830; + if (formFactor === 'mobile') { + viewPortWidth = 389; + viewPortHeight = 829; + resultFile = './src/support/results/expectedResultsMobile.json'; } await this.page.setViewportSize({ @@ -45,31 +49,43 @@ Given('I visit the following urls in {string}', async function (this: ICustomWor height: viewPortHeight }); - data = dataTable.rows(); + data = await fs.readFile(resultFile, 'utf8'); + jsonData = JSON.parse(data); const tablePrefix: string = await getWPTablePrefix(); // Visit page. - for (const row of data) { - const url: string = `${WP_BASE_URL}/${row[0]}`; - await this.utils.visitPage(row[0]); - // Wait for 2 seconds before fetching from DB. - await this.page.waitForTimeout(2000); - - // Get the LCP/ATF from the DB - sql = `SELECT lcp, viewport FROM ${tablePrefix}wpr_above_the_fold WHERE url LIKE "%${row[0]}%"`; - result = await dbQuery(sql); - resultFromStdout = await extractFromStdout(result); - - // Populate the actual data. - if (resultFromStdout && resultFromStdout.length > 0) { - actual[row[0]] = { + for (const key in jsonData) { + if ( jsonData[key].enabled === true ) { + const url: string = `${WP_BASE_URL}/${key}`; + await this.utils.visitPage(key); + // Wait the beacon to add an attribute `beacon-complete` to true before fetching from DB. + + await this.page.waitForFunction(() => { + const beacon = document.querySelector('[data-name="wpr-lcp-beacon"]'); + return beacon && beacon.getAttribute('beacon-completed') === 'true'; + }); + + if (formFactor !== 'desktop') { + isMobile = 1; + } + // Get the LCP/ATF from the DB + sql = `SELECT lcp, viewport + FROM ${tablePrefix}wpr_above_the_fold + WHERE url LIKE "%${key}%" + AND is_mobile = ${isMobile}`; + result = await dbQuery(sql); + resultFromStdout = await extractFromStdout(result); + // Populate the actual data. + if (resultFromStdout && resultFromStdout.length > 0) { + actual[key] = { url: url, lcp: resultFromStdout[0].lcp, viewport: resultFromStdout[0].viewport + } + } else { + console.error(`No result from database for url ${key}`); } - } else { - console.error(`No result from database for url ${row[0]}`); } } }); @@ -77,152 +93,34 @@ Given('I visit the following urls in {string}', async function (this: ICustomWor /** * Executes the step to assert that LCP & ATF should be as expected. */ -Then('lcp and atf should be as expected in {string}', async function (this: ICustomWorld, formFactor: string) { - let apiUrl: string; - - // Get the LCP from the PSI - for (const row of data) { - const url: string = `${WP_BASE_URL}/${row[0]}`; - apiUrl = `https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=${encodeURIComponent(url+'?nowprocket')}/&fields=lighthouseResult.audits&strategy=${formFactor}`; - - try { - const response = await axios.get(apiUrl); - const data = response.data; - let lcp: string = data.lighthouseResult.audits['prioritize-lcp-image'] && data.lighthouseResult.audits['prioritize-lcp-image'].details ? data.lighthouseResult.audits['prioritize-lcp-image'].details.debugData.initiatorPath[0].url : 'not found'; - - if (lcp === 'not found' && data.lighthouseResult.audits['largest-contentful-paint-element'].details) { - const snippet: string = data.lighthouseResult.audits['largest-contentful-paint-element'].details.items[0].items[0].node.snippet; - const imageRegex = / item.trim()); - - for (const viewport of viewports) { - if (!actualViewport.includes(viewport)) { - truthy = false; - failMsg += `Expected Viewport - ${viewport} for ${url} is not present in actual - ${actualViewport}\n\n\n`; - } - } - // Treat single viewport candidate. - } else{ - if (!actualViewport.includes(expectedViewport)) { + for (const viewport of expected.viewport) { + if (!actual[key].viewport.includes(viewport)) { truthy = false; - failMsg += `Expected Viewport - ${expectedViewport} for ${url} is not present in actual - ${actualViewport}\n\n\n`; + failMsg += `Expected Viewport for ${formFactor} - ${viewport} for ${actual[key].url} is not present in actual - ${actual[key].viewport}\n\n\n`; } } } } - if ( failMsg !== '' ) { + if (failMsg !== '') { console.log(failMsg); } expect(truthy, failMsg).toBeTruthy(); }); -/** - * - */ -When('I go to {string} in {string}', async function (this: ICustomWorld, page, formFactor: string) { - let viewPortWidth: number = 1600, - viewPortHeight: number = 700; - - // Set page to be visited in mobile. - if ( formFactor === 'mobile' ) { - viewPortWidth = 393; - viewPortHeight = 830; - } - - - await this.page.waitForLoadState('load', { timeout: 100000 }); - - await this.page.setViewportSize({ - width: viewPortWidth, - height: viewPortHeight - }); - - const tablePrefix: string = await getWPTablePrefix(); - - await this.utils.visitPage(page); - - // Wait the beacon to add an attribute `beacon-complete` to true before fetching from DB. - await this.page.waitForFunction(() => { - const beacon = document.querySelector('[data-name="wpr-lcp-beacon"]'); - return beacon && beacon.getAttribute('beacon-completed') === 'true'; - }); - - // Get the LCP/ATF from the DB - const sql = `SELECT lcp, viewport FROM ${tablePrefix}wpr_above_the_fold WHERE url LIKE "%${page}%"`; - const result = await dbQuery(sql); - const resultFromStdout = await extractFromStdout(result); - - noATF[0] = { - type: formFactor, - lcp: resultFromStdout[0].lcp, - viewport: resultFromStdout[0].viewport - } - - expectedATF[0] = { - type: formFactor, - lcp: 'not found', - viewport: '[]' - } -}) - -/** - * Executes step to visit page based on the form factor(desktop/mobile) and get the LCP/ATF data from DB. - */ -Then('I must not see any LCP or ATF', async function (this: ICustomWorld) { - for (const key in noATF) { - if (Object.hasOwnProperty.call(noATF, key)) { - const [actualType, expectedType, actualLcp, expectedLcp, actualViewport, expectedViewport] = [noATF[key].type, expectedATF[key].type, noATF[key].lcp, expectedATF[key].lcp, noATF[key].viewport, expectedATF[key].viewport]; - - // Check if expected lcp is present in actual lcp. - if (!actualLcp.includes(expectedLcp)) { - truthy = false; - failMsg += `Expected LCP - ${expectedLcp} for ${expectedType} is not present in actual - ${actualLcp} for ${actualType}\n\n\n`; - } - - if (!actualViewport.includes(expectedViewport)) { - truthy = false; - failMsg += `Expected Viewport - ${expectedViewport} for ${expectedType} is not present in actual - ${actualViewport} for ${actualType}\n\n\n`; - } - } - } - - if ( failMsg !== '' ) { - console.log(failMsg); - } - - expect(truthy, failMsg).toBeTruthy(); -}) \ No newline at end of file diff --git a/utils/types.ts b/utils/types.ts index 4fa8a90..73f1834 100644 --- a/utils/types.ts +++ b/utils/types.ts @@ -100,10 +100,6 @@ export type Viewport = { height: number; }; -export interface LcpDataTable { - key: string; - value: string; -} export interface LcpData { [key: string]: { url: string, @@ -114,12 +110,4 @@ export interface LcpData { export interface Row { [key: string]: string -} - -export interface NoLcpData { - [key: string]: { - type: string, - lcp: string, - viewport: string - } } \ No newline at end of file