/*
* 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 BrowserContextViewportMobileTests : BrowserTestEx
{
[PlaywrightTest("browsercontext-viewport-mobile.spec.ts", "should support mobile emulation")]
[Skip(SkipAttribute.Targets.Firefox)]
public async Task ShouldSupportMobileEmulation()
{
await using var context = await Browser.NewContextAsync(Playwright.Devices["iPhone 6"]);
var page = await context.NewPageAsync();
await page.GotoAsync(Server.Prefix + "/mobile.html");
Assert.AreEqual(375, await page.EvaluateAsync<int>("window.innerWidth"));
await page.SetViewportSizeAsync(400, 300);
Assert.AreEqual(400, await page.EvaluateAsync<int>("window.innerWidth"));
}
[PlaywrightTest("browsercontext-viewport-mobile.spec.ts", "should support touch emulation")]
[Skip(SkipAttribute.Targets.Firefox)]
public async Task ShouldSupportTouchEmulation()
{
const string dispatchTouch = @"
function dispatchTouch() {
let fulfill;
const promise = new Promise(x => fulfill = x);
window.ontouchstart = function(e) {
fulfill('Received touch');
};
window.dispatchEvent(new Event('touchstart'));
fulfill('Did not receive touch');
return promise;
}";
await using var context = await Browser.NewContextAsync(Playwright.Devices["iPhone 6"]);
var page = await context.NewPageAsync();
await page.GotoAsync(Server.Prefix + "/mobile.html");
Assert.True(await page.EvaluateAsync<bool>("'ontouchstart' in window"));
Assert.AreEqual("Received touch", await page.EvaluateAsync<string>(dispatchTouch));
}
[PlaywrightTest("browsercontext-viewport-mobile.spec.ts", "should be detectable by Modernizr")]
[Skip(SkipAttribute.Targets.Firefox)]
public async Task ShouldBeDetectableByModernizr()
{
await using var context = await Browser.NewContextAsync(Playwright.Devices["iPhone 6"]);
var page = await context.NewPageAsync();
await page.GotoAsync(Server.Prefix + "/detect-touch.html");
Assert.AreEqual("YES", await page.EvaluateAsync<string>("document.body.textContent.trim()"));
}
[PlaywrightTest("browsercontext-viewport-mobile.spec.ts", "should detect touch when applying viewport with touches")]
[Skip(SkipAttribute.Targets.Firefox)]
public async Task ShouldDetectTouchWhenApplyingViewportWithTouches()
{
await using var context = await Browser.NewContextAsync(new()
{
ViewportSize = new()
{
Width = 800,
Height = 600,
},
HasTouch = true,
});
var page = await context.NewPageAsync();
await page.GotoAsync(Server.EmptyPage);
await page.AddScriptTagAsync(new() { Url = Server.Prefix + "/modernizr.js" });
Assert.True(await page.EvaluateAsync<bool>("() => Modernizr.touchevents"));
}
[PlaywrightTest("browsercontext-viewport-mobile.spec.ts", "should support landscape emulation")]
[Skip(SkipAttribute.Targets.Firefox)]
public async Task ShouldSupportLandscapeEmulation()
{
await using var context1 = await Browser.NewContextAsync(Playwright.Devices["iPhone 6"]);
var page1 = await context1.NewPageAsync();
await page1.GotoAsync(Server.Prefix + "/mobile.html");
Assert.False(await page1.EvaluateAsync<bool>("() => matchMedia('(orientation: landscape)').matches"));
await using var context2 = await Browser.NewContextAsync(Playwright.Devices["iPhone 6 landscape"]);
var page2 = await context2.NewPageAsync();
await page2.GotoAsync(Server.Prefix + "/mobile.html");
Assert.True(await page2.EvaluateAsync<bool>("() => matchMedia('(orientation: landscape)').matches"));
}
[PlaywrightTest("browsercontext-viewport-mobile.spec.ts", "should support window.orientation emulation")]
[Skip(SkipAttribute.Targets.Firefox)]
public async Task ShouldSupportWindowOrientationEmulation()
{
await using var context = await Browser.NewContextAsync(new()
{
ViewportSize = new()
{
Width = 300,
Height = 400,
},
IsMobile = true,
});
var page = await context.NewPageAsync();
await page.GotoAsync(Server.Prefix + "/mobile.html");
Assert.AreEqual(0, await page.EvaluateAsync<int?>("() => window.orientation"));
await page.SetViewportSizeAsync(400, 300);
Assert.AreEqual(90, await page.EvaluateAsync<int?>("() => window.orientation"));
}
[PlaywrightTest("browsercontext-viewport-mobile.spec.ts", "should fire orientationchange event")]
[Skip(SkipAttribute.Targets.Firefox)]
public async Task ShouldFireOrientationChangeEvent()
{
await using var context = await Browser.NewContextAsync(new()
{
ViewportSize = new()
{
Width = 300,
Height = 400,
},
IsMobile = true,
});
var page = await context.NewPageAsync();
await page.GotoAsync(Server.Prefix + "/mobile.html");
await page.EvaluateAsync(@"() => {
window.counter = 0;
window.addEventListener('orientationchange', () => console.log(++window.counter));
}");
var event1Task = page.WaitForConsoleMessageAsync();
await page.SetViewportSizeAsync(400, 300);
var event1 = await event1Task;
Assert.AreEqual("1", event1.Text);
var event2Task = page.WaitForConsoleMessageAsync();
await page.SetViewportSizeAsync(300, 400);
var event2 = await event2Task;
Assert.AreEqual("2", event2.Text);
}
[PlaywrightTest("browsercontext-viewport-mobile.spec.ts", "default mobile viewports to 980 width")]
[Skip(SkipAttribute.Targets.Firefox)]
public async Task DefaultMobileViewportsTo980Width()
{
await using var context = await Browser.NewContextAsync(new()
{
ViewportSize = new()
{
Width = 320,
Height = 480,
},
IsMobile = true,
});
var page = await context.NewPageAsync();
await page.GotoAsync(Server.EmptyPage);
Assert.AreEqual(980, await page.EvaluateAsync<int>("() => window.innerWidth"));
}
[PlaywrightTest("browsercontext-viewport-mobile.spec.ts", "respect meta viewport tag")]
[Skip(SkipAttribute.Targets.Firefox)]
public async Task RespectMetaViewportTag()
{
await using var context = await Browser.NewContextAsync(new()
{
ViewportSize = new()
{
Width = 320,
Height = 480,
},
IsMobile = true,
});
var page = await context.NewPageAsync();
await page.GotoAsync(Server.Prefix + "/mobile.html");
Assert.AreEqual(320, await page.EvaluateAsync<int>("() => window.innerWidth"));
}
}
}
How to use BrowserContextViewportMobileTests class of Microsoft.Playwright.Tests package
Best Playwright-dotnet code snippet using Microsoft.Playwright.Tests.BrowserContextViewportMobileTests
Run Playwright-dotnet automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
BrowserContextViewportMobileTests.cs
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 BrowserContextViewportMobileTests : BrowserTestEx
32 {
33 [PlaywrightTest("browsercontext-viewport-mobile.spec.ts", "should support mobile emulation")]
34 [Skip(SkipAttribute.Targets.Firefox)]
35 public async Task ShouldSupportMobileEmulation()
36 {
37 await using var context = await Browser.NewContextAsync(Playwright.Devices["iPhone 6"]);
38 var page = await context.NewPageAsync();
39
40 await page.GotoAsync(Server.Prefix + "/mobile.html");
41 Assert.AreEqual(375, await page.EvaluateAsync<int>("window.innerWidth"));
42 await page.SetViewportSizeAsync(400, 300);
43 Assert.AreEqual(400, await page.EvaluateAsync<int>("window.innerWidth"));
44 }
45
46 [PlaywrightTest("browsercontext-viewport-mobile.spec.ts", "should support touch emulation")]
47 [Skip(SkipAttribute.Targets.Firefox)]
48 public async Task ShouldSupportTouchEmulation()
49 {
50 const string dispatchTouch = @"
51 function dispatchTouch() {
52 let fulfill;
53 const promise = new Promise(x => fulfill = x);
54 window.ontouchstart = function(e) {
55 fulfill('Received touch');
56 };
57 window.dispatchEvent(new Event('touchstart'));
58
59 fulfill('Did not receive touch');
60
61 return promise;
62 }";
63
64 await using var context = await Browser.NewContextAsync(Playwright.Devices["iPhone 6"]);
65 var page = await context.NewPageAsync();
66 await page.GotoAsync(Server.Prefix + "/mobile.html");
67 Assert.True(await page.EvaluateAsync<bool>("'ontouchstart' in window"));
68 Assert.AreEqual("Received touch", await page.EvaluateAsync<string>(dispatchTouch));
69 }
70
71 [PlaywrightTest("browsercontext-viewport-mobile.spec.ts", "should be detectable by Modernizr")]
72 [Skip(SkipAttribute.Targets.Firefox)]
73 public async Task ShouldBeDetectableByModernizr()
74 {
75 await using var context = await Browser.NewContextAsync(Playwright.Devices["iPhone 6"]);
76 var page = await context.NewPageAsync();
77 await page.GotoAsync(Server.Prefix + "/detect-touch.html");
78 Assert.AreEqual("YES", await page.EvaluateAsync<string>("document.body.textContent.trim()"));
79 }
80
81 [PlaywrightTest("browsercontext-viewport-mobile.spec.ts", "should detect touch when applying viewport with touches")]
82 [Skip(SkipAttribute.Targets.Firefox)]
83 public async Task ShouldDetectTouchWhenApplyingViewportWithTouches()
84 {
85 await using var context = await Browser.NewContextAsync(new()
86 {
87 ViewportSize = new()
88 {
89 Width = 800,
90 Height = 600,
91 },
92 HasTouch = true,
93 });
94
95 var page = await context.NewPageAsync();
96 await page.GotoAsync(Server.EmptyPage);
97 await page.AddScriptTagAsync(new() { Url = Server.Prefix + "/modernizr.js" });
98 Assert.True(await page.EvaluateAsync<bool>("() => Modernizr.touchevents"));
99 }
100
101 [PlaywrightTest("browsercontext-viewport-mobile.spec.ts", "should support landscape emulation")]
102 [Skip(SkipAttribute.Targets.Firefox)]
103 public async Task ShouldSupportLandscapeEmulation()
104 {
105 await using var context1 = await Browser.NewContextAsync(Playwright.Devices["iPhone 6"]);
106 var page1 = await context1.NewPageAsync();
107 await page1.GotoAsync(Server.Prefix + "/mobile.html");
108 Assert.False(await page1.EvaluateAsync<bool>("() => matchMedia('(orientation: landscape)').matches"));
109
110 await using var context2 = await Browser.NewContextAsync(Playwright.Devices["iPhone 6 landscape"]);
111 var page2 = await context2.NewPageAsync();
112 await page2.GotoAsync(Server.Prefix + "/mobile.html");
113 Assert.True(await page2.EvaluateAsync<bool>("() => matchMedia('(orientation: landscape)').matches"));
114 }
115
116 [PlaywrightTest("browsercontext-viewport-mobile.spec.ts", "should support window.orientation emulation")]
117 [Skip(SkipAttribute.Targets.Firefox)]
118 public async Task ShouldSupportWindowOrientationEmulation()
119 {
120 await using var context = await Browser.NewContextAsync(new()
121 {
122 ViewportSize = new()
123 {
124 Width = 300,
125 Height = 400,
126 },
127 IsMobile = true,
128 });
129 var page = await context.NewPageAsync();
130 await page.GotoAsync(Server.Prefix + "/mobile.html");
131 Assert.AreEqual(0, await page.EvaluateAsync<int?>("() => window.orientation"));
132
133 await page.SetViewportSizeAsync(400, 300);
134 Assert.AreEqual(90, await page.EvaluateAsync<int?>("() => window.orientation"));
135 }
136
137 [PlaywrightTest("browsercontext-viewport-mobile.spec.ts", "should fire orientationchange event")]
138 [Skip(SkipAttribute.Targets.Firefox)]
139 public async Task ShouldFireOrientationChangeEvent()
140 {
141 await using var context = await Browser.NewContextAsync(new()
142 {
143 ViewportSize = new()
144 {
145 Width = 300,
146 Height = 400,
147 },
148 IsMobile = true,
149 });
150 var page = await context.NewPageAsync();
151 await page.GotoAsync(Server.Prefix + "/mobile.html");
152 await page.EvaluateAsync(@"() => {
153 window.counter = 0;
154 window.addEventListener('orientationchange', () => console.log(++window.counter));
155 }");
156
157 var event1Task = page.WaitForConsoleMessageAsync();
158 await page.SetViewportSizeAsync(400, 300);
159 var event1 = await event1Task;
160 Assert.AreEqual("1", event1.Text);
161
162 var event2Task = page.WaitForConsoleMessageAsync();
163 await page.SetViewportSizeAsync(300, 400);
164 var event2 = await event2Task;
165 Assert.AreEqual("2", event2.Text);
166 }
167
168 [PlaywrightTest("browsercontext-viewport-mobile.spec.ts", "default mobile viewports to 980 width")]
169 [Skip(SkipAttribute.Targets.Firefox)]
170 public async Task DefaultMobileViewportsTo980Width()
171 {
172 await using var context = await Browser.NewContextAsync(new()
173 {
174 ViewportSize = new()
175 {
176 Width = 320,
177 Height = 480,
178 },
179 IsMobile = true,
180 });
181 var page = await context.NewPageAsync();
182
183 await page.GotoAsync(Server.EmptyPage);
184 Assert.AreEqual(980, await page.EvaluateAsync<int>("() => window.innerWidth"));
185 }
186
187 [PlaywrightTest("browsercontext-viewport-mobile.spec.ts", "respect meta viewport tag")]
188 [Skip(SkipAttribute.Targets.Firefox)]
189 public async Task RespectMetaViewportTag()
190 {
191 await using var context = await Browser.NewContextAsync(new()
192 {
193 ViewportSize = new()
194 {
195 Width = 320,
196 Height = 480,
197 },
198 IsMobile = true,
199 });
200 var page = await context.NewPageAsync();
201 await page.GotoAsync(Server.Prefix + "/mobile.html");
202 Assert.AreEqual(320, await page.EvaluateAsync<int>("() => window.innerWidth"));
203 }
204 }
205}
206
Accelerate Your Automation Test Cycles With LambdaTest
Leverage LambdaTestās cloud-based platform to execute your automation tests in parallel and trim down your test execution time significantly. Your first 100 automation testing minutes are on us.
Most used methods in BrowserContextViewportMobileTests
Run Selenium Automation Tests on LambdaTest Cloud Grid
Trigger Selenium automation tests on a cloud-based Grid of 3000+ real browsers and operating systems.
Test now for Free
We use cookies to give you the best experience. Cookies help to provide a more personalized experience and relevant advertising for you, and web analytics for us. Learn More in our Cookies policy, Privacy & Terms of service
Allow Cookie
I hope you find the best code examples for your project.
If you want to accelerate automated browser testing, try LambdaTest. Your first 100 automation testing minutes are FREE.
Sarah Elson (Product & Growth Lead)