Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

feat(html-reporter) Set test title as the document title and set favicon based on test outcome

Browse source
This commit is contained in:
Ryan Rosello 2024-07-06 15:23:11 +10:00
parent b2bda9fce2
commit 2dcbe91914
7 changed files with 111 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
packages/html-reporter/index.html
View file

@ -20,7 +20,8 @@
<meta charset='UTF-8'>
<meta name='color-scheme' content='dark light'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Playwright Test Report</title>
<title>Playwright Test Report | Summary</title>
<link rel="icon" href="/logo_default.svg">
</head>
<body>
<div id='root'></div>

9
packages/html-reporter/logo_default.svg Normal file
View file

@ -0,0 +1,9 @@
<svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M136.444 221.556C123.558 225.213 115.104 231.625 109.535 238.032C114.869 233.364 122.014 229.08 131.652 226.348C141.51 223.554 149.92 223.574 156.869 224.915V219.481C150.941 218.939 144.145 219.371 136.444 221.556ZM108.946 175.876L61.0895 188.484C61.0895 188.484 61.9617 189.716 63.5767 191.36L104.153 180.668C104.153 180.668 103.578 188.077 98.5847 194.705C108.03 187.559 108.946 175.876 108.946 175.876ZM149.005 288.347C81.6582 306.486 46.0272 228.438 35.2396 187.928C30.2556 169.229 28.0799 155.067 27.5 145.928C27.4377 144.979 27.4665 144.179 27.5336 143.446C24.04 143.657 22.3674 145.473 22.7077 150.721C23.2876 159.855 25.4633 174.016 30.4473 192.721C41.2301 233.225 76.8659 311.273 144.213 293.134C158.872 289.185 169.885 281.992 178.152 272.81C170.532 279.692 160.995 285.112 149.005 288.347ZM161.661 128.11V132.903H188.077C187.535 131.206 186.989 129.677 186.447 128.11H161.661Z" fill="#2D4552"/>
<path d="M193.981 167.584C205.861 170.958 212.144 179.287 215.465 186.658L228.711 190.42C228.711 190.42 226.904 164.623 203.57 157.995C181.741 151.793 168.308 170.124 166.674 172.496C173.024 167.972 182.297 164.268 193.981 167.584ZM299.422 186.777C277.573 180.547 264.145 198.916 262.535 201.255C268.89 196.736 278.158 193.031 289.837 196.362C301.698 199.741 307.976 208.06 311.307 215.436L324.572 219.212C324.572 219.212 322.736 193.41 299.422 186.777ZM286.262 254.795L176.072 223.99C176.072 223.99 177.265 230.038 181.842 237.869L274.617 263.805C282.255 259.386 286.262 254.795 286.262 254.795ZM209.867 321.102C122.618 297.71 133.166 186.543 147.284 133.865C153.097 112.156 159.073 96.0203 164.029 85.204C161.072 84.5953 158.623 86.1529 156.203 91.0746C150.941 101.747 144.212 119.124 137.7 143.45C123.586 196.127 113.038 307.29 200.283 330.682C241.406 341.699 273.442 324.955 297.323 298.659C274.655 319.19 245.714 330.701 209.867 321.102Z" fill="#2D4552"/>
<path d="M161.661 262.296V239.863L99.3324 257.537C99.3324 257.537 103.938 230.777 136.444 221.556C146.302 218.762 154.713 218.781 161.661 220.123V128.11H192.869C189.471 117.61 186.184 109.526 183.423 103.909C178.856 94.612 174.174 100.775 163.545 109.665C156.059 115.919 137.139 129.261 108.668 136.933C80.1966 144.61 57.179 142.574 47.5752 140.911C33.9601 138.562 26.8387 135.572 27.5049 145.928C28.0847 155.062 30.2605 169.224 35.2445 187.928C46.0272 228.433 81.663 306.481 149.01 288.342C166.602 283.602 179.019 274.233 187.626 262.291H161.661V262.296ZM61.0848 188.484L108.946 175.876C108.946 175.876 107.551 194.288 89.6087 199.018C71.6614 203.743 61.0848 188.484 61.0848 188.484Z" fill="#E2574C"/>
<path d="M341.786 129.174C329.345 131.355 299.498 134.072 262.612 124.185C225.716 114.304 201.236 97.0224 191.537 88.8994C177.788 77.3834 171.74 69.3802 165.788 81.4857C160.526 92.163 153.797 109.54 147.284 133.866C133.171 186.543 122.623 297.706 209.867 321.098C297.093 344.47 343.53 242.92 357.644 190.238C364.157 165.917 367.013 147.5 367.799 135.625C368.695 122.173 359.455 126.078 341.786 129.174ZM166.497 172.756C166.497 172.756 180.246 151.372 203.565 158C226.899 164.628 228.706 190.425 228.706 190.425L166.497 172.756ZM223.42 268.713C182.403 256.698 176.077 223.99 176.077 223.99L286.262 254.796C286.262 254.791 264.021 280.578 223.42 268.713ZM262.377 201.495C262.377 201.495 276.107 180.126 299.422 186.773C322.736 193.411 324.572 219.208 324.572 219.208L262.377 201.495Z" fill="#2EAD33"/>
<path d="M139.88 246.04L99.3324 257.532C99.3324 257.532 103.737 232.44 133.607 222.496L110.647 136.33L108.663 136.933C80.1918 144.611 57.1742 142.574 47.5704 140.911C33.9554 138.563 26.834 135.572 27.5001 145.929C28.08 155.063 30.2557 169.224 35.2397 187.929C46.0225 228.433 81.6583 306.481 149.005 288.342L150.989 287.719L139.88 246.04ZM61.0848 188.485L108.946 175.876C108.946 175.876 107.551 194.288 89.6087 199.018C71.6615 203.743 61.0848 188.485 61.0848 188.485Z" fill="#D65348"/>
<path d="M225.27 269.163L223.415 268.712C182.398 256.698 176.072 223.99 176.072 223.99L232.89 239.872L262.971 124.281L262.607 124.185C225.711 114.304 201.232 97.0224 191.532 88.8994C177.783 77.3834 171.735 69.3802 165.783 81.4857C160.526 92.163 153.797 109.54 147.284 133.866C133.171 186.543 122.623 297.706 209.867 321.097L211.655 321.5L225.27 269.163ZM166.497 172.756C166.497 172.756 180.246 151.372 203.565 158C226.899 164.628 228.706 190.425 228.706 190.425L166.497 172.756Z" fill="#1D8D22"/>
<path d="M141.946 245.451L131.072 248.537C133.641 263.019 138.169 276.917 145.276 289.195C146.513 288.922 147.74 288.687 149 288.342C152.302 287.451 155.364 286.348 158.312 285.145C150.371 273.361 145.118 259.789 141.946 245.451ZM137.7 143.451C132.112 164.307 127.113 194.326 128.489 224.436C130.952 223.367 133.554 222.371 136.444 221.551L138.457 221.101C136.003 188.939 141.308 156.165 147.284 133.866C148.799 128.225 150.318 122.978 151.832 118.085C149.393 119.637 146.767 121.228 143.776 122.867C141.759 129.093 139.722 135.898 137.7 143.451Z" fill="#C04B41"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.9 KiB

20
packages/html-reporter/logo_expected.svg Normal file
View file

@ -0,0 +1,20 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="608px" height="597px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" xmlns:xlink="http://www.w3.org/1999/xlink">
<g><path style="opacity:1" fill="#1e8d22" d="M 389.5,185.5 C 374.807,243.606 359.807,301.606 344.5,359.5C 316.587,351.522 288.587,343.855 260.5,336.5C 262.156,344.138 265.156,351.138 269.5,357.5C 284.969,380.965 306.302,396.298 333.5,403.5C 326.531,428.708 319.864,454.041 313.5,479.5C 313.685,480.584 314.018,481.584 314.5,482.5C 279.945,474.582 252.612,456.249 232.5,427.5C 221.423,408.593 213.09,388.593 207.5,367.5C 205.137,355.622 203.803,343.622 203.5,331.5C 200.198,279.282 206.531,228.282 222.5,178.5C 227.62,160.815 233.953,143.481 241.5,126.5C 243.283,121.768 245.949,117.601 249.5,114C 253.136,112.101 256.803,112.101 260.5,114C 297.552,148.201 340.552,172.034 389.5,185.5 Z M 317.5,278.5 C 293.388,272.457 269.721,265.457 246.5,257.5C 270.564,244.212 292.064,247.546 311,267.5C 313.682,270.865 315.849,274.531 317.5,278.5 Z"/></g>
<g><path style="opacity:1" fill="#374d59" d="M 241.5,126.5 C 233.953,143.481 227.62,160.815 222.5,178.5C 222.44,177.957 222.107,177.624 221.5,177.5C 218.139,179.511 214.806,181.511 211.5,183.5C 216.183,166.619 222.35,150.286 230,134.5C 232.369,129.617 236.203,126.95 241.5,126.5 Z"/></g>
<g><path style="opacity:1" fill="#bf4b41" d="M 222.5,178.5 C 206.531,228.282 200.198,279.282 203.5,331.5C 198.208,332.314 193.208,333.98 188.5,336.5C 188.5,325.167 188.5,313.833 188.5,302.5C 190.886,262.178 198.219,222.844 210.5,184.5C 210.5,183.833 210.833,183.5 211.5,183.5C 214.806,181.511 218.139,179.511 221.5,177.5C 222.107,177.624 222.44,177.957 222.5,178.5 Z"/></g>
<g><path style="opacity:1" fill="#e1574c" d="M 210.5,184.5 C 198.219,222.844 190.886,262.178 188.5,302.5C 179.343,270.342 170.343,238.009 161.5,205.5C 161.863,204.817 162.196,204.15 162.5,203.5C 178.976,198.342 194.976,192.009 210.5,184.5 Z"/></g>
<g><path style="opacity:1" fill="#30ad34" d="M 389.5,185.5 C 437.743,197.676 486.243,198.676 535,188.5C 540.988,187.695 544.988,190.029 547,195.5C 542.091,272.893 518.425,343.893 476,408.5C 463.788,425.228 449.954,440.562 434.5,454.5C 404.966,477.807 371.299,488.307 333.5,486C 327.066,485.261 320.733,484.095 314.5,482.5C 314.018,481.584 313.685,480.584 313.5,479.5C 319.864,454.041 326.531,428.708 333.5,403.5C 358.383,409.445 382.383,407.111 405.5,396.5C 412.523,392.646 418.856,387.812 424.5,382C 397.815,374.496 371.148,366.996 344.5,359.5C 359.807,301.606 374.807,243.606 389.5,185.5 Z M 461.5,321.5 C 439.099,315.645 416.765,309.478 394.5,303C 392.68,302.8 391.347,301.966 390.5,300.5C 414.551,287.219 436.051,290.553 455,310.5C 457.393,314.054 459.56,317.72 461.5,321.5 Z"/></g>
<g><path style="opacity:1" fill="#d65348" d="M 162.5,203.5 C 162.196,204.15 161.863,204.817 161.5,205.5C 170.343,238.009 179.343,270.342 188.5,302.5C 188.5,313.833 188.5,325.167 188.5,336.5C 179.134,339.88 171.134,345.213 164.5,352.5C 155.118,361.249 148.785,371.916 145.5,384.5C 160.883,380.706 176.217,376.706 191.5,372.5C 191.833,372.5 192.167,372.5 192.5,372.5C 196.118,394.022 203.118,414.356 213.5,433.5C 181.951,440.557 153.284,434.391 127.5,415C 107.347,398.188 90.8473,378.355 78,355.5C 53.953,311.524 40.1197,264.524 36.5,214.5C 36.4443,211.439 37.7776,209.272 40.5,208C 44.8333,207.333 49.1667,207.333 53.5,208C 90.2021,215.109 126.535,213.609 162.5,203.5 Z M 144.5,290.5 C 125.876,302.8 108.209,301.466 91.5,286.5C 110.815,281.507 130.148,276.507 149.5,271.5C 150.167,271.667 150.833,271.833 151.5,272C 149.872,278.424 147.539,284.59 144.5,290.5 Z"/></g>
<g><path style="opacity:1" fill="#344b57" d="M 36.5,214.5 C 40.1197,264.524 53.953,311.524 78,355.5C 90.8473,378.355 107.347,398.188 127.5,415C 153.284,434.391 181.951,440.557 213.5,433.5C 220.002,431.959 226.335,429.959 232.5,427.5C 252.612,456.249 279.945,474.582 314.5,482.5C 320.733,484.095 327.066,485.261 333.5,486C 371.299,488.307 404.966,477.807 434.5,454.5C 391.161,499.666 339.828,511.833 280.5,491C 263.685,484.434 248.685,475.101 235.5,463C 228.539,454.894 221.706,446.727 215,438.5C 176.673,449.588 142.507,442.088 112.5,416C 87.0357,391.845 67.8691,363.345 55,330.5C 40.0226,294.596 31.6893,257.263 30,218.5C 31.2725,215.778 33.4392,214.444 36.5,214.5 Z"/></g>
<g><path style="opacity:0.294" fill="#cb9900" d="M 20.5,231.5 C 21.525,231.897 21.6917,232.563 21,233.5C 20.5357,232.906 20.369,232.239 20.5,231.5 Z"/></g>
<g><path style="opacity:1" fill="#314955" d="M 317.5,278.5 C 315.849,274.531 313.682,270.865 311,267.5C 292.064,247.546 270.564,244.212 246.5,257.5C 266.422,232.55 290.089,228.384 317.5,245C 329.941,255.378 336.274,268.545 336.5,284.5C 330.007,282.634 323.673,280.634 317.5,278.5 Z"/></g>
<g><path style="opacity:1" fill="#40525e" d="M 144.5,290.5 C 147.539,284.59 149.872,278.424 151.5,272C 150.833,271.833 150.167,271.667 149.5,271.5C 130.148,276.507 110.815,281.507 91.5,286.5C 89.2086,285.458 88.2086,283.958 88.5,282C 111.803,276.216 134.97,270.05 158,263.5C 157.222,274.389 152.722,283.389 144.5,290.5 Z"/></g>
<g><path style="opacity:0.369" fill="#39200a" d="M 14.5,265.5 C 15.525,265.897 15.6917,266.563 15,267.5C 14.5357,266.906 14.369,266.239 14.5,265.5 Z"/></g>
<g><path style="opacity:1" fill="#324a55" d="M 461.5,321.5 C 459.56,317.72 457.393,314.054 455,310.5C 436.051,290.553 414.551,287.219 390.5,300.5C 408.127,277.131 430.127,271.964 456.5,285C 471.386,295.267 479.719,309.433 481.5,327.5C 474.503,326.374 467.837,324.374 461.5,321.5 Z"/></g>
<g><path style="opacity:1" fill="#354b57" d="M 203.5,331.5 C 203.803,343.622 205.137,355.622 207.5,367.5C 202.357,368.992 197.357,370.659 192.5,372.5C 192.167,372.5 191.833,372.5 191.5,372.5C 189.76,362.242 188.76,351.909 188.5,341.5C 180.003,344.082 172.003,347.749 164.5,352.5C 171.134,345.213 179.134,339.88 188.5,336.5C 193.208,333.98 198.208,332.314 203.5,331.5 Z"/></g>
<g><path style="opacity:1" fill="#0b7629" d="M 607.5,334.5 C 607.5,421.833 607.5,509.167 607.5,596.5C 513.5,596.5 419.5,596.5 325.5,596.5C 432.955,585.061 514.455,533.395 570,441.5C 588.626,408.123 600.126,372.456 604.5,334.5C 605.5,334.5 606.5,334.5 607.5,334.5 Z"/></g>
<g><path style="opacity:1" fill="#304854" d="M 344.5,359.5 C 371.148,366.996 397.815,374.496 424.5,382C 418.856,387.812 412.523,392.646 405.5,396.5C 403.731,394.603 401.398,393.436 398.5,393C 355.519,381.005 312.519,369.172 269.5,357.5C 265.156,351.138 262.156,344.138 260.5,336.5C 288.587,343.855 316.587,351.522 344.5,359.5 Z"/></g>
<g><path style="opacity:1" fill="#bf4b40" d="M 207.5,367.5 C 213.09,388.593 221.423,408.593 232.5,427.5C 226.335,429.959 220.002,431.959 213.5,433.5C 203.118,414.356 196.118,394.022 192.5,372.5C 197.357,370.659 202.357,368.992 207.5,367.5 Z"/></g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 6.8 KiB

20
packages/html-reporter/logo_flaky.svg Normal file
View file

@ -0,0 +1,20 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="608px" height="597px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" xmlns:xlink="http://www.w3.org/1999/xlink">
<g><path style="opacity:1" fill="#1e8d22" d="M 389.5,185.5 C 374.807,243.606 359.807,301.606 344.5,359.5C 316.587,351.522 288.587,343.855 260.5,336.5C 262.156,344.138 265.156,351.138 269.5,357.5C 284.969,380.965 306.302,396.298 333.5,403.5C 326.531,428.708 319.864,454.041 313.5,479.5C 313.685,480.584 314.018,481.584 314.5,482.5C 279.945,474.582 252.612,456.249 232.5,427.5C 221.423,408.593 213.09,388.593 207.5,367.5C 205.137,355.622 203.803,343.622 203.5,331.5C 200.198,279.282 206.531,228.282 222.5,178.5C 227.62,160.815 233.953,143.481 241.5,126.5C 243.283,121.768 245.949,117.601 249.5,114C 253.136,112.101 256.803,112.101 260.5,114C 297.552,148.201 340.552,172.034 389.5,185.5 Z M 317.5,278.5 C 293.388,272.457 269.721,265.457 246.5,257.5C 270.564,244.212 292.064,247.546 311,267.5C 313.682,270.865 315.849,274.531 317.5,278.5 Z"/></g>
<g><path style="opacity:1" fill="#374d59" d="M 241.5,126.5 C 233.953,143.481 227.62,160.815 222.5,178.5C 222.44,177.957 222.107,177.624 221.5,177.5C 218.139,179.511 214.806,181.511 211.5,183.5C 216.183,166.619 222.35,150.286 230,134.5C 232.369,129.617 236.203,126.95 241.5,126.5 Z"/></g>
<g><path style="opacity:1" fill="#bf4b41" d="M 222.5,178.5 C 206.531,228.282 200.198,279.282 203.5,331.5C 198.208,332.314 193.208,333.98 188.5,336.5C 188.5,325.167 188.5,313.833 188.5,302.5C 190.886,262.178 198.219,222.844 210.5,184.5C 210.5,183.833 210.833,183.5 211.5,183.5C 214.806,181.511 218.139,179.511 221.5,177.5C 222.107,177.624 222.44,177.957 222.5,178.5 Z"/></g>
<g><path style="opacity:1" fill="#e1574c" d="M 210.5,184.5 C 198.219,222.844 190.886,262.178 188.5,302.5C 179.343,270.342 170.343,238.009 161.5,205.5C 161.863,204.817 162.196,204.15 162.5,203.5C 178.976,198.342 194.976,192.009 210.5,184.5 Z"/></g>
<g><path style="opacity:1" fill="#30ad34" d="M 389.5,185.5 C 437.743,197.676 486.243,198.676 535,188.5C 540.988,187.695 544.988,190.029 547,195.5C 542.091,272.893 518.425,343.893 476,408.5C 463.788,425.228 449.954,440.562 434.5,454.5C 404.966,477.807 371.299,488.307 333.5,486C 327.066,485.261 320.733,484.095 314.5,482.5C 314.018,481.584 313.685,480.584 313.5,479.5C 319.864,454.041 326.531,428.708 333.5,403.5C 358.383,409.445 382.383,407.111 405.5,396.5C 412.523,392.646 418.856,387.812 424.5,382C 397.815,374.496 371.148,366.996 344.5,359.5C 359.807,301.606 374.807,243.606 389.5,185.5 Z M 461.5,321.5 C 439.099,315.645 416.765,309.478 394.5,303C 392.68,302.8 391.347,301.966 390.5,300.5C 414.551,287.219 436.051,290.553 455,310.5C 457.393,314.054 459.56,317.72 461.5,321.5 Z"/></g>
<g><path style="opacity:1" fill="#d65348" d="M 162.5,203.5 C 162.196,204.15 161.863,204.817 161.5,205.5C 170.343,238.009 179.343,270.342 188.5,302.5C 188.5,313.833 188.5,325.167 188.5,336.5C 179.134,339.88 171.134,345.213 164.5,352.5C 155.118,361.249 148.785,371.916 145.5,384.5C 160.883,380.706 176.217,376.706 191.5,372.5C 191.833,372.5 192.167,372.5 192.5,372.5C 196.118,394.022 203.118,414.356 213.5,433.5C 181.951,440.557 153.284,434.391 127.5,415C 107.347,398.188 90.8473,378.355 78,355.5C 53.953,311.524 40.1197,264.524 36.5,214.5C 36.4443,211.439 37.7776,209.272 40.5,208C 44.8333,207.333 49.1667,207.333 53.5,208C 90.2021,215.109 126.535,213.609 162.5,203.5 Z M 144.5,290.5 C 125.876,302.8 108.209,301.466 91.5,286.5C 110.815,281.507 130.148,276.507 149.5,271.5C 150.167,271.667 150.833,271.833 151.5,272C 149.872,278.424 147.539,284.59 144.5,290.5 Z"/></g>
<g><path style="opacity:1" fill="#344b57" d="M 36.5,214.5 C 40.1197,264.524 53.953,311.524 78,355.5C 90.8473,378.355 107.347,398.188 127.5,415C 153.284,434.391 181.951,440.557 213.5,433.5C 220.002,431.959 226.335,429.959 232.5,427.5C 252.612,456.249 279.945,474.582 314.5,482.5C 320.733,484.095 327.066,485.261 333.5,486C 371.299,488.307 404.966,477.807 434.5,454.5C 391.161,499.666 339.828,511.833 280.5,491C 263.685,484.434 248.685,475.101 235.5,463C 228.539,454.894 221.706,446.727 215,438.5C 176.673,449.588 142.507,442.088 112.5,416C 87.0357,391.845 67.8691,363.345 55,330.5C 40.0226,294.596 31.6893,257.263 30,218.5C 31.2725,215.778 33.4392,214.444 36.5,214.5 Z"/></g>
<g><path style="opacity:0.294" fill="#cb9900" d="M 20.5,231.5 C 21.525,231.897 21.6917,232.563 21,233.5C 20.5357,232.906 20.369,232.239 20.5,231.5 Z"/></g>
<g><path style="opacity:1" fill="#314955" d="M 317.5,278.5 C 315.849,274.531 313.682,270.865 311,267.5C 292.064,247.546 270.564,244.212 246.5,257.5C 266.422,232.55 290.089,228.384 317.5,245C 329.941,255.378 336.274,268.545 336.5,284.5C 330.007,282.634 323.673,280.634 317.5,278.5 Z"/></g>
<g><path style="opacity:1" fill="#40525e" d="M 144.5,290.5 C 147.539,284.59 149.872,278.424 151.5,272C 150.833,271.833 150.167,271.667 149.5,271.5C 130.148,276.507 110.815,281.507 91.5,286.5C 89.2086,285.458 88.2086,283.958 88.5,282C 111.803,276.216 134.97,270.05 158,263.5C 157.222,274.389 152.722,283.389 144.5,290.5 Z"/></g>
<g><path style="opacity:0.369" fill="#39200a" d="M 14.5,265.5 C 15.525,265.897 15.6917,266.563 15,267.5C 14.5357,266.906 14.369,266.239 14.5,265.5 Z"/></g>
<g><path style="opacity:1" fill="#324a55" d="M 461.5,321.5 C 459.56,317.72 457.393,314.054 455,310.5C 436.051,290.553 414.551,287.219 390.5,300.5C 408.127,277.131 430.127,271.964 456.5,285C 471.386,295.267 479.719,309.433 481.5,327.5C 474.503,326.374 467.837,324.374 461.5,321.5 Z"/></g>
<g><path style="opacity:1" fill="#354b57" d="M 203.5,331.5 C 203.803,343.622 205.137,355.622 207.5,367.5C 202.357,368.992 197.357,370.659 192.5,372.5C 192.167,372.5 191.833,372.5 191.5,372.5C 189.76,362.242 188.76,351.909 188.5,341.5C 180.003,344.082 172.003,347.749 164.5,352.5C 171.134,345.213 179.134,339.88 188.5,336.5C 193.208,333.98 198.208,332.314 203.5,331.5 Z"/></g>
<g><path style="opacity:1" fill="#d2a526" d="M 607.5,334.5 C 607.5,421.833 607.5,509.167 607.5,596.5C 513.5,596.5 419.5,596.5 325.5,596.5C 432.955,585.061 514.455,533.395 570,441.5C 588.626,408.123 600.126,372.456 604.5,334.5C 605.5,334.5 606.5,334.5 607.5,334.5 Z"/></g>
<g><path style="opacity:1" fill="#304854" d="M 344.5,359.5 C 371.148,366.996 397.815,374.496 424.5,382C 418.856,387.812 412.523,392.646 405.5,396.5C 403.731,394.603 401.398,393.436 398.5,393C 355.519,381.005 312.519,369.172 269.5,357.5C 265.156,351.138 262.156,344.138 260.5,336.5C 288.587,343.855 316.587,351.522 344.5,359.5 Z"/></g>
<g><path style="opacity:1" fill="#bf4b40" d="M 207.5,367.5 C 213.09,388.593 221.423,408.593 232.5,427.5C 226.335,429.959 220.002,431.959 213.5,433.5C 203.118,414.356 196.118,394.022 192.5,372.5C 197.357,370.659 202.357,368.992 207.5,367.5 Z"/></g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 6.8 KiB

20
packages/html-reporter/logo_skipped.svg Normal file
View file

@ -0,0 +1,20 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="608px" height="597px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" xmlns:xlink="http://www.w3.org/1999/xlink">
<g><path style="opacity:1" fill="#1e8d22" d="M 389.5,185.5 C 374.807,243.606 359.807,301.606 344.5,359.5C 316.587,351.522 288.587,343.855 260.5,336.5C 262.156,344.138 265.156,351.138 269.5,357.5C 284.969,380.965 306.302,396.298 333.5,403.5C 326.531,428.708 319.864,454.041 313.5,479.5C 313.685,480.584 314.018,481.584 314.5,482.5C 279.945,474.582 252.612,456.249 232.5,427.5C 221.423,408.593 213.09,388.593 207.5,367.5C 205.137,355.622 203.803,343.622 203.5,331.5C 200.198,279.282 206.531,228.282 222.5,178.5C 227.62,160.815 233.953,143.481 241.5,126.5C 243.283,121.768 245.949,117.601 249.5,114C 253.136,112.101 256.803,112.101 260.5,114C 297.552,148.201 340.552,172.034 389.5,185.5 Z M 317.5,278.5 C 293.388,272.457 269.721,265.457 246.5,257.5C 270.564,244.212 292.064,247.546 311,267.5C 313.682,270.865 315.849,274.531 317.5,278.5 Z"/></g>
<g><path style="opacity:1" fill="#374d59" d="M 241.5,126.5 C 233.953,143.481 227.62,160.815 222.5,178.5C 222.44,177.957 222.107,177.624 221.5,177.5C 218.139,179.511 214.806,181.511 211.5,183.5C 216.183,166.619 222.35,150.286 230,134.5C 232.369,129.617 236.203,126.95 241.5,126.5 Z"/></g>
<g><path style="opacity:1" fill="#bf4b41" d="M 222.5,178.5 C 206.531,228.282 200.198,279.282 203.5,331.5C 198.208,332.314 193.208,333.98 188.5,336.5C 188.5,325.167 188.5,313.833 188.5,302.5C 190.886,262.178 198.219,222.844 210.5,184.5C 210.5,183.833 210.833,183.5 211.5,183.5C 214.806,181.511 218.139,179.511 221.5,177.5C 222.107,177.624 222.44,177.957 222.5,178.5 Z"/></g>
<g><path style="opacity:1" fill="#e1574c" d="M 210.5,184.5 C 198.219,222.844 190.886,262.178 188.5,302.5C 179.343,270.342 170.343,238.009 161.5,205.5C 161.863,204.817 162.196,204.15 162.5,203.5C 178.976,198.342 194.976,192.009 210.5,184.5 Z"/></g>
<g><path style="opacity:1" fill="#30ad34" d="M 389.5,185.5 C 437.743,197.676 486.243,198.676 535,188.5C 540.988,187.695 544.988,190.029 547,195.5C 542.091,272.893 518.425,343.893 476,408.5C 463.788,425.228 449.954,440.562 434.5,454.5C 404.966,477.807 371.299,488.307 333.5,486C 327.066,485.261 320.733,484.095 314.5,482.5C 314.018,481.584 313.685,480.584 313.5,479.5C 319.864,454.041 326.531,428.708 333.5,403.5C 358.383,409.445 382.383,407.111 405.5,396.5C 412.523,392.646 418.856,387.812 424.5,382C 397.815,374.496 371.148,366.996 344.5,359.5C 359.807,301.606 374.807,243.606 389.5,185.5 Z M 461.5,321.5 C 439.099,315.645 416.765,309.478 394.5,303C 392.68,302.8 391.347,301.966 390.5,300.5C 414.551,287.219 436.051,290.553 455,310.5C 457.393,314.054 459.56,317.72 461.5,321.5 Z"/></g>
<g><path style="opacity:1" fill="#d65348" d="M 162.5,203.5 C 162.196,204.15 161.863,204.817 161.5,205.5C 170.343,238.009 179.343,270.342 188.5,302.5C 188.5,313.833 188.5,325.167 188.5,336.5C 179.134,339.88 171.134,345.213 164.5,352.5C 155.118,361.249 148.785,371.916 145.5,384.5C 160.883,380.706 176.217,376.706 191.5,372.5C 191.833,372.5 192.167,372.5 192.5,372.5C 196.118,394.022 203.118,414.356 213.5,433.5C 181.951,440.557 153.284,434.391 127.5,415C 107.347,398.188 90.8473,378.355 78,355.5C 53.953,311.524 40.1197,264.524 36.5,214.5C 36.4443,211.439 37.7776,209.272 40.5,208C 44.8333,207.333 49.1667,207.333 53.5,208C 90.2021,215.109 126.535,213.609 162.5,203.5 Z M 144.5,290.5 C 125.876,302.8 108.209,301.466 91.5,286.5C 110.815,281.507 130.148,276.507 149.5,271.5C 150.167,271.667 150.833,271.833 151.5,272C 149.872,278.424 147.539,284.59 144.5,290.5 Z"/></g>
<g><path style="opacity:1" fill="#344b57" d="M 36.5,214.5 C 40.1197,264.524 53.953,311.524 78,355.5C 90.8473,378.355 107.347,398.188 127.5,415C 153.284,434.391 181.951,440.557 213.5,433.5C 220.002,431.959 226.335,429.959 232.5,427.5C 252.612,456.249 279.945,474.582 314.5,482.5C 320.733,484.095 327.066,485.261 333.5,486C 371.299,488.307 404.966,477.807 434.5,454.5C 391.161,499.666 339.828,511.833 280.5,491C 263.685,484.434 248.685,475.101 235.5,463C 228.539,454.894 221.706,446.727 215,438.5C 176.673,449.588 142.507,442.088 112.5,416C 87.0357,391.845 67.8691,363.345 55,330.5C 40.0226,294.596 31.6893,257.263 30,218.5C 31.2725,215.778 33.4392,214.444 36.5,214.5 Z"/></g>
<g><path style="opacity:0.294" fill="#cb9900" d="M 20.5,231.5 C 21.525,231.897 21.6917,232.563 21,233.5C 20.5357,232.906 20.369,232.239 20.5,231.5 Z"/></g>
<g><path style="opacity:1" fill="#314955" d="M 317.5,278.5 C 315.849,274.531 313.682,270.865 311,267.5C 292.064,247.546 270.564,244.212 246.5,257.5C 266.422,232.55 290.089,228.384 317.5,245C 329.941,255.378 336.274,268.545 336.5,284.5C 330.007,282.634 323.673,280.634 317.5,278.5 Z"/></g>
<g><path style="opacity:1" fill="#40525e" d="M 144.5,290.5 C 147.539,284.59 149.872,278.424 151.5,272C 150.833,271.833 150.167,271.667 149.5,271.5C 130.148,276.507 110.815,281.507 91.5,286.5C 89.2086,285.458 88.2086,283.958 88.5,282C 111.803,276.216 134.97,270.05 158,263.5C 157.222,274.389 152.722,283.389 144.5,290.5 Z"/></g>
<g><path style="opacity:0.369" fill="#39200a" d="M 14.5,265.5 C 15.525,265.897 15.6917,266.563 15,267.5C 14.5357,266.906 14.369,266.239 14.5,265.5 Z"/></g>
<g><path style="opacity:1" fill="#324a55" d="M 461.5,321.5 C 459.56,317.72 457.393,314.054 455,310.5C 436.051,290.553 414.551,287.219 390.5,300.5C 408.127,277.131 430.127,271.964 456.5,285C 471.386,295.267 479.719,309.433 481.5,327.5C 474.503,326.374 467.837,324.374 461.5,321.5 Z"/></g>
<g><path style="opacity:1" fill="#354b57" d="M 203.5,331.5 C 203.803,343.622 205.137,355.622 207.5,367.5C 202.357,368.992 197.357,370.659 192.5,372.5C 192.167,372.5 191.833,372.5 191.5,372.5C 189.76,362.242 188.76,351.909 188.5,341.5C 180.003,344.082 172.003,347.749 164.5,352.5C 171.134,345.213 179.134,339.88 188.5,336.5C 193.208,333.98 198.208,332.314 203.5,331.5 Z"/></g>
<g><path style="opacity:1" fill="#d5dce2" d="M 607.5,334.5 C 607.5,421.833 607.5,509.167 607.5,596.5C 513.5,596.5 419.5,596.5 325.5,596.5C 432.955,585.061 514.455,533.395 570,441.5C 588.626,408.123 600.126,372.456 604.5,334.5C 605.5,334.5 606.5,334.5 607.5,334.5 Z"/></g>
<g><path style="opacity:1" fill="#304854" d="M 344.5,359.5 C 371.148,366.996 397.815,374.496 424.5,382C 418.856,387.812 412.523,392.646 405.5,396.5C 403.731,394.603 401.398,393.436 398.5,393C 355.519,381.005 312.519,369.172 269.5,357.5C 265.156,351.138 262.156,344.138 260.5,336.5C 288.587,343.855 316.587,351.522 344.5,359.5 Z"/></g>
<g><path style="opacity:1" fill="#bf4b40" d="M 207.5,367.5 C 213.09,388.593 221.423,408.593 232.5,427.5C 226.335,429.959 220.002,431.959 213.5,433.5C 203.118,414.356 196.118,394.022 192.5,372.5C 197.357,370.659 202.357,368.992 207.5,367.5 Z"/></g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 6.8 KiB

20
packages/html-reporter/logo_unexpected.svg Normal file
View file

@ -0,0 +1,20 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="608px" height="597px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" xmlns:xlink="http://www.w3.org/1999/xlink">
<g><path style="opacity:1" fill="#1e8d22" d="M 389.5,185.5 C 374.807,243.606 359.807,301.606 344.5,359.5C 316.587,351.522 288.587,343.855 260.5,336.5C 262.156,344.138 265.156,351.138 269.5,357.5C 284.969,380.965 306.302,396.298 333.5,403.5C 326.531,428.708 319.864,454.041 313.5,479.5C 313.685,480.584 314.018,481.584 314.5,482.5C 279.945,474.582 252.612,456.249 232.5,427.5C 221.423,408.593 213.09,388.593 207.5,367.5C 205.137,355.622 203.803,343.622 203.5,331.5C 200.198,279.282 206.531,228.282 222.5,178.5C 227.62,160.815 233.953,143.481 241.5,126.5C 243.283,121.768 245.949,117.601 249.5,114C 253.136,112.101 256.803,112.101 260.5,114C 297.552,148.201 340.552,172.034 389.5,185.5 Z M 317.5,278.5 C 293.388,272.457 269.721,265.457 246.5,257.5C 270.564,244.212 292.064,247.546 311,267.5C 313.682,270.865 315.849,274.531 317.5,278.5 Z"/></g>
<g><path style="opacity:1" fill="#374d59" d="M 241.5,126.5 C 233.953,143.481 227.62,160.815 222.5,178.5C 222.44,177.957 222.107,177.624 221.5,177.5C 218.139,179.511 214.806,181.511 211.5,183.5C 216.183,166.619 222.35,150.286 230,134.5C 232.369,129.617 236.203,126.95 241.5,126.5 Z"/></g>
<g><path style="opacity:1" fill="#bf4b41" d="M 222.5,178.5 C 206.531,228.282 200.198,279.282 203.5,331.5C 198.208,332.314 193.208,333.98 188.5,336.5C 188.5,325.167 188.5,313.833 188.5,302.5C 190.886,262.178 198.219,222.844 210.5,184.5C 210.5,183.833 210.833,183.5 211.5,183.5C 214.806,181.511 218.139,179.511 221.5,177.5C 222.107,177.624 222.44,177.957 222.5,178.5 Z"/></g>
<g><path style="opacity:1" fill="#e1574c" d="M 210.5,184.5 C 198.219,222.844 190.886,262.178 188.5,302.5C 179.343,270.342 170.343,238.009 161.5,205.5C 161.863,204.817 162.196,204.15 162.5,203.5C 178.976,198.342 194.976,192.009 210.5,184.5 Z"/></g>
<g><path style="opacity:1" fill="#30ad34" d="M 389.5,185.5 C 437.743,197.676 486.243,198.676 535,188.5C 540.988,187.695 544.988,190.029 547,195.5C 542.091,272.893 518.425,343.893 476,408.5C 463.788,425.228 449.954,440.562 434.5,454.5C 404.966,477.807 371.299,488.307 333.5,486C 327.066,485.261 320.733,484.095 314.5,482.5C 314.018,481.584 313.685,480.584 313.5,479.5C 319.864,454.041 326.531,428.708 333.5,403.5C 358.383,409.445 382.383,407.111 405.5,396.5C 412.523,392.646 418.856,387.812 424.5,382C 397.815,374.496 371.148,366.996 344.5,359.5C 359.807,301.606 374.807,243.606 389.5,185.5 Z M 461.5,321.5 C 439.099,315.645 416.765,309.478 394.5,303C 392.68,302.8 391.347,301.966 390.5,300.5C 414.551,287.219 436.051,290.553 455,310.5C 457.393,314.054 459.56,317.72 461.5,321.5 Z"/></g>
<g><path style="opacity:1" fill="#d65348" d="M 162.5,203.5 C 162.196,204.15 161.863,204.817 161.5,205.5C 170.343,238.009 179.343,270.342 188.5,302.5C 188.5,313.833 188.5,325.167 188.5,336.5C 179.134,339.88 171.134,345.213 164.5,352.5C 155.118,361.249 148.785,371.916 145.5,384.5C 160.883,380.706 176.217,376.706 191.5,372.5C 191.833,372.5 192.167,372.5 192.5,372.5C 196.118,394.022 203.118,414.356 213.5,433.5C 181.951,440.557 153.284,434.391 127.5,415C 107.347,398.188 90.8473,378.355 78,355.5C 53.953,311.524 40.1197,264.524 36.5,214.5C 36.4443,211.439 37.7776,209.272 40.5,208C 44.8333,207.333 49.1667,207.333 53.5,208C 90.2021,215.109 126.535,213.609 162.5,203.5 Z M 144.5,290.5 C 125.876,302.8 108.209,301.466 91.5,286.5C 110.815,281.507 130.148,276.507 149.5,271.5C 150.167,271.667 150.833,271.833 151.5,272C 149.872,278.424 147.539,284.59 144.5,290.5 Z"/></g>
<g><path style="opacity:1" fill="#344b57" d="M 36.5,214.5 C 40.1197,264.524 53.953,311.524 78,355.5C 90.8473,378.355 107.347,398.188 127.5,415C 153.284,434.391 181.951,440.557 213.5,433.5C 220.002,431.959 226.335,429.959 232.5,427.5C 252.612,456.249 279.945,474.582 314.5,482.5C 320.733,484.095 327.066,485.261 333.5,486C 371.299,488.307 404.966,477.807 434.5,454.5C 391.161,499.666 339.828,511.833 280.5,491C 263.685,484.434 248.685,475.101 235.5,463C 228.539,454.894 221.706,446.727 215,438.5C 176.673,449.588 142.507,442.088 112.5,416C 87.0357,391.845 67.8691,363.345 55,330.5C 40.0226,294.596 31.6893,257.263 30,218.5C 31.2725,215.778 33.4392,214.444 36.5,214.5 Z"/></g>
<g><path style="opacity:0.294" fill="#cb9900" d="M 20.5,231.5 C 21.525,231.897 21.6917,232.563 21,233.5C 20.5357,232.906 20.369,232.239 20.5,231.5 Z"/></g>
<g><path style="opacity:1" fill="#314955" d="M 317.5,278.5 C 315.849,274.531 313.682,270.865 311,267.5C 292.064,247.546 270.564,244.212 246.5,257.5C 266.422,232.55 290.089,228.384 317.5,245C 329.941,255.378 336.274,268.545 336.5,284.5C 330.007,282.634 323.673,280.634 317.5,278.5 Z"/></g>
<g><path style="opacity:1" fill="#40525e" d="M 144.5,290.5 C 147.539,284.59 149.872,278.424 151.5,272C 150.833,271.833 150.167,271.667 149.5,271.5C 130.148,276.507 110.815,281.507 91.5,286.5C 89.2086,285.458 88.2086,283.958 88.5,282C 111.803,276.216 134.97,270.05 158,263.5C 157.222,274.389 152.722,283.389 144.5,290.5 Z"/></g>
<g><path style="opacity:0.369" fill="#39200a" d="M 14.5,265.5 C 15.525,265.897 15.6917,266.563 15,267.5C 14.5357,266.906 14.369,266.239 14.5,265.5 Z"/></g>
<g><path style="opacity:1" fill="#324a55" d="M 461.5,321.5 C 459.56,317.72 457.393,314.054 455,310.5C 436.051,290.553 414.551,287.219 390.5,300.5C 408.127,277.131 430.127,271.964 456.5,285C 471.386,295.267 479.719,309.433 481.5,327.5C 474.503,326.374 467.837,324.374 461.5,321.5 Z"/></g>
<g><path style="opacity:1" fill="#354b57" d="M 203.5,331.5 C 203.803,343.622 205.137,355.622 207.5,367.5C 202.357,368.992 197.357,370.659 192.5,372.5C 192.167,372.5 191.833,372.5 191.5,372.5C 189.76,362.242 188.76,351.909 188.5,341.5C 180.003,344.082 172.003,347.749 164.5,352.5C 171.134,345.213 179.134,339.88 188.5,336.5C 193.208,333.98 198.208,332.314 203.5,331.5 Z"/></g>
<g><path style="opacity:1" fill="#ce212c" d="M 607.5,334.5 C 607.5,421.833 607.5,509.167 607.5,596.5C 513.5,596.5 419.5,596.5 325.5,596.5C 432.955,585.061 514.455,533.395 570,441.5C 588.626,408.123 600.126,372.456 604.5,334.5C 605.5,334.5 606.5,334.5 607.5,334.5 Z"/></g>
<g><path style="opacity:1" fill="#304854" d="M 344.5,359.5 C 371.148,366.996 397.815,374.496 424.5,382C 418.856,387.812 412.523,392.646 405.5,396.5C 403.731,394.603 401.398,393.436 398.5,393C 355.519,381.005 312.519,369.172 269.5,357.5C 265.156,351.138 262.156,344.138 260.5,336.5C 288.587,343.855 316.587,351.522 344.5,359.5 Z"/></g>
<g><path style="opacity:1" fill="#bf4b40" d="M 207.5,367.5 C 213.09,388.593 221.423,408.593 232.5,427.5C 226.335,429.959 220.002,431.959 213.5,433.5C 203.118,414.356 196.118,394.022 192.5,372.5C 197.357,370.659 202.357,368.992 207.5,367.5 Z"/></g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 6.8 KiB

20
packages/html-reporter/src/testCaseView.tsx
View file

@ -44,6 +44,11 @@ export const TestCaseView: React.FC<{
return test?.annotations?.filter(annotation => !annotation.type.startsWith('_')) || [];
}, [test?.annotations]);
React.useEffect(() => {
document.title = `| ${test?.title}` ?? 'Playwright Test Report';
setSvgFavicon(test?.outcome);
}, [test?.outcome, test?.title]);
return <div className='test-case-column vbox'>
{test && <div className='test-case-path'>{test.path.join(' › ')}</div>}
{test && <div className='test-case-title'>{test?.title}</div>}
@ -130,3 +135,18 @@ const LabelsLinkView: React.FC<React.PropsWithChildren<{
</>
) : null;
};
function setSvgFavicon(outcome: 'skipped' | 'expected' | 'unexpected' | 'flaky'| undefined) {
// Find or create a link element for the favicon
let link: HTMLLinkElement | null = document.querySelector("link[rel*='icon']");
if (!link) {
link = document.createElement('link');
link.rel = 'icon';
document.getElementsByTagName('head')[0].appendChild(link);
}
if (!outcome)
link.href = '../logo_default.svg';
else
link.href = `../logo_${outcome}.svg`;
}