How to use ShouldWorkWhenInlineBoxChildIsOutsideOfViewport method of Microsoft.Playwright.Tests.ElementHandleBoundingBoxTests class

Best Playwright-dotnet code snippet using Microsoft.Playwright.Tests.ElementHandleBoundingBoxTests.ShouldWorkWhenInlineBoxChildIsOutsideOfViewport

Run Playwright-dotnet automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

ElementHandleBoundingBoxTests.cs

Source: ElementHandleBoundingBoxTests.cs Github

copy
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;
26using System.Linq;
27using System.Threading.Tasks;
28using Microsoft.Playwright.NUnit;
29using NUnit.Framework;
30
31namespace Microsoft.Playwright.Tests
32{
33    public class ElementHandleBoundingBoxTests : PageTestEx
34    {
35        [PlaywrightTest("elementhandle-bounding-box.spec.ts", "should work")]
36        public async Task ShouldWork()
37        {
38            await Page.SetViewportSizeAsync(500, 500);
39            await Page.GotoAsync(Server.Prefix + "/grid.html");
40            var elementHandle = await Page.QuerySelectorAsync(".box:nth-of-type(13)");
41            var box = await elementHandle.BoundingBoxAsync();
42            AssertEqual(100, 50, 50, 50, box);
43        }
44
45        [PlaywrightTest("elementhandle-bounding-box.spec.ts", "should handle nested frames")]
46        public async Task ShouldHandleNestedFrames()
47        {
48            await Page.SetViewportSizeAsync(500, 500);
49            await Page.GotoAsync(Server.Prefix + "/frames/nested-frames.html");
50            var nestedFrame = Page.Frames.First(frame => frame.Name == "dos");
51            var elementHandle = await nestedFrame.QuerySelectorAsync("div");
52            var box = await elementHandle.BoundingBoxAsync();
53            AssertEqual(24, 224, 268, 18, box);
54        }
55
56        [PlaywrightTest("elementhandle-bounding-box.spec.ts", "should return null for invisible elements")]
57        public async Task ShouldReturnNullForInvisibleElements()
58        {
59            await Page.SetContentAsync("<div style=\"display:none\">hi</div>");
60            var element = await Page.QuerySelectorAsync("div");
61            Assert.Null(await element.BoundingBoxAsync());
62        }
63
64        [PlaywrightTest("elementhandle-bounding-box.spec.ts", "should force a layout")]
65        public async Task ShouldForceALayout()
66        {
67            await Page.SetViewportSizeAsync(500, 500);
68            await Page.SetContentAsync("<div style=\"width: 100px; height: 100px\">hello</div>");
69            var elementHandle = await Page.QuerySelectorAsync("div");
70            await Page.EvaluateAsync("element => element.style.height = '200px'", elementHandle);
71            var box = await elementHandle.BoundingBoxAsync();
72            AssertEqual(8, 8, 100, 200, box);
73        }
74
75        [PlaywrightTest("elementhandle-bounding-box.spec.ts", "should work with SVG nodes")]
76        public async Task ShouldWorkWithSVGNodes()
77        {
78            await Page.SetContentAsync(@"
79                  <svg xmlns=""http://www.w3.org/2000/svg"" width=""500"" height=""500"">
80                    <rect id=""theRect"" x=""30"" y=""50"" width=""200"" height=""300""></rect>
81                  </svg>");
82            var element = await Page.QuerySelectorAsync("#therect");
83            var pwBoundingBox = await element.BoundingBoxAsync();
84            var webBoundingBox = await Page.EvaluateAsync<ElementHandleBoundingBoxResult>(@"e => {
85                    const rect = e.getBoundingClientRect();
86                    return { x: rect.x, y: rect.y, width: rect.width, height: rect.height};
87                }", element);
88            AssertEqual(webBoundingBox, pwBoundingBox);
89        }
90
91        [PlaywrightTest("elementhandle-bounding-box.spec.ts", "should work with page scale")]
92        [Skip(SkipAttribute.Targets.Firefox)]
93        public async Task ShouldWorkWithPageScale()
94        {
95            var context = await Browser.NewContextAsync(new()
96            {
97                ViewportSize = new()
98                {
99                    Height = 400,
100                    Width = 400,
101                },
102                IsMobile = true,
103            });
104            var page = await context.NewPageAsync();
105            await page.GotoAsync(Server.Prefix + "/input/button.html");
106            var button = await page.QuerySelectorAsync("button");
107
108            await button.EvaluateAsync(@"button => {
109                document.body.style.margin = '0';
110                  button.style.borderWidth = '0';
111                  button.style.width = '200px';
112                  button.style.height = '20px';
113                  button.style.marginLeft = '17px';
114                  button.style.marginTop = '23px';
115            }");
116
117            var box = await button.BoundingBoxAsync();
118            Assert.AreEqual(17 * 100, Math.Round(box.X * 100));
119            Assert.AreEqual(23 * 100, Math.Round(box.Y * 100));
120            Assert.AreEqual(200 * 100, Math.Round(box.Width * 100));
121            Assert.AreEqual(20 * 100, Math.Round(box.Height * 100));
122        }
123
124        [PlaywrightTest("elementhandle-bounding-box.spec.ts", "should work when inline box child is outside of viewport")]
125        public async Task ShouldWorkWhenInlineBoxChildIsOutsideOfViewport()
126        {
127            await Page.SetContentAsync(@"
128                <style>
129                i {
130                    position: absolute;
131                    top: -1000px;
132                }
133                body {
134                    margin: 0;
135                    font-size: 12px;
136                }
137                </style>
138                <span><i>woof</i><b>doggo</b></span>");
139
140            var handle = await Page.QuerySelectorAsync("span");
141            var box = await handle.BoundingBoxAsync();
142            var webBoundingBox = await Page.EvaluateAsync<ElementHandleBoundingBoxResult>(@"e => {
143                    const rect = e.getBoundingClientRect();
144                    return { x: rect.x, y: rect.y, width: rect.width, height: rect.height};
145                }", handle);
146
147            Assert.AreEqual(Math.Round(webBoundingBox.X * 100), Math.Round(box.X * 100));
148            Assert.AreEqual(Math.Round(webBoundingBox.Y * 100), Math.Round(box.Y * 100));
149            Assert.AreEqual(Math.Round(webBoundingBox.Width * 100), Math.Round(box.Width * 100));
150            Assert.AreEqual(Math.Round(webBoundingBox.Height * 100), Math.Round(box.Height * 100));
151        }
152
153        private static void AssertEqual(float X, float Y, float Width, float Height, ElementHandleBoundingBoxResult box)
154        {
155            Assert.AreEqual(X, box.X);
156            Assert.AreEqual(Y, box.Y);
157            Assert.AreEqual(Width, box.Width);
158            Assert.AreEqual(Height, box.Height);
159        }
160
161        private static void AssertEqual(ElementHandleBoundingBoxResult boxA, ElementHandleBoundingBoxResult boxB)
162        {
163            Assert.AreEqual(boxA.X, boxB.X);
164            Assert.AreEqual(boxA.Y, boxB.Y);
165            Assert.AreEqual(boxA.Width, boxB.Width);
166            Assert.AreEqual(boxA.Height, boxB.Height);
167        }
168    }
169}
170
Full Screen

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.

Try LambdaTest

Trigger ShouldWorkWhenInlineBoxChildIsOutsideOfViewport code on LambdaTest Cloud Grid

Execute automation tests with ShouldWorkWhenInlineBoxChildIsOutsideOfViewport on a cloud-based Grid of 3000+ real browsers and operating systems for both web and mobile applications.

Test now for Free
LambdaTestX

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
Sarah

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)