From 6be908d9590044c54a670012fbdd0a78d58b74a5 Mon Sep 17 00:00:00 2001 From: Yury Semikhatsky Date: Mon, 27 Sep 2021 13:45:03 -0700 Subject: [PATCH] test: canvas updates are reflected on screenshots (#9180) --- tests/page/page-screenshot.spec.ts | 30 ++++++++++++++++++ .../canvas-changes-0-chromium.png | Bin 0 -> 5342 bytes .../canvas-changes-0-firefox.png | Bin 0 -> 5316 bytes .../canvas-changes-0-webkit.png | Bin 0 -> 19018 bytes .../canvas-changes-1-chromium.png | Bin 0 -> 5364 bytes .../canvas-changes-1-firefox.png | Bin 0 -> 5328 bytes .../canvas-changes-1-webkit.png | Bin 0 -> 19032 bytes .../canvas-changes-2-chromium.png | Bin 0 -> 5384 bytes .../canvas-changes-2-firefox.png | Bin 0 -> 5339 bytes .../canvas-changes-2-webkit.png | Bin 0 -> 19045 bytes 10 files changed, 30 insertions(+) create mode 100644 tests/page/page-screenshot.spec.ts-snapshots/canvas-changes-0-chromium.png create mode 100644 tests/page/page-screenshot.spec.ts-snapshots/canvas-changes-0-firefox.png create mode 100644 tests/page/page-screenshot.spec.ts-snapshots/canvas-changes-0-webkit.png create mode 100644 tests/page/page-screenshot.spec.ts-snapshots/canvas-changes-1-chromium.png create mode 100644 tests/page/page-screenshot.spec.ts-snapshots/canvas-changes-1-firefox.png create mode 100644 tests/page/page-screenshot.spec.ts-snapshots/canvas-changes-1-webkit.png create mode 100644 tests/page/page-screenshot.spec.ts-snapshots/canvas-changes-2-chromium.png create mode 100644 tests/page/page-screenshot.spec.ts-snapshots/canvas-changes-2-firefox.png create mode 100644 tests/page/page-screenshot.spec.ts-snapshots/canvas-changes-2-webkit.png diff --git a/tests/page/page-screenshot.spec.ts b/tests/page/page-screenshot.spec.ts index 9652c1d058..266fd64468 100644 --- a/tests/page/page-screenshot.spec.ts +++ b/tests/page/page-screenshot.spec.ts @@ -171,6 +171,36 @@ it.describe('page screenshot', () => { expect(screenshot).toMatchSnapshot('screenshot-canvas.png', { threshold: 0.4 }); }); + it('should capture canvas changes', async ({ page, browserName, isMac }) => { + it.fail(browserName === 'webkit' && isMac, 'https://github.com/microsoft/playwright/issues/8796'); + await page.goto('data:text/html,'); + await page.evaluate(() => { + const canvas = document.querySelector('canvas'); + canvas.width = 600; + canvas.height = 600; + }); + + async function addLine(step: number) { + await page.evaluate(n => { + const canvas = document.querySelector('canvas'); + const ctx = canvas.getContext('2d'); + ctx.lineWidth = 1; + ctx.beginPath(); + ctx.moveTo(0, n * 100); + ctx.lineTo(300, n * 100); + ctx.stroke(); + }, step); + } + + for (let i = 0; i < 3; i++) { + await addLine(i); + // With the slight delay WebKit stops reflecting changes in the screenshots on macOS. + await new Promise(f => setTimeout(f, 100)); + const screenshot = await page.screenshot(); + expect(screenshot).toMatchSnapshot(`canvas-changes-${i}.png`); + } + }); + it('should work for webgl', async ({ page, server, browserName }) => { it.fixme(browserName === 'firefox' || browserName === 'webkit'); diff --git a/tests/page/page-screenshot.spec.ts-snapshots/canvas-changes-0-chromium.png b/tests/page/page-screenshot.spec.ts-snapshots/canvas-changes-0-chromium.png new file mode 100644 index 0000000000000000000000000000000000000000..6fcce2cf531473ab7a8e4b7a1cbe7e8965d77f28 GIT binary patch literal 5342 zcmeAS@N?(olHy`uVBq!ia0y~yUj+{FMWw@PXt$29UW9 zGZ?`9L?#80a0_Pxh!Rj^U;9jMWc;%IMqbjSc$5{?GKXdn!S5j64tf&w!`MVvx`(aGTH>gTe~ HDWM4fORfl= literal 0 HcmV?d00001 diff --git a/tests/page/page-screenshot.spec.ts-snapshots/canvas-changes-0-firefox.png b/tests/page/page-screenshot.spec.ts-snapshots/canvas-changes-0-firefox.png new file mode 100644 index 0000000000000000000000000000000000000000..a5030e8655e372a1037e2c92be7fe5249833b38a GIT binary patch literal 5316 zcmeAS@N?(olHy`uVBq!ia0y~yU2+qHQihbZx7k57!+k*pMj)l&!@vTh8Vnc(K%$3O96%I@ zFpA`cWQIAC#+&1LfKoSp5}^UFX`_;a!h1A?Mnh;cml0PsjpminyfT_sM)L~MjhWE` zW3<2+Eigt4jL`xEt(P}iFpd_CqXpw=!8lqljuwoVV}PX84%Li{=el+5HrNpd8cg(b L^>bP0l+XkKJP*bW literal 0 HcmV?d00001 diff --git a/tests/page/page-screenshot.spec.ts-snapshots/canvas-changes-0-webkit.png b/tests/page/page-screenshot.spec.ts-snapshots/canvas-changes-0-webkit.png new file mode 100644 index 0000000000000000000000000000000000000000..b1515c2b94f84dd90c1335eb8f3ed6fa0ed6cab9 GIT binary patch literal 19018 zcmeHPO=uHA82x58X=6-DT4K@Qp&Ip2A;uzNPmN8MBtmN}QVInrHMUp;r7fjGrP~xz zB2w|#gP4;DLi{=Ppmjw(DW>+)gQyiRN)d!2^rCgv&1QF-J$sOMSZ1;_8D_p@-@Ny} zVGEh=WP>;4C8CCOD$zsa7FE9NsS`!{+J|0Iu(6(GCzamr{U$ynF7%~`y1J-U)IG%J zE|N>@BCe3Qh@>JTNt8^xSL8;kn~IWA=gV5h^I>(7C`ReT$+MH}`}?EUUu1&ucL%bc zKVBVtJaeoya_7rLer_szH}Ga-ti$hT+~obY6#@Y!?ZiN?1 z>z^KMwu>(|@!#hTjs$YnMY#rfx%}&8TOsZ=mz4U9ZnoUsXAgunvrI5b&Hc9uwz2+( zOiihDA~&9|ZHb*xsqd0}$g(0M$YCa}c~Z9w$Op&=-H`z(02BZUrU4820Qms;pgnpa4)X9d~3O%veA^Kt4b| zKt4b|RL!+Y1?LoSP612-OhMlr0Scz|4o?A|0z8HP&r?{<%hNn(pF<&A#(iGiuN9-wA`I2bq?hI0PONbApigX literal 0 HcmV?d00001 diff --git a/tests/page/page-screenshot.spec.ts-snapshots/canvas-changes-1-chromium.png b/tests/page/page-screenshot.spec.ts-snapshots/canvas-changes-1-chromium.png new file mode 100644 index 0000000000000000000000000000000000000000..f6f130a44ab8acca5d3381d62b07b4d1a8dee6d6 GIT binary patch literal 5364 zcmeAS@N?(olHy`uVBq!ia0y~yU{%gD3Xv9*%;H7qga?ebf@yzIpo08E&9H29GLxTM*5#qmO|D zL?<#SfT$ME1`s8n#=r!m9A=0R z9|jP=!GKW!Bz%a)0Yq^KGmJ`(2Et%Y2|2db1v1BFtr_aJ<=(z540P&)_jA||%-osG z4oblVjj1AbAjXML>gN literal 0 HcmV?d00001 diff --git a/tests/page/page-screenshot.spec.ts-snapshots/canvas-changes-1-webkit.png b/tests/page/page-screenshot.spec.ts-snapshots/canvas-changes-1-webkit.png new file mode 100644 index 0000000000000000000000000000000000000000..f64458d6abb759c3779d7916133cb9ff2a82fcae GIT binary patch literal 19032 zcmeI4-Afcv7{=e3UDx$1KiJa5i?I!@Fk8qAvo6MMH+KWKP09od2C^dYLdc7ZjM3;r z5TgVsC|oM~xRJUElSL*n>MG3wFDkPO%d$YaXpP;Xv(2vKIP(V-Jr~2AJ?~-8IeX6h z&hx%AXS#!dnymD~bRx>~`#g0-DJ;p4+imPL*73HUow#FlHEtSwUi69m@EmIJAFi#X z4J>UZ?%Ywb#*46{kR3#p5Jwhv=HhuFK50#%kR_Ss$KwSLI+YYHuFqc2x|W4BT3u{bOB|FfkVmp9mhN3cwwhisSuw(hv1W}>c&4x+@aa!Um(~o9OROl*KuV)hn^lehJQ(5iV z<&!sZleKECUkK;EiTwOtI#nvlqFagVy>2VkHB%^Q?HJfs)>moPtsZMEW8OZo+N3F7 z&LZ7kc|~_EwU0g4Oxfu>Vq$TmWXezKo7Nb6?aFgeuW+r{XbC!8w5su9_p-rYJym=P zRd%(VHCn{o3N^HNOH7*WWPdI?gb~USFy(L$B{&HvFj4~BY{dc;0EPb$3Y}w(ccLTj zevL+%3iR0*Ms~gutU9GRYK`%(`txQgv7euev~SEF_8KLwEY>KSXzKx=+h~)@CA!*I z6{qPM@MlyyAIe;7;Im+2>6N*AFVCzsQL!I*o3iEZX%kBovjp-lX=<5G zepO9gW{Udb%@uiz8Hai6H|`ehq#9rSO5jaP(T4tNGy|p0-&G<-v9+b z0Z`C93@8OC1@*}Y+=sZU4W$630Hv@P&jJ(xg+vGvN&!j%N6-OG=?D9B)1JK*1Zg;6`-h1K z#7JaP08uTR4IoNDje!YBIm}?-0C7hpM+0H7ri9-&4;IS!zhT&sv-ayZP?q>%wVbga zZQc!Vez}t%-O3M2!khLmjwa>N{0vM9Lo^UZ)A?xCG+I9^fXedGM#^X)j5b$Co8_Yo xx*^(@8O^+-nRhhvj%Hq9GiEdphI}CWWz2I`nfUOoNej>`44$rjF6*2UngE{BE1CcR literal 0 HcmV?d00001 diff --git a/tests/page/page-screenshot.spec.ts-snapshots/canvas-changes-2-firefox.png b/tests/page/page-screenshot.spec.ts-snapshots/canvas-changes-2-firefox.png new file mode 100644 index 0000000000000000000000000000000000000000..bb47b0ed4af107a262bb645b46e5a312ca95258d GIT binary patch literal 5339 zcmeAS@N?(olHy`uVBq!ia0y~yUq`_-7{=e(UDsVNwN}((7MhaUO(}x3pxt##7jzTpVpKNRjrx*g7bC3MS}~Kt z3c?Rciv%H&*q1P|n2;j6sAYr@l?AnJ7m_X{712ApZn@6<0Y%S;Vb0DwJ9EyNbAIPJ z&m5+%*qt9AlNdup@vZ`A2~iX$b$uoy?|Q4Btmd6iS(5Ldww|N_|8Q<8b!{ywqFJ0a zkx;vx49Y3ICGtk3_X(uuy`UWP>B7+{^6A5AU7vE|rc}9u$VM)wePxyK{;_>Wck!gW z`<bj7#nhmY+DEIsRqF=Hv%&4=i0eU1u;^l5G+RqY`DAL*H-jds&n)Ho&J2 zWr_6Jt`#U3^n>+xzC2Q2&t#=)qsHN`QkjNd?7F&e)V;%}8Et1rXDNI*YjQSS>sY_@ zctnPSQQ2QN*!1ahdRe+nvN`0ht6GdH;lBk7nLM+i`a}8|SCYo<49j&tqpA#nIQ30E zEt1eaaI8?HqL%B7a>BU<8j)ihDW5%GqXw;JE9E!zs4CrL$%wI1{l#0($cLd6K}-`V z$)201j`%V}nsa%^M2&2pl!OWt2v5jlL6but3X#wQC@?93Z62`z1wi3Hgo5nPe3;`8 ztmtw}I5n9YvC}+{8nxh(GOUz^exov;nTrB~at2-zR1RN7IVwJ3nn;zOV zBGUxDcs|w@AyY#l?`~9_R9O;jj>ub3^zJsqNzL=pQpSjOzDD+xZ0d1MOH)Vs60&J; zXMj(ZpS5YPGn1qIK50-z9bTmXgt4GNy#{u`A& z{b#G183bnG*_ygUZ-gD{X_Pk7&6tE*wWN|u2ERS+{pee#;TZBD`$N~>Uz4U0d&MqR zPU{hkNG?a*Q%qNOp`O8#@>CPd^d*l1s~AG>%%fkW*kit|KjI-Ogfj`&hVdbc~p z9BTEW1*Yc;`;6{4$r_OpY@DJ%ctR!%njH5~^daVk2T)*A0^2;60SbV^hyw{I016?w z3@88!fWn`d9+U!X2rVp4tjF>rq0-yjW{B|7SDJa?*PyiGF1wbLa{7>zI*d31!Q5Uv8ek_zI*0R=$e_t2mu0EK@J3fH}*Q;E#o%C`Xi z%z&_5lj{NtYI&r`3Ss6NmOLw50~7#-kVOP2016|v2%zwnKw&6)?WO6b@3nb{l}|jm Lmbsm64)O3WXBmmb literal 0 HcmV?d00001