How to use ShouldWorkWithCombinatorAndSpaces method of Microsoft.Playwright.Tests.SelectorsCssTests class

Best Playwright-dotnet code snippet using Microsoft.Playwright.Tests.SelectorsCssTests.ShouldWorkWithCombinatorAndSpaces

Run Playwright-dotnet automation tests on LambdaTest cloud grid

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

SelectorsCssTests.cs

Source: SelectorsCssTests.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.Linq;
26using System.Threading.Tasks;
27using Microsoft.Playwright.NUnit;
28using NUnit.Framework;
29
30namespace Microsoft.Playwright.Tests
31{
32    public class SelectorsCssTests : PageTestEx
33    {
34        [PlaywrightTest("selectors-css.spec.ts", "should work for open shadow roots")]
35        public async Task ShouldWorkForOpenShadowRoots()
36        {
37            await Page.GotoAsync(Server.Prefix + "/deep-shadow.html");
38            Assert.AreEqual("Hello from root1", await Page.EvalOnSelectorAsync<string>("css=span", "e => e.textContent"));
39            Assert.AreEqual("Hello from root3 #2", await Page.EvalOnSelectorAsync<string>("css =[attr=\"value\\ space\"]", "e => e.textContent"));
40            Assert.AreEqual("Hello from root3 #2", await Page.EvalOnSelectorAsync<string>("css =[attr='value\\ \\space']", "e => e.textContent"));
41            Assert.AreEqual("Hello from root2", await Page.EvalOnSelectorAsync<string>("css=div div span", "e => e.textContent"));
42            Assert.AreEqual("Hello from root3 #2", await Page.EvalOnSelectorAsync<string>("css=div span + span", "e => e.textContent"));
43            Assert.AreEqual("Hello from root3 #2", await Page.EvalOnSelectorAsync<string>("css=span + [attr *=\"value\"]", "e => e.textContent"));
44            Assert.AreEqual("Hello from root3 #2", await Page.EvalOnSelectorAsync<string>("css=[data-testid=\"foo\"] + [attr*=\"value\"]", "e => e.textContent"));
45            Assert.AreEqual("Hello from root2", await Page.EvalOnSelectorAsync<string>("css=#target", "e => e.textContent"));
46            Assert.AreEqual("Hello from root2", await Page.EvalOnSelectorAsync<string>("css=div #target", "e => e.textContent"));
47            Assert.AreEqual("Hello from root2", await Page.EvalOnSelectorAsync<string>("css=div div #target", "e => e.textContent"));
48            Assert.Null(await Page.QuerySelectorAsync("css=div div div #target"));
49            Assert.AreEqual("Hello from root2", await Page.EvalOnSelectorAsync<string>("css=section > div div span", "e => e.textContent"));
50            Assert.AreEqual("Hello from root3 #2", await Page.EvalOnSelectorAsync<string>("css=section > div div span:nth-child(2)", "e => e.textContent"));
51            Assert.Null(await Page.QuerySelectorAsync("css=section div div div div"));
52
53            var root2 = await Page.QuerySelectorAsync("css=div div");
54            Assert.AreEqual("Hello from root2", await root2.EvalOnSelectorAsync<string>("css=#target", "e => e.textContent"));
55            Assert.Null(await root2.QuerySelectorAsync("css:light=#target"));
56            var root2Shadow = (IElementHandle)await root2.EvaluateHandleAsync("r => r.shadowRoot");
57            Assert.AreEqual("Hello from root2", await root2Shadow.EvalOnSelectorAsync<string>("css:light=#target", "e => e.textContent"));
58            var root3 = (await Page.QuerySelectorAllAsync("css=div div")).ElementAt(1);
59            Assert.AreEqual("Hello from root3", await root3.EvalOnSelectorAsync<string>("text=root3", "e => e.textContent"));
60            Assert.AreEqual("Hello from root3 #2", await root3.EvalOnSelectorAsync<string>("css=[attr *=\"value\"]", "e => e.textContent"));
61            Assert.Null(await root3.QuerySelectorAsync("css:light=[attr*=\"value\"]"));
62        }
63
64        [PlaywrightTest("selectors-css.spec.ts", "should work with > combinator and spaces")]
65        public async Task ShouldWorkWithCombinatorAndSpaces()
66        {
67            await Page.SetContentAsync("<div foo=\"bar\" bar=\"baz\"><span></span></div>");
68            Assert.AreEqual("<span></span>", await Page.EvalOnSelectorAsync<string>("div[foo=\"bar\"] > span", "e => e.outerHTML"));
69            Assert.AreEqual("<span></span>", await Page.EvalOnSelectorAsync<string>("div[foo=\"bar\"] > span", "e => e.outerHTML"));
70            Assert.AreEqual("<span></span>", await Page.EvalOnSelectorAsync<string>("div[foo=\"bar\"] > span", "e => e.outerHTML"));
71            Assert.AreEqual("<span></span>", await Page.EvalOnSelectorAsync<string>("div[foo=\"bar\"] > span", "e => e.outerHTML"));
72            Assert.AreEqual("<span></span>", await Page.EvalOnSelectorAsync<string>("div[foo=\"bar\"] > span", "e => e.outerHTML"));
73            Assert.AreEqual("<span></span>", await Page.EvalOnSelectorAsync<string>("div[foo=\"bar\"] > span", "e => e.outerHTML"));
74            Assert.AreEqual("<span></span>", await Page.EvalOnSelectorAsync<string>("div[foo=\"bar\"] > span", "e => e.outerHTML"));
75            Assert.AreEqual("<span></span>", await Page.EvalOnSelectorAsync<string>("div[foo=\"bar\"][bar=\"baz\"] > span", "e => e.outerHTML"));
76            Assert.AreEqual("<span></span>", await Page.EvalOnSelectorAsync<string>("div[foo=\"bar\"][bar=\"baz\"] > span", "e => e.outerHTML"));
77            Assert.AreEqual("<span></span>", await Page.EvalOnSelectorAsync<string>("div[foo=\"bar\"][bar=\"baz\"] > span", "e => e.outerHTML"));
78            Assert.AreEqual("<span></span>", await Page.EvalOnSelectorAsync<string>("div[foo=\"bar\"][bar=\"baz\"] > span", "e => e.outerHTML"));
79            Assert.AreEqual("<span></span>", await Page.EvalOnSelectorAsync<string>("div[foo=\"bar\"][bar=\"baz\"] > span", "e => e.outerHTML"));
80            Assert.AreEqual("<span></span>", await Page.EvalOnSelectorAsync<string>("div[foo=\"bar\"][bar=\"baz\"] > span", "e => e.outerHTML"));
81            Assert.AreEqual("<span></span>", await Page.EvalOnSelectorAsync<string>("div[foo=\"bar\"][bar=\"baz\"] > span", "e => e.outerHTML"));
82        }
83
84        [PlaywrightTest("selectors-css.spec.ts", "should work with comma separated list")]
85        public async Task ShouldWorkWithCommaSeparatedList()
86        {
87            await Page.GotoAsync(Server.Prefix + "/deep-shadow.html");
88            Assert.AreEqual(5, await Page.EvalOnSelectorAllAsync<int>("css=span, section #root1", "els => els.length"));
89            Assert.AreEqual(5, await Page.EvalOnSelectorAllAsync<int>("css=section #root1, div span", "els => els.length"));
90            Assert.AreEqual("root1", await Page.EvalOnSelectorAsync<string>("css=doesnotexist, section #root1", "e => e.id"));
91            Assert.AreEqual(1, await Page.EvalOnSelectorAllAsync<int>("css=doesnotexist, section #root1", "els => els.length"));
92            Assert.AreEqual(4, await Page.EvalOnSelectorAllAsync<int>("css=span,div span", "els => els.length"));
93            Assert.AreEqual(4, await Page.EvalOnSelectorAllAsync<int>("css=span,div span, div div span", "els => els.length"));
94            Assert.AreEqual(2, await Page.EvalOnSelectorAllAsync<int>("css=#target,[attr=\"value\\ space\"]", "els => els.length"));
95            Assert.AreEqual(4, await Page.EvalOnSelectorAllAsync<int>("css=#target,[data-testid=\"foo\"],[attr=\"value\\ space\"]", "els => els.length"));
96            Assert.AreEqual(4, await Page.EvalOnSelectorAllAsync<int>("css=#target,[data-testid=\"foo\"],[attr=\"value\\ space\"],span", "els => els.length"));
97        }
98
99        [PlaywrightTest("selectors-css.spec.ts", "should keep dom order with comma separated list")]
100        public async Task ShouldKeepDomOrderWithCommaSeparatedList()
101        {
102            await Page.SetContentAsync("<section><span><div><x></x><y></y></div></span></section>");
103            Assert.AreEqual("SPAN,DIV", await Page.EvalOnSelectorAllAsync<string>("css=span, div", "els => els.map(e => e.nodeName).join(',')"));
104            Assert.AreEqual("SPAN,DIV", await Page.EvalOnSelectorAllAsync<string>("css=div, span", "els => els.map(e => e.nodeName).join(',')"));
105            Assert.AreEqual("DIV", await Page.EvalOnSelectorAllAsync<string>("css=span div, div", "els => els.map(e => e.nodeName).join(',')"));
106            Assert.AreEqual("SECTION", await Page.EvalOnSelectorAllAsync<string>("*css = section >> css = div, span", "els => els.map(e => e.nodeName).join(',')"));
107            Assert.AreEqual("DIV", await Page.EvalOnSelectorAllAsync<string>("css=section >> *css = div >> css = x, y", "els => els.map(e => e.nodeName).join(',')"));
108            Assert.AreEqual("SPAN,DIV", await Page.EvalOnSelectorAllAsync<string>("css=section >> *css = div, span >> css = x, y", "els => els.map(e => e.nodeName).join(',')"));
109            Assert.AreEqual("SPAN,DIV", await Page.EvalOnSelectorAllAsync<string>("css=section >> *css = div, span >> css = y", "els => els.map(e => e.nodeName).join(',')"));
110        }
111
112        [PlaywrightTest("selectors-css.spec.ts", "should work with comma inside text")]
113        public async Task ShouldWorkWithCommaInsideText()
114        {
115            await Page.SetContentAsync("<span></span><div attr=\"hello,world!\"></div>");
116            Assert.AreEqual("<div attr=\"hello,world!\"></div>", await Page.EvalOnSelectorAsync<string>("css=div[attr=\"hello,world!\"]", "e => e.outerHTML"));
117            Assert.AreEqual("<div attr=\"hello,world!\"></div>", await Page.EvalOnSelectorAsync<string>("css =[attr=\"hello,world!\"]", "e => e.outerHTML"));
118            Assert.AreEqual("<div attr=\"hello,world!\"></div>", await Page.EvalOnSelectorAsync<string>("css=div[attr='hello,world!']", "e => e.outerHTML"));
119            Assert.AreEqual("<div attr=\"hello,world!\"></div>", await Page.EvalOnSelectorAsync<string>("css=[attr='hello,world!']", "e => e.outerHTML"));
120            Assert.AreEqual("<span></span>", await Page.EvalOnSelectorAsync<string>("css=div[attr=\"hello,world!\"], span", "e => e.outerHTML"));
121        }
122
123        [PlaywrightTest("selectors-css.spec.ts", "should work with attribute selectors")]
124        public async Task ShouldWorkWithAttributeSelectors()
125        {
126            await Page.SetContentAsync("<div attr=\"hello world\" attr2=\"hello-''>>foo=bar[]\" attr3=\"] span\"><span></span></div>");
127            await Page.EvaluateAsync("() => window.div = document.querySelector('div')");
128            string[] selectors = new[] {
129                "[attr=\"hello world\"]",
130                "[attr = \"hello world\"]",
131                "[attr ~= world]",
132                "[attr ^=hello ]",
133                "[attr $= world ]",
134                "[attr *= \"llo wor\" ]",
135                "[attr2 |= hello]",
136                "[attr = \"Hello World\" i ]",
137                "[attr *= \"llo WOR\" i]",
138                "[attr $= woRLD i]",
139                "[attr2 = \"hello-''>>foo=bar[]\"]",
140                "[attr2 $=\"foo=bar[]\"]",
141            };
142
143            foreach (string selector in selectors)
144            {
145                Assert.True(await Page.EvalOnSelectorAsync<bool>(selector, "e => e === div"));
146            }
147
148            Assert.True(await Page.EvalOnSelectorAsync<bool>("[attr*=hello] span", "e => e.parentNode === div"));
149            Assert.True(await Page.EvalOnSelectorAsync<bool>("[attr*=hello] >> span", "e => e.parentNode === div"));
150            Assert.True(await Page.EvalOnSelectorAsync<bool>("[attr3=\"] span\"] >> span", "e => e.parentNode === div"));
151        }
152    }
153}
154
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 ShouldWorkWithCombinatorAndSpaces code on LambdaTest Cloud Grid

Execute automation tests with ShouldWorkWithCombinatorAndSpaces 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)