How to use ShouldEmulateReducedMotion method of Microsoft.Playwright.Tests.PageEmulateMediaTests 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.Linq;
26using System.Threading.Tasks;
27using Microsoft.Playwright.NUnit;
28using NUnit.Framework;
29
30namespace Microsoft.Playwright.Tests
31{
32    public class PageEmulateMediaTests : PageTestEx
33    {
34        [PlaywrightTest("page-emulate-media.spec.ts", "should emulate scheme work")]
35        public async Task ShouldEmulateSchemeWork()
36        {
37            await Page.EmulateMediaAsync(new() { ColorScheme = ColorScheme.Light });
38            Assert.True(await Page.EvaluateAsync<bool>("() => matchMedia('(prefers-color-scheme: light)').matches"));
39            Assert.False(await Page.EvaluateAsync<bool>("() => matchMedia('(prefers-color-scheme: dark)').matches"));
40
41            await Page.EmulateMediaAsync(new() { ColorScheme = ColorScheme.Dark });
42            Assert.True(await Page.EvaluateAsync<bool>("() => matchMedia('(prefers-color-scheme: dark)').matches"));
43            Assert.False(await Page.EvaluateAsync<bool>("() => matchMedia('(prefers-color-scheme: light)').matches"));
44        }
45
46        [PlaywrightTest("page-emulate-media.spec.ts", "should default to light")]
47        public async Task ShouldDefaultToLight()
48        {
49            Assert.True(await Page.EvaluateAsync<bool>("() => matchMedia('(prefers-color-scheme: light)').matches"));
50            Assert.False(await Page.EvaluateAsync<bool>("() => matchMedia('(prefers-color-scheme: dark)').matches"));
51
52            await Page.EmulateMediaAsync(new() { ColorScheme = ColorScheme.Dark });
53            Assert.True(await Page.EvaluateAsync<bool>("() => matchMedia('(prefers-color-scheme: dark)').matches"));
54            Assert.False(await Page.EvaluateAsync<bool>("() => matchMedia('(prefers-color-scheme: light)').matches"));
55
56            await Page.EmulateMediaAsync(new() { ColorScheme = ColorScheme.Null });
57            Assert.True(await Page.EvaluateAsync<bool>("() => matchMedia('(prefers-color-scheme: light)').matches"));
58            Assert.False(await Page.EvaluateAsync<bool>("() => matchMedia('(prefers-color-scheme: dark)').matches"));
59        }
60
61        [PlaywrightTest("page-emulate-media.spec.ts", "should work during navigation")]
62        [Skip(SkipAttribute.Targets.Firefox)]
63        public async Task ShouldWorkDuringNavigation()
64        {
65            await Page.EmulateMediaAsync(new() { ColorScheme = ColorScheme.Light });
66            var navigated = Page.GotoAsync(Server.EmptyPage);
67
68            for (int i = 0; i < 9; i++)
69            {
70                await Page.EmulateMediaAsync(new() { ColorScheme = i % 2 == 0 ? ColorScheme.Dark : ColorScheme.Light });
71                await Task.Delay(1);
72            }
73            await navigated;
74
75            Assert.True(await Page.EvaluateAsync<bool>("() => matchMedia('(prefers-color-scheme: dark)').matches"));
76        }
77
78        [PlaywrightTest("page-emulate-media.spec.ts", "should work in popup")]
79        public async Task ShouldWorkInPopup()
80        {
81            await using (var context = await Browser.NewContextAsync(new()
82            {
83                ColorScheme = ColorScheme.Dark,
84            }))
85            {
86                var page = await context.NewPageAsync();
87                await page.GotoAsync(Server.EmptyPage);
88                var popupTask = page.WaitForPopupAsync();
89
90                await TaskUtils.WhenAll(
91                    popupTask,
92                    page.EvaluateAsync("url => window.open(url)", Server.EmptyPage));
93
94                var popup = popupTask.Result;
95
96                Assert.True(await popup.EvaluateAsync<bool>("() => matchMedia('(prefers-color-scheme: dark)').matches"));
97                Assert.False(await popup.EvaluateAsync<bool>("() => matchMedia('(prefers-color-scheme: light)').matches"));
98            }
99
100            await using (var context = await Browser.NewContextAsync(new()
101            {
102                ColorScheme = ColorScheme.Light,
103            }))
104            {
105                var page = await context.NewPageAsync();
106                await page.GotoAsync(Server.EmptyPage);
107                var popupTask = page.WaitForPopupAsync();
108
109                await TaskUtils.WhenAll(
110                    popupTask,
111                    page.EvaluateAsync("url => window.open(url)", Server.EmptyPage));
112
113                var popup = popupTask.Result;
114
115                Assert.False(await popup.EvaluateAsync<bool>("() => matchMedia('(prefers-color-scheme: dark)').matches"));
116                Assert.True(await popup.EvaluateAsync<bool>("() => matchMedia('(prefers-color-scheme: light)').matches"));
117            }
118        }
119
120        [PlaywrightTest("page-emulate-media.spec.ts", "should work in cross-process iframe")]
121        public async Task ShouldWorkInCrossProcessIframe()
122        {
123            await using var context = await Browser.NewContextAsync(new()
124            {
125                ColorScheme = ColorScheme.Dark,
126            });
127
128            var page = await context.NewPageAsync();
129            await page.GotoAsync(Server.EmptyPage);
130            await FrameUtils.AttachFrameAsync(page, "frame1", Server.CrossProcessPrefix + "/empty.html");
131            var frame = page.Frames.ElementAt(1);
132
133            Assert.True(await frame.EvaluateAsync<bool>("() => matchMedia('(prefers-color-scheme: dark)').matches"));
134        }
135
136        [PlaywrightTest("page-emulate-media.spec.ts", "should emulate type")]
137        public async Task ShouldEmulateType()
138        {
139            Assert.True(await Page.EvaluateAsync<bool>("matchMedia('screen').matches"));
140            Assert.False(await Page.EvaluateAsync<bool>("matchMedia('print').matches"));
141            await Page.EmulateMediaAsync(new() { Media = Media.Print });
142            Assert.False(await Page.EvaluateAsync<bool>("matchMedia('screen').matches"));
143            Assert.True(await Page.EvaluateAsync<bool>("matchMedia('print').matches"));
144            await Page.EmulateMediaAsync();
145            Assert.False(await Page.EvaluateAsync<bool>("matchMedia('screen').matches"));
146            Assert.True(await Page.EvaluateAsync<bool>("matchMedia('print').matches"));
147            await Page.EmulateMediaAsync(new() { Media = Media.Null });
148            Assert.True(await Page.EvaluateAsync<bool>("matchMedia('screen').matches"));
149            Assert.False(await Page.EvaluateAsync<bool>("matchMedia('print').matches"));
150        }
151
152        [PlaywrightTest("page-emulate-media.spec.ts", "should emulate reduced motion")]
153        public async Task ShouldEmulateReducedMotion()
154        {
155            Assert.True(await Page.EvaluateAsync<bool>("matchMedia('(prefers-reduced-motion: no-preference)').matches"));
156            await Page.EmulateMediaAsync(new() { ReducedMotion = ReducedMotion.Reduce });
157            Assert.True(await Page.EvaluateAsync<bool>("matchMedia('(prefers-reduced-motion: reduce)').matches"));
158            Assert.False(await Page.EvaluateAsync<bool>("matchMedia('(prefers-reduced-motion: no-preference)').matches"));
159            await Page.EmulateMediaAsync(new() { ReducedMotion = ReducedMotion.NoPreference });
160            Assert.False(await Page.EvaluateAsync<bool>("matchMedia('(prefers-reduced-motion: reduce)').matches"));
161            Assert.True(await Page.EvaluateAsync<bool>("matchMedia('(prefers-reduced-motion: no-preference)').matches"));
162            await Page.EmulateMediaAsync(new() { ReducedMotion = ReducedMotion.Null });
163        }
164
165        [PlaywrightTest("page-emulate-media.spec.ts", "should emulate forcedColors")]
166        [Skip(SkipAttribute.Targets.Webkit)] // see: https://bugs.webkit.org/show_bug.cgi?id=225281
167        public async Task ShouldEmulateForcedColors()
168        {
169            Assert.IsTrue(await Page.EvaluateAsync<bool>("() => matchMedia('(forced-colors: none)').matches"));
170            await Page.EmulateMediaAsync(new() { ForcedColors = ForcedColors.None });
171            Assert.IsTrue(await Page.EvaluateAsync<bool>("() => matchMedia('(forced-colors: none)').matches"));
172            Assert.IsFalse(await Page.EvaluateAsync<bool>("() => matchMedia('(forced-colors: active)').matches"));
173            await Page.EmulateMediaAsync(new() { ForcedColors = ForcedColors.Active });
174            Assert.IsFalse(await Page.EvaluateAsync<bool>("() => matchMedia('(forced-colors: none)').matches"));
175            Assert.IsTrue(await Page.EvaluateAsync<bool>("() => matchMedia('(forced-colors: active)').matches"));
176            await Page.EmulateMediaAsync(new() { ForcedColors = ForcedColors.Null });
177            Assert.IsTrue(await Page.EvaluateAsync<bool>("() => matchMedia('(forced-colors: none)').matches"));
178        }
179    }
180}
181

Source: PageEmulateMediaTests.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.Linq;
using System.Threading.Tasks;
using Microsoft.Playwright.NUnit;
using NUnit.Framework;

namespace Microsoft.Playwright.Tests
{
    public class PageEmulateMediaTests : PageTestEx
    {
        [PlaywrightTest("page-emulate-media.spec.ts", "should emulate scheme work")]
        public async Task ShouldEmulateSchemeWork()
        {
            await Page.EmulateMediaAsync(new() { ColorScheme = ColorScheme.Light });
            Assert.True(await Page.EvaluateAsync<bool>("() => matchMedia('(prefers-color-scheme: light)').matches"));
            Assert.False(await Page.EvaluateAsync<bool>("() => matchMedia('(prefers-color-scheme: dark)').matches"));

            await Page.EmulateMediaAsync(new() { ColorScheme = ColorScheme.Dark });
            Assert.True(await Page.EvaluateAsync<bool>("() => matchMedia('(prefers-color-scheme: dark)').matches"));
            Assert.False(await Page.EvaluateAsync<bool>("() => matchMedia('(prefers-color-scheme: light)').matches"));
        }

        [PlaywrightTest("page-emulate-media.spec.ts", "should default to light")]
        public async Task ShouldDefaultToLight()
        {
            Assert.True(await Page.EvaluateAsync<bool>("() => matchMedia('(prefers-color-scheme: light)').matches"));
            Assert.False(await Page.EvaluateAsync<bool>("() => matchMedia('(prefers-color-scheme: dark)').matches"));

            await Page.EmulateMediaAsync(new() { ColorScheme = ColorScheme.Dark });
            Assert.True(await Page.EvaluateAsync<bool>("() => matchMedia('(prefers-color-scheme: dark)').matches"));
            Assert.False(await Page.EvaluateAsync<bool>("() => matchMedia('(prefers-color-scheme: light)').matches"));

            await Page.EmulateMediaAsync(new() { ColorScheme = ColorScheme.Null });
            Assert.True(await Page.EvaluateAsync<bool>("() => matchMedia('(prefers-color-scheme: light)').matches"));
            Assert.False(await Page.EvaluateAsync<bool>("() => matchMedia('(prefers-color-scheme: dark)').matches"));
        }

        [PlaywrightTest("page-emulate-media.spec.ts", "should work during navigation")]
        [Skip(SkipAttribute.Targets.Firefox)]
        public async Task ShouldWorkDuringNavigation()
        {
            await Page.EmulateMediaAsync(new() { ColorScheme = ColorScheme.Light });
            var navigated = Page.GotoAsync(Server.EmptyPage);

            for (int i = 0; i < 9; i++)
            {
                await Page.EmulateMediaAsync(new() { ColorScheme = i % 2 == 0 ? ColorScheme.Dark : ColorScheme.Light });
                await Task.Delay(1);
            }
            await navigated;

            Assert.True(await Page.EvaluateAsync<bool>("() => matchMedia('(prefers-color-scheme: dark)').matches"));
        }

        [PlaywrightTest("page-emulate-media.spec.ts", "should work in popup")]
        public async Task ShouldWorkInPopup()
        {
            await using (var context = await Browser.NewContextAsync(new()
            {
                ColorScheme = ColorScheme.Dark,
            }))
            {
                var page = await context.NewPageAsync();
                await page.GotoAsync(Server.EmptyPage);
                var popupTask = page.WaitForPopupAsync();

                await TaskUtils.WhenAll(
                    popupTask,
                    page.EvaluateAsync("url => window.open(url)", Server.EmptyPage));

                var popup = popupTask.Result;

                Assert.True(await popup.EvaluateAsync<bool>("() => matchMedia('(prefers-color-scheme: dark)').matches"));
                Assert.False(await popup.EvaluateAsync<bool>("() => matchMedia('(prefers-color-scheme: light)').matches"));
            }

            await using (var context = await Browser.NewContextAsync(new()
            {
                ColorScheme = ColorScheme.Light,
            }))
            {
                var page = await context.NewPageAsync();
                await page.GotoAsync(Server.EmptyPage);
                var popupTask = page.WaitForPopupAsync();

                await TaskUtils.WhenAll(
                    popupTask,
                    page.EvaluateAsync("url => window.open(url)", Server.EmptyPage));

                var popup = popupTask.Result;

                Assert.False(await popup.EvaluateAsync<bool>("() => matchMedia('(prefers-color-scheme: dark)').matches"));
                Assert.True(await popup.EvaluateAsync<bool>("() => matchMedia('(prefers-color-scheme: light)').matches"));
            }
        }

        [PlaywrightTest("page-emulate-media.spec.ts", "should work in cross-process iframe")]
        public async Task ShouldWorkInCrossProcessIframe()
        {
            await using var context = await Browser.NewContextAsync(new()
            {
                ColorScheme = ColorScheme.Dark,
            });

            var page = await context.NewPageAsync();
            await page.GotoAsync(Server.EmptyPage);
            await FrameUtils.AttachFrameAsync(page, "frame1", Server.CrossProcessPrefix + "/empty.html");
            var frame = page.Frames.ElementAt(1);

            Assert.True(await frame.EvaluateAsync<bool>("() => matchMedia('(prefers-color-scheme: dark)').matches"));
        }

        [PlaywrightTest("page-emulate-media.spec.ts", "should emulate type")]
        public async Task ShouldEmulateType()
        {
            Assert.True(await Page.EvaluateAsync<bool>("matchMedia('screen').matches"));
            Assert.False(await Page.EvaluateAsync<bool>("matchMedia('print').matches"));
            await Page.EmulateMediaAsync(new() { Media = Media.Print });
            Assert.False(await Page.EvaluateAsync<bool>("matchMedia('screen').matches"));
            Assert.True(await Page.EvaluateAsync<bool>("matchMedia('print').matches"));
            await Page.EmulateMediaAsync();
            Assert.False(await Page.EvaluateAsync<bool>("matchMedia('screen').matches"));
            Assert.True(await Page.EvaluateAsync<bool>("matchMedia('print').matches"));
            await Page.EmulateMediaAsync(new() { Media = Media.Null });
            Assert.True(await Page.EvaluateAsync<bool>("matchMedia('screen').matches"));
            Assert.False(await Page.EvaluateAsync<bool>("matchMedia('print').matches"));
        }

        [PlaywrightTest("page-emulate-media.spec.ts", "should emulate reduced motion")]
        public async Task ShouldEmulateReducedMotion()
        {
            Assert.True(await Page.EvaluateAsync<bool>("matchMedia('(prefers-reduced-motion: no-preference)').matches"));
            await Page.EmulateMediaAsync(new() { ReducedMotion = ReducedMotion.Reduce });
            Assert.True(await Page.EvaluateAsync<bool>("matchMedia('(prefers-reduced-motion: reduce)').matches"));
            Assert.False(await Page.EvaluateAsync<bool>("matchMedia('(prefers-reduced-motion: no-preference)').matches"));
            await Page.EmulateMediaAsync(new() { ReducedMotion = ReducedMotion.NoPreference });
            Assert.False(await Page.EvaluateAsync<bool>("matchMedia('(prefers-reduced-motion: reduce)').matches"));
            Assert.True(await Page.EvaluateAsync<bool>("matchMedia('(prefers-reduced-motion: no-preference)').matches"));
            await Page.EmulateMediaAsync(new() { ReducedMotion = ReducedMotion.Null });
        }

        [PlaywrightTest("page-emulate-media.spec.ts", "should emulate forcedColors")]
        [Skip(SkipAttribute.Targets.Webkit)] // see: https://bugs.webkit.org/show_bug.cgi?id=225281
        public async Task ShouldEmulateForcedColors()
        {
            Assert.IsTrue(await Page.EvaluateAsync<bool>("() => matchMedia('(forced-colors: none)').matches"));
            await Page.EmulateMediaAsync(new() { ForcedColors = ForcedColors.None });
            Assert.IsTrue(await Page.EvaluateAsync<bool>("() => matchMedia('(forced-colors: none)').matches"));
            Assert.IsFalse(await Page.EvaluateAsync<bool>("() => matchMedia('(forced-colors: active)').matches"));
            await Page.EmulateMediaAsync(new() { ForcedColors = ForcedColors.Active });
            Assert.IsFalse(await Page.EvaluateAsync<bool>("() => matchMedia('(forced-colors: none)').matches"));
            Assert.IsTrue(await Page.EvaluateAsync<bool>("() => matchMedia('(forced-colors: active)').matches"));
            await Page.EmulateMediaAsync(new() { ForcedColors = ForcedColors.Null });
            Assert.IsTrue(await Page.EvaluateAsync<bool>("() => matchMedia('(forced-colors: none)').matches"));
        }
    }
}