@@ -29,7 +29,7 @@ describe('input', () => {
2929 await withBrowser ( async ( response , context ) => {
3030 const page = context . getSelectedPage ( ) ;
3131 await page . setContent (
32- `<!DOCTYPE html>< button onclick="this.innerText = 'clicked';">test`,
32+ html ` < button onclick ="this.innerText = 'clicked'; "> test</ button > `,
3333 ) ;
3434 await context . createTextSnapshot ( ) ;
3535 await click . handler (
@@ -53,7 +53,9 @@ describe('input', () => {
5353 await withBrowser ( async ( response , context ) => {
5454 const page = context . getSelectedPage ( ) ;
5555 await page . setContent (
56- `<!DOCTYPE html><button ondblclick="this.innerText = 'dblclicked';">test` ,
56+ html `< button ondblclick ="this.innerText = 'dblclicked'; "
57+ > test</ button
58+ > ` ,
5759 ) ;
5860 await context . createTextSnapshot ( ) ;
5961 await click . handler (
@@ -158,7 +160,7 @@ describe('input', () => {
158160 await withBrowser ( async ( response , context ) => {
159161 const page = context . getSelectedPage ( ) ;
160162 await page . setContent (
161- `<!DOCTYPE html>< button onmouseover="this.innerText = 'hovered';">test`,
163+ html ` < button onmouseover ="this.innerText = 'hovered'; "> test</ button > `,
162164 ) ;
163165 await context . createTextSnapshot ( ) ;
164166 await hover . handler (
@@ -184,7 +186,7 @@ describe('input', () => {
184186 it ( 'fills out an input' , async ( ) => {
185187 await withBrowser ( async ( response , context ) => {
186188 const page = context . getSelectedPage ( ) ;
187- await page . setContent ( `<!DOCTYPE html>< input>`) ;
189+ await page . setContent ( html ` < input / > `) ;
188190 await context . createTextSnapshot ( ) ;
189191 await fill . handler (
190192 {
@@ -209,7 +211,10 @@ describe('input', () => {
209211 await withBrowser ( async ( response , context ) => {
210212 const page = context . getSelectedPage ( ) ;
211213 await page . setContent (
212- `<!DOCTYPE html><select><option value="v1">one</option><option value="v2">two</option></select>` ,
214+ html `< select
215+ > < option value ="v1 "> one</ option
216+ > < option value ="v2 "> two</ option > </ select
217+ > ` ,
213218 ) ;
214219 await context . createTextSnapshot ( ) ;
215220 await fill . handler (
@@ -239,25 +244,35 @@ describe('input', () => {
239244 it ( 'drags one element onto another' , async ( ) => {
240245 await withBrowser ( async ( response , context ) => {
241246 const page = context . getSelectedPage ( ) ;
242- await page . setContent ( `<!DOCTYPE html>
243- <div role="button" id="drag" draggable="true">drag me</div>
244- <div id="drop" aria-label="drop"
245- style="width: 100px; height: 100px; border: 1px solid black;" ondrop="this.innerText = 'dropped';">
246- </div>
247- <script>
248- drag.addEventListener("dragstart", (event) => {
249- event.dataTransfer.setData("text/plain", event.target.id);
250- });
251- drop.addEventListener("dragover", (event) => {
252- event.preventDefault();
253- event.dataTransfer.dropEffect = "move";
254- });
255- drop.addEventListener("drop", (event) => {
256- event.preventDefault();
257- const data = event.dataTransfer.getData("text/plain");
258- event.target.appendChild(document.getElementById(data));
259- });
260- </script>` ) ;
247+ await page . setContent (
248+ html `< div
249+ role ="button "
250+ id ="drag "
251+ draggable ="true "
252+ > drag me</ div
253+ >
254+ < div
255+ id ="drop "
256+ aria-label ="drop "
257+ style ="width: 100px; height: 100px; border: 1px solid black; "
258+ ondrop ="this.innerText = 'dropped'; "
259+ >
260+ </ div >
261+ < script >
262+ drag . addEventListener ( 'dragstart' , event => {
263+ event . dataTransfer . setData ( 'text/plain' , event . target . id ) ;
264+ } ) ;
265+ drop . addEventListener ( 'dragover' , event => {
266+ event . preventDefault ( ) ;
267+ event . dataTransfer . dropEffect = 'move' ;
268+ } ) ;
269+ drop . addEventListener ( 'drop' , event => {
270+ event . preventDefault ( ) ;
271+ const data = event . dataTransfer . getData ( 'text/plain' ) ;
272+ event . target . appendChild ( document . getElementById ( data ) ) ;
273+ } ) ;
274+ </ script > ` ,
275+ ) ;
261276 await context . createTextSnapshot ( ) ;
262277 await drag . handler (
263278 {
@@ -283,12 +298,24 @@ describe('input', () => {
283298 it ( 'successfully fills out the form' , async ( ) => {
284299 await withBrowser ( async ( response , context ) => {
285300 const page = context . getSelectedPage ( ) ;
286- await page . setContent ( `<!DOCTYPE html>
287- <form>
288- <label>username<input name=username type="text"/></label>
289- <label>email<input name=email type="text"/></label>
290- <input type=submit value="Submit">
291- </form>` ) ;
301+ await page . setContent (
302+ html `< form >
303+ < label
304+ > username< input
305+ name ="username "
306+ type ="text "
307+ /> </ label >
308+ < label
309+ > email< input
310+ name ="email "
311+ type ="text "
312+ /> </ label >
313+ < input
314+ type ="submit "
315+ value ="Submit "
316+ />
317+ </ form > ` ,
318+ ) ;
292319 await context . createTextSnapshot ( ) ;
293320 await fillForm . handler (
294321 {
@@ -335,10 +362,14 @@ describe('input', () => {
335362
336363 await withBrowser ( async ( response , context ) => {
337364 const page = context . getSelectedPage ( ) ;
338- await page . setContent ( `<!DOCTYPE html>
339- <form>
340- <input type="file" id="file-input">
341- </form>` ) ;
365+ await page . setContent (
366+ html `< form >
367+ < input
368+ type ="file "
369+ id ="file-input "
370+ />
371+ </ form > ` ,
372+ ) ;
342373 await context . createTextSnapshot ( ) ;
343374 await uploadFile . handler (
344375 {
@@ -366,14 +397,21 @@ describe('input', () => {
366397
367398 await withBrowser ( async ( response , context ) => {
368399 const page = context . getSelectedPage ( ) ;
369- await page . setContent ( `<!DOCTYPE html>
370- <button id="file-chooser-button">Upload file</button>
371- <input type="file" id="file-input" style="display: none;">
372- <script>
373- document.getElementById('file-chooser-button').addEventListener('click', () => {
374- document.getElementById('file-input').click();
375- });
376- </script>` ) ;
400+ await page . setContent (
401+ html `< button id ="file-chooser-button "> Upload file</ button >
402+ < input
403+ type ="file "
404+ id ="file-input "
405+ style ="display: none; "
406+ />
407+ < script >
408+ document
409+ . getElementById ( 'file-chooser-button' )
410+ . addEventListener ( 'click' , ( ) => {
411+ document . getElementById ( 'file-input' ) . click ( ) ;
412+ } ) ;
413+ </ script > ` ,
414+ ) ;
377415 await context . createTextSnapshot ( ) ;
378416 await uploadFile . handler (
379417 {
@@ -406,7 +444,7 @@ describe('input', () => {
406444
407445 await withBrowser ( async ( response , context ) => {
408446 const page = context . getSelectedPage ( ) ;
409- await page . setContent ( `<!DOCTYPE html> <div>Not a file input</div>`) ;
447+ await page . setContent ( html ` < div > Not a file input</ div > `) ;
410448 await context . createTextSnapshot ( ) ;
411449
412450 await assert . rejects (
@@ -465,11 +503,13 @@ describe('input', () => {
465503 it ( 'processes press_key' , async ( ) => {
466504 await withBrowser ( async ( response , context ) => {
467505 const page = context . getSelectedPage ( ) ;
468- await page . setContent ( `<!DOCTYPE html><script>
469- logs=[];
470- document.addEventListener('keydown', e => logs.push('d'+e.key));
471- document.addEventListener('keyup', e => logs.push('u'+e.key));
472- </script>` ) ;
506+ await page . setContent (
507+ html `< script >
508+ logs = [ ] ;
509+ document . addEventListener ( 'keydown' , e => logs . push ( 'd' + e . key ) ) ;
510+ document . addEventListener ( 'keyup' , e => logs . push ( 'u' + e . key ) ) ;
511+ </ script > ` ,
512+ ) ;
473513 await context . createTextSnapshot ( ) ;
474514
475515 await pressKey . handler (
0 commit comments