File tree Expand file tree Collapse file tree 1 file changed +53
-0
lines changed Expand file tree Collapse file tree 1 file changed +53
-0
lines changed Original file line number Diff line number Diff line change @@ -39,6 +39,39 @@ class Browser
39
39
*/
40
40
public static $ storeScreenshotsAt ;
41
41
42
+ /**
43
+ * These are the most common screen sizes to use for responsive screenshots.
44
+ * These will trigger all of tailwind's default breakpoints.
45
+ *
46
+ * @var array
47
+ */
48
+ public static $ responsiveScreenSizes = [
49
+ 'xs ' => [
50
+ 'width ' => 360 ,
51
+ 'height ' => 640 ,
52
+ ],
53
+ 'sm ' => [
54
+ 'width ' => 640 ,
55
+ 'height ' => 360 ,
56
+ ],
57
+ 'md ' => [
58
+ 'width ' => 768 ,
59
+ 'height ' => 1024 ,
60
+ ],
61
+ 'lg ' => [
62
+ 'width ' => 1024 ,
63
+ 'height ' => 768 ,
64
+ ],
65
+ 'xl ' => [
66
+ 'width ' => 1280 ,
67
+ 'height ' => 1024 ,
68
+ ],
69
+ '2xl ' => [
70
+ 'width ' => 1536 ,
71
+ 'height ' => 864 ,
72
+ ],
73
+ ];
74
+
42
75
/**
43
76
* The directory that will contain any console logs.
44
77
*
@@ -396,6 +429,26 @@ public function screenshot($name)
396
429
return $ this ;
397
430
}
398
431
432
+ /**
433
+ * Take a series of screenshots at different browser sizes to emulate different devices.
434
+ *
435
+ * @param string $name
436
+ * @return $this
437
+ */
438
+ public function responsiveScreenShots ($ name )
439
+ {
440
+ if (substr ($ name , -1 ) !== '/ ' ) {
441
+ $ name .= '- ' ;
442
+ }
443
+
444
+ foreach (static ::$ responsiveScreenSizes as $ device => $ size ) {
445
+ $ this ->resize ($ size ['width ' ], $ size ['height ' ])
446
+ ->screenshot ("$ name$ device " );
447
+ }
448
+
449
+ return $ this ;
450
+ }
451
+
399
452
/**
400
453
* Store the console output with the given name.
401
454
*
You can’t perform that action at this time.
0 commit comments