How to use ShouldEmulateDeviceHeight method of Microsoft.Playwright.Tests.BrowserContextViewportTests class

1/*
2 * MIT License
3 *
4 * Copyright (c) Microsoft Corporation.
5 *
6 * Permission is hereby granted, free of charge, to any person obtaining a copy
7 * of this software and associated documentation files (the "Software"), to deal
8 * in the Software without restriction, including without limitation the rights
9 * to use, copy, modify, merge, publish, distribute, sublicense, and / or sell
10 * copies of the Software, and to permit persons to whom the Software is
11 * furnished to do so, subject to the following conditions:
12 *
13 * The above copyright notice and this permission notice shall be included in all
14 * copies or substantial portions of the Software.
15 *
16 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22 * SOFTWARE.
23 */
24
25using System.Threading.Tasks;
26using Microsoft.Playwright.NUnit;
27using NUnit.Framework;
28
29namespace Microsoft.Playwright.Tests
30{
31    public class BrowserContextViewportTests : PageTestEx
32    {
33        [PlaywrightTest("browsercontext-viewport.spec.ts", "should get the proper default viewport size")]
34        public Task ShouldGetTheProperDefaultViewPortSize()
35            => TestUtils.VerifyViewportAsync(Page, 1280, 720);
36
37
38        [PlaywrightTest("browsercontext-viewport.spec.ts", "should set the proper viewport size")]
39        public async Task ShouldSetTheProperViewportSize()
40        {
41            await TestUtils.VerifyViewportAsync(Page, 1280, 720);
42            await Page.SetViewportSizeAsync(123, 456);
43            await TestUtils.VerifyViewportAsync(Page, 123, 456);
44        }
45
46        [PlaywrightTest("browsercontext-viewport.spec.ts", "should emulate device width")]
47        public async Task ShouldEmulateDeviceWidth()
48        {
49            await TestUtils.VerifyViewportAsync(Page, 1280, 720);
50            await Page.SetViewportSizeAsync(200, 200);
51            Assert.AreEqual(200, await Page.EvaluateAsync<int>("window.innerWidth"));
52            Assert.True(await Page.EvaluateAsync<bool?>("() => matchMedia('(min-device-width: 100px)').matches"));
53            Assert.False(await Page.EvaluateAsync<bool?>("() => matchMedia('(min-device-width: 300px)').matches"));
54            Assert.False(await Page.EvaluateAsync<bool?>("() => matchMedia('(max-device-width: 100px)').matches"));
55            Assert.True(await Page.EvaluateAsync<bool?>("() => matchMedia('(max-device-width: 300px)').matches"));
56            Assert.False(await Page.EvaluateAsync<bool?>("() => matchMedia('(device-width: 500px)').matches"));
57            Assert.True(await Page.EvaluateAsync<bool?>("() => matchMedia('(device-width: 200px)').matches"));
58            await Page.SetViewportSizeAsync(500, 500);
59            Assert.True(await Page.EvaluateAsync<bool?>("() => matchMedia('(min-device-width: 400px)').matches"));
60            Assert.False(await Page.EvaluateAsync<bool?>("() => matchMedia('(min-device-width: 600px)').matches"));
61            Assert.False(await Page.EvaluateAsync<bool?>("() => matchMedia('(max-device-width: 400px)').matches"));
62            Assert.True(await Page.EvaluateAsync<bool?>("() => matchMedia('(max-device-width: 600px)').matches"));
63            Assert.False(await Page.EvaluateAsync<bool?>("() => matchMedia('(device-width: 200px)').matches"));
64            Assert.True(await Page.EvaluateAsync<bool?>("() => matchMedia('(device-width: 500px)').matches"));
65        }
66
67        [PlaywrightTest("browsercontext-viewport.spec.ts", "should emulate device height")]
68        public async Task ShouldEmulateDeviceHeight()
69        {
70            await TestUtils.VerifyViewportAsync(Page, 1280, 720);
71            await Page.SetViewportSizeAsync(200, 200);
72            Assert.AreEqual(200, await Page.EvaluateAsync<int>("window.innerWidth"));
73            Assert.True(await Page.EvaluateAsync<bool?>("() => matchMedia('(min-device-height: 100px)').matches"));
74            Assert.False(await Page.EvaluateAsync<bool?>("() => matchMedia('(min-device-height: 300px)').matches"));
75            Assert.False(await Page.EvaluateAsync<bool?>("() => matchMedia('(max-device-height: 100px)').matches"));
76            Assert.True(await Page.EvaluateAsync<bool?>("() => matchMedia('(max-device-height: 300px)').matches"));
77            Assert.False(await Page.EvaluateAsync<bool?>("() => matchMedia('(device-height: 500px)').matches"));
78            Assert.True(await Page.EvaluateAsync<bool?>("() => matchMedia('(device-height: 200px)').matches"));
79            await Page.SetViewportSizeAsync(500, 500);
80            Assert.True(await Page.EvaluateAsync<bool?>("() => matchMedia('(min-device-height: 400px)').matches"));
81            Assert.False(await Page.EvaluateAsync<bool?>("() => matchMedia('(min-device-height: 600px)').matches"));
82            Assert.False(await Page.EvaluateAsync<bool?>("() => matchMedia('(max-device-height: 400px)').matches"));
83            Assert.True(await Page.EvaluateAsync<bool?>("() => matchMedia('(max-device-height: 600px)').matches"));
84            Assert.False(await Page.EvaluateAsync<bool?>("() => matchMedia('(device-height: 200px)').matches"));
85            Assert.True(await Page.EvaluateAsync<bool?>("() => matchMedia('(device-height: 500px)').matches"));
86        }
87
88        [PlaywrightTest("browsercontext-viewport.spec.ts", "should not have touch by default")]
89        public async Task ShouldNotHaveTouchByDefault()
90        {
91            await Page.GotoAsync(Server.Prefix + "/mobile.html");
92            Assert.False(await Page.EvaluateAsync<bool>("'ontouchstart' in window"));
93            await Page.GotoAsync(Server.Prefix + "/detect-touch.html");
94            Assert.AreEqual("NO", await Page.EvaluateAsync<string>("document.body.textContent.trim()"));
95        }
96
97        [PlaywrightTest("browsercontext-viewport.spec.ts", "should support touch with null viewport")]
98        public async Task ShouldSupportTouchWithNullViewport()
99        {
100            await using var context = await Browser.NewContextAsync(new() { ViewportSize = null, HasTouch = true });
101            var page = await context.NewPageAsync();
102            await page.GotoAsync(Server.Prefix + "/mobile.html");
103            Assert.True(await page.EvaluateAsync<bool>("'ontouchstart' in window"));
104        }
105
106
107        [PlaywrightTest("browsercontext-viewport.spec.ts", "should respect screensize")]
108        [Skip(SkipAttribute.Targets.Firefox)]
109        public async Task ShouldSupportScreenSize()
110        {
111            await using var context = await Browser.NewContextAsync(new()
112            {
113                ScreenSize = new ScreenSize()
114                {
115                    Width = 750,
116                    Height = 1334,
117                },
118                ViewportSize = new ViewportSize()
119                {
120                    Width = 375,
121                    Height = 667
122                }
123            });
124
125            var page = await context.NewPageAsync();
126            Assert.True(await page.EvaluateAsync<bool?>("() => matchMedia('(device-height: 1334px)').matches"));
127            Assert.True(await page.EvaluateAsync<bool?>("() => matchMedia('(device-width: 750px)').matches"));
128            await TestUtils.VerifyViewportAsync(page, 375, 667);
129        }
130
131        [PlaywrightTest("browsercontext-viewport.spec.ts", "should ignore screensize when viewport is null")]
132        [Skip(SkipAttribute.Targets.Firefox)]
133        public async Task ShouldIgnoreScreensizeWhenViewportIsNull()
134        {
135            await using var context = await Browser.NewContextAsync(new()
136            {
137                ScreenSize = new ScreenSize()
138                {
139                    Width = 750,
140                    Height = 1334,
141                },
142                ViewportSize = ViewportSize.NoViewport
143            });
144
145            var page = await context.NewPageAsync();
146            Assert.False(await page.EvaluateAsync<bool?>("() => matchMedia('(device-height: 1334px)').matches"));
147            Assert.False(await page.EvaluateAsync<bool?>("() => matchMedia('(device-width: 750px)').matches"));
148            Assert.IsNull(page.ViewportSize);
149        }
150    }
151}
152

Source: BrowserContextViewportTests.cs

/*
 * MIT License
 *
 * Copyright (c) Microsoft Corporation.
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and / or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

using System.Threading.Tasks;
using Microsoft.Playwright.NUnit;
using NUnit.Framework;

namespace Microsoft.Playwright.Tests
{
    public class BrowserContextViewportTests : PageTestEx
    {
        [PlaywrightTest("browsercontext-viewport.spec.ts", "should get the proper default viewport size")]
        public Task ShouldGetTheProperDefaultViewPortSize()
            => TestUtils.VerifyViewportAsync(Page, 1280, 720);


        [PlaywrightTest("browsercontext-viewport.spec.ts", "should set the proper viewport size")]
        public async Task ShouldSetTheProperViewportSize()
        {
            await TestUtils.VerifyViewportAsync(Page, 1280, 720);
            await Page.SetViewportSizeAsync(123, 456);
            await TestUtils.VerifyViewportAsync(Page, 123, 456);
        }

        [PlaywrightTest("browsercontext-viewport.spec.ts", "should emulate device width")]
        public async Task ShouldEmulateDeviceWidth()
        {
            await TestUtils.VerifyViewportAsync(Page, 1280, 720);
            await Page.SetViewportSizeAsync(200, 200);
            Assert.AreEqual(200, await Page.EvaluateAsync<int>("window.innerWidth"));
            Assert.True(await Page.EvaluateAsync<bool?>("() => matchMedia('(min-device-width: 100px)').matches"));
            Assert.False(await Page.EvaluateAsync<bool?>("() => matchMedia('(min-device-width: 300px)').matches"));
            Assert.False(await Page.EvaluateAsync<bool?>("() => matchMedia('(max-device-width: 100px)').matches"));
            Assert.True(await Page.EvaluateAsync<bool?>("() => matchMedia('(max-device-width: 300px)').matches"));
            Assert.False(await Page.EvaluateAsync<bool?>("() => matchMedia('(device-width: 500px)').matches"));
            Assert.True(await Page.EvaluateAsync<bool?>("() => matchMedia('(device-width: 200px)').matches"));
            await Page.SetViewportSizeAsync(500, 500);
            Assert.True(await Page.EvaluateAsync<bool?>("() => matchMedia('(min-device-width: 400px)').matches"));
            Assert.False(await Page.EvaluateAsync<bool?>("() => matchMedia('(min-device-width: 600px)').matches"));
            Assert.False(await Page.EvaluateAsync<bool?>("() => matchMedia('(max-device-width: 400px)').matches"));
            Assert.True(await Page.EvaluateAsync<bool?>("() => matchMedia('(max-device-width: 600px)').matches"));
            Assert.False(await Page.EvaluateAsync<bool?>("() => matchMedia('(device-width: 200px)').matches"));
            Assert.True(await Page.EvaluateAsync<bool?>("() => matchMedia('(device-width: 500px)').matches"));
        }

        [PlaywrightTest("browsercontext-viewport.spec.ts", "should emulate device height")]
        public async Task ShouldEmulateDeviceHeight()
        {
            await TestUtils.VerifyViewportAsync(Page, 1280, 720);
            await Page.SetViewportSizeAsync(200, 200);
            Assert.AreEqual(200, await Page.EvaluateAsync<int>("window.innerWidth"));
            Assert.True(await Page.EvaluateAsync<bool?>("() => matchMedia('(min-device-height: 100px)').matches"));
            Assert.False(await Page.EvaluateAsync<bool?>("() => matchMedia('(min-device-height: 300px)').matches"));
            Assert.False(await Page.EvaluateAsync<bool?>("() => matchMedia('(max-device-height: 100px)').matches"));
            Assert.True(await Page.EvaluateAsync<bool?>("() => matchMedia('(max-device-height: 300px)').matches"));
            Assert.False(await Page.EvaluateAsync<bool?>("() => matchMedia('(device-height: 500px)').matches"));
            Assert.True(await Page.EvaluateAsync<bool?>("() => matchMedia('(device-height: 200px)').matches"));
            await Page.SetViewportSizeAsync(500, 500);
            Assert.True(await Page.EvaluateAsync<bool?>("() => matchMedia('(min-device-height: 400px)').matches"));
            Assert.False(await Page.EvaluateAsync<bool?>("() => matchMedia('(min-device-height: 600px)').matches"));
            Assert.False(await Page.EvaluateAsync<bool?>("() => matchMedia('(max-device-height: 400px)').matches"));
            Assert.True(await Page.EvaluateAsync<bool?>("() => matchMedia('(max-device-height: 600px)').matches"));
            Assert.False(await Page.EvaluateAsync<bool?>("() => matchMedia('(device-height: 200px)').matches"));
            Assert.True(await Page.EvaluateAsync<bool?>("() => matchMedia('(device-height: 500px)').matches"));
        }

        [PlaywrightTest("browsercontext-viewport.spec.ts", "should not have touch by default")]
        public async Task ShouldNotHaveTouchByDefault()
        {
            await Page.GotoAsync(Server.Prefix + "/mobile.html");
            Assert.False(await Page.EvaluateAsync<bool>("'ontouchstart' in window"));
            await Page.GotoAsync(Server.Prefix + "/detect-touch.html");
            Assert.AreEqual("NO", await Page.EvaluateAsync<string>("document.body.textContent.trim()"));
        }

        [PlaywrightTest("browsercontext-viewport.spec.ts", "should support touch with null viewport")]
        public async Task ShouldSupportTouchWithNullViewport()
        {
            await using var context = await Browser.NewContextAsync(new() { ViewportSize = null, HasTouch = true });
            var page = await context.NewPageAsync();
            await page.GotoAsync(Server.Prefix + "/mobile.html");
            Assert.True(await page.EvaluateAsync<bool>("'ontouchstart' in window"));
        }


        [PlaywrightTest("browsercontext-viewport.spec.ts", "should respect screensize")]
        [Skip(SkipAttribute.Targets.Firefox)]
        public async Task ShouldSupportScreenSize()
        {
            await using var context = await Browser.NewContextAsync(new()
            {
                ScreenSize = new ScreenSize()
                {
                    Width = 750,
                    Height = 1334,
                },
                ViewportSize = new ViewportSize()
                {
                    Width = 375,
                    Height = 667
                }
            });

            var page = await context.NewPageAsync();
            Assert.True(await page.EvaluateAsync<bool?>("() => matchMedia('(device-height: 1334px)').matches"));
            Assert.True(await page.EvaluateAsync<bool?>("() => matchMedia('(device-width: 750px)').matches"));
            await TestUtils.VerifyViewportAsync(page, 375, 667);
        }

        [PlaywrightTest("browsercontext-viewport.spec.ts", "should ignore screensize when viewport is null")]
        [Skip(SkipAttribute.Targets.Firefox)]
        public async Task ShouldIgnoreScreensizeWhenViewportIsNull()
        {
            await using var context = await Browser.NewContextAsync(new()
            {
                ScreenSize = new ScreenSize()
                {
                    Width = 750,
                    Height = 1334,
                },
                ViewportSize = ViewportSize.NoViewport
            });

            var page = await context.NewPageAsync();
            Assert.False(await page.EvaluateAsync<bool?>("() => matchMedia('(device-height: 1334px)').matches"));
            Assert.False(await page.EvaluateAsync<bool?>("() => matchMedia('(device-width: 750px)').matches"));
            Assert.IsNull(page.ViewportSize);
        }
    }
}