feat(selectors): optimize old->new conversion for css (#4672)

src/server/common/selectorParser.ts

@@ -63,21 +63,30 @@ export function parseSelector(selector: string, customNames: Set<string>): Parse
         wrapInLight = true;
         name = name.substring(0, name.indexOf(':'));
       }
-      let simple: CSSSimpleSelector;
       if (name === 'css') {
         const parsed = parseCSS(part.body, customNames);
         parsed.names.forEach(name => names.add(name));
-        simple = callWith('is', parsed.selector);
+        if (wrapInLight || parsed.selector.length > 1) {
+          let simple = callWith('is', parsed.selector);
+          if (wrapInLight)
+            simple = callWith('light', [simpleToComplex(simple)]);
+          result.simples.push({ selector: simple, combinator: '' });
+        } else {
+          result.simples.push(...parsed.selector[0].simples);
+        }
       } else if (name === 'text') {
-        simple = textSelectorToSimple(part.body);
+        let simple = textSelectorToSimple(part.body);
         if (result.simples.length)
           result.simples[result.simples.length - 1].combinator = '>=';
+        if (wrapInLight)
+          simple = callWith('light', [simpleToComplex(simple)]);
+        result.simples.push({ selector: simple, combinator: '' });
       } else {
-        simple = callWith(name, [part.body]);
+        let simple = callWith(name, [part.body]);
+        if (wrapInLight)
+          simple = callWith('light', [simpleToComplex(simple)]);
+        result.simples.push({ selector: simple, combinator: '' });
       }
-      if (wrapInLight)
-        simple = callWith('light', [simpleToComplex(simple)]);
-      result.simples.push({ selector: simple, combinator: '' });
     }
     return result;
   };

test/selectors-css.spec.ts

@@ -146,6 +146,20 @@ it('should keep dom order with comma separated list', async ({page}) => {
   expect(await page.$$eval(`css=section >> *css=div,span >> css=y`, els => els.map(e => e.nodeName).join(','))).toBe('SPAN,DIV');
 });
 
+it('should work with comma separated list in various positions', async ({page}) => {
+  await page.setContent(`<section><span><div><x></x><y></y></div></span></section>`);
+  expect(await page.$$eval(`css=span,div >> css=x,y`, els => els.map(e => e.nodeName).join(','))).toBe('X,Y');
+  expect(await page.$$eval(`css=span,div >> css=x`, els => els.map(e => e.nodeName).join(','))).toBe('X');
+  expect(await page.$$eval(`css=div >> css=x,y`, els => els.map(e => e.nodeName).join(','))).toBe('X,Y');
+  expect(await page.$$eval(`css=div >> css=x`, els => els.map(e => e.nodeName).join(','))).toBe('X');
+
+  expect(await page.$$eval(`css=section >> css=div >> css=x`, els => els.map(e => e.nodeName).join(','))).toBe('X');
+  expect(await page.$$eval(`css=section >> css=span >> css=div >> css=y`, els => els.map(e => e.nodeName).join(','))).toBe('Y');
+  expect(await page.$$eval(`css=section >> css=div >> css=x,y`, els => els.map(e => e.nodeName).join(','))).toBe('X,Y');
+  expect(await page.$$eval(`css=section >> css=div,span >> css=x,y`, els => els.map(e => e.nodeName).join(','))).toBe('X,Y');
+  expect(await page.$$eval(`css=section >> css=span >> css=x,y`, els => els.map(e => e.nodeName).join(','))).toBe('X,Y');
+});
+
 it('should work with comma inside text', async ({page}) => {
   await page.setContent(`<span></span><div attr="hello,world!"></div>`);
   expect(await page.$eval(`css=div[attr="hello,world!"]`, e => e.outerHTML)).toBe('<div attr="hello,world!"></div>');