Join the 1-day Testing & QA Summit featuring 15+ Expert Speakers.Register for FREE! Join TestMu Conference

How to use consumeComplexSelector method in Playwright Internal

Best JavaScript code snippet using playwright-internal

grasp.js

Source:grasp.js

...4909    '>': 'child',4910    '~': 'sibling',4911    '+': 'adjacent'4912  };4913  function consumeComplexSelector(tokens){4914    var ops, root, wildcard, result, op, opVal, selector;4915    ops = /^[\s>~+]$/;4916    root = {4917      type: 'root'4918    };4919    wildcard = {4920      type: 'wildcard'4921    };4922    result = peekOp(tokens, ops)4923      ? root4924      : consumeCompoundSelector(tokens);4925    while (peekOp(tokens, ops)) {4926      op = tokens.shift();4927      opVal = op.value;4928      selector = consumeCompoundSelector(tokens);4929      result = {4930        type: operatorMap[opVal],4931        operator: opVal,4932        left: result,4933        right: selector || wildcard4934      };4935    }4936    return result;4937  }4938  function consumeCompoundSelector(tokens){4939    var result, that, selector;4940    result = consumeSelector(tokens);4941    if (that = consumeProps(tokens)) {4942      result = (that.left = result, that);4943    }4944    while (tokens.length > 0) {4945      selector = consumeSelector(tokens);4946      if (selector) {4947        if (result.type !== 'compound') {4948          result = {4949            type: 'compound',4950            selectors: [result]4951          };4952        }4953        result.selectors.push(selector);4954        if (that = consumeProps(tokens)) {4955          result = (that.left = result, that);4956        }4957      } else {4958        break;4959      }4960    }4961    return result || selector;4962  }4963  function mapSimpleSelector(value){4964    return {4965      type: 'identifier',4966      value: aliasMap[value] || value4967    };4968  }4969  function consumeIdentifier(tokens){4970    var value, val;4971    value = tokens.shift().value;4972    if (value in literalMap) {4973      return {4974        type: 'compound',4975        selectors: [4976          {4977            type: 'identifier',4978            value: 'Literal'4979          }, {4980            type: 'attribute',4981            name: 'value',4982            operator: '=',4983            valType: 'primitive',4984            value: {4985              type: 'type',4986              value: literalMap[value]4987            }4988          }4989        ]4990      };4991    } else if (value in matchesMap || value in matchesAliasMap) {4992      return {4993        type: 'matches',4994        selectors: (function(){4995          var i$, ref$, len$, results$ = [];4996          for (i$ = 0, len$ = (ref$ = matchesMap[matchesAliasMap[value] || value]).length; i$ < len$; ++i$) {4997            val = ref$[i$];4998            results$.push({4999              type: 'identifier',5000              value: val5001            });5002          }5003          return results$;5004        }())5005      };5006    } else if (value in complexTypeMap) {5007      switch (complexTypeMap[value]) {5008      case 'ImmediatelyInvokedFunctionExpression':5009        return {5010          type: 'compound',5011          selectors: [5012            {5013              type: 'identifier',5014              value: 'CallExpression'5015            }, {5016              type: 'attribute',5017              name: 'callee',5018              operator: '=',5019              valType: 'complex',5020              value: {5021                type: 'matches',5022                selectors: [5023                  {5024                    type: 'identifier',5025                    value: 'FunctionExpression'5026                  }, {5027                    type: 'compound',5028                    selectors: [5029                      {5030                        type: 'identifier',5031                        value: 'MemberExpression'5032                      }, {5033                        type: 'attribute',5034                        name: 'object',5035                        operator: '=',5036                        valType: 'complex',5037                        value: {5038                          type: 'identifier',5039                          value: 'FunctionExpression'5040                        }5041                      }, {5042                        type: 'attribute',5043                        name: 'property',5044                        operator: '=',5045                        valType: 'complex',5046                        value: {5047                          type: 'matches',5048                          selectors: [5049                            {5050                              type: 'compound',5051                              selectors: [5052                                {5053                                  type: 'identifier',5054                                  value: 'Identifier'5055                                }, {5056                                  type: 'attribute',5057                                  name: 'name',5058                                  operator: '=',5059                                  valType: 'primitive',5060                                  value: {5061                                    type: 'literal',5062                                    value: 'call'5063                                  }5064                                }5065                              ]5066                            }, {5067                              type: 'compound',5068                              selectors: [5069                                {5070                                  type: 'identifier',5071                                  value: 'Identifier'5072                                }, {5073                                  type: 'attribute',5074                                  name: 'name',5075                                  operator: '=',5076                                  valType: 'primitive',5077                                  value: {5078                                    type: 'literal',5079                                    value: 'apply'5080                                  }5081                                }5082                              ]5083                            }5084                          ]5085                        }5086                      }5087                    ]5088                  }5089                ]5090              }5091            }5092          ]5093        };5094      }5095    } else {5096      return mapSimpleSelector(value);5097    }5098  }5099  function consumeSelector(tokens){5100    var selector, token, value;5101    selector = peekType(tokens, 'wildcard')5102      ? tokens.shift()5103      : peekOp(tokens, '::')5104        ? (tokens.shift(), consumeIdentifier(tokens))5105        : peekType(tokens, ['keyword', 'identifier'])5106          ? consumeIdentifier(tokens)5107          : peekType(tokens, ['number', 'string', 'regexp', 'boolean', 'null'])5108            ? consumeLiteral(tokens)5109            : peekOp(tokens, ':')5110              ? consumePseudo(tokens)5111              : peekOp(tokens, /\[&?/)5112                ? consumeAttribute(tokens)5113                : peekOp(tokens, '#')5114                  ? (consumeOp(tokens, '#'), token = tokens.shift(), value = token.value, {5115                    type: 'compound',5116                    selectors: [5117                      {5118                        type: 'identifier',5119                        value: 'Identifier'5120                      }, {5121                        type: 'attribute',5122                        name: 'name',5123                        operator: token.type === 'regexp' ? '=~' : '=',5124                        valType: 'primitive',5125                        value: {5126                          type: 'literal',5127                          value: value5128                        }5129                      }5130                    ]5131                  })5132                  : peekOp(tokens, '(')5133                    ? consumeImplicitMatches(tokens)5134                    : peekOp(tokens, '.') ? {5135                      type: 'root'5136                    } : void 8;5137    if (selector) {5138      if (peekOp(tokens, '!')) {5139        tokens.shift();5140        selector.subject = true;5141      }5142    }5143    return selector;5144  }5145  function consumeProps(tokens){5146    var props, propSubjectIndices, i, ref$;5147    props = [];5148    propSubjectIndices = {};5149    i = 0;5150    while (peekOp(tokens, '.') || peekOp(tokens, ':') && ((ref$ = tokens[1].value) === 'first' || ref$ === 'head' || ref$ === 'tail' || ref$ === 'last' || ref$ === 'initial' || ref$ === 'nth' || ref$ === 'nth-last' || ref$ === 'slice')) {5151      props.push(peekOp(tokens, '.')5152        ? consumeProp(tokens)5153        : consumePseudo(tokens));5154      if (peekOp(tokens, '!')) {5155        consumeOp(tokens, '!');5156        propSubjectIndices[i] = true;5157      }5158      i++;5159    }5160    if (props.length) {5161      return {5162        type: 'prop',5163        props: props,5164        subjects: propSubjectIndices5165      };5166    }5167  }5168  function consumeLiteral(tokens){5169    var token, value;5170    token = tokens.shift();5171    value = token.value;5172    return {5173      type: 'compound',5174      selectors: [5175        {5176          type: 'identifier',5177          value: 'Literal'5178        }, {5179          type: 'attribute',5180          name: 'value',5181          operator: '=',5182          valType: 'primitive',5183          value: {5184            type: 'literal',5185            value: value5186          }5187        }5188      ]5189    };5190  }5191  function consumePseudo(tokens){5192    var op, id, that;5193    op = consumeOp(tokens, ':');5194    id = consumeType(tokens, 'keyword');5195    switch (that = id.value) {5196    case 'root':5197    case 'first':5198    case 'head':5199    case 'tail':5200    case 'last':5201    case 'initial':5202      return {5203        type: that5204      };5205    case 'nth':5206    case 'nth-last':5207    case 'nth-child':5208    case 'nth-last-child':5209      return {5210        type: that,5211        index: consumeArg(tokens)5212      };5213    case 'slice':5214      return {5215        type: that,5216        indicies: consumeArgList(tokens)5217      };5218    case 'first-child':5219      return {5220        type: 'nth-child',5221        index: {5222          type: 'literal',5223          value: 05224        }5225      };5226    case 'last-child':5227      return {5228        type: 'nth-last-child',5229        index: {5230          type: 'literal',5231          value: 05232        }5233      };5234    case 'matches':5235      return consumeImplicitMatches(tokens);5236    case 'not':5237      return {5238        type: that,5239        selectors: consumeComplexArgList(tokens)5240      };5241    default:5242      throw createError('Unexpected keyword:', id, tokens);5243    }5244  }5245  function consumeName(tokens){5246    var name, val;5247    name = '';5248    while (!name || peekOp(tokens, '.')) {5249      if (name) {5250        consumeOp(tokens, '.');5251        name += '.';5252      }5253      val = consumeType(tokens, ['keyword', 'identifier']).value;5254      name += attrMap[val] || val;5255    }5256    return name;5257  }5258  function consumeAttribute(tokens){5259    var op, name, lastName, nextOp, nextToken, val, ref$, valType, value, selector;5260    op = consumeType(tokens, 'operator').value;5261    name = consumeName(tokens);5262    lastName = last(name.split('.'));5263    nextOp = consumeType(tokens, 'operator').value;5264    if (nextOp === ']') {5265      return {5266        type: 'attribute',5267        name: name5268      };5269    } else {5270      nextToken = tokens[0];5271      ref$ = op === '[&' || nextToken.type === 'type' || in$(lastName, primitiveOnlyAttributes)5272        ? ['primitive', consumeValue(tokens)]5273        : in$(lastName, eitherAttributes)5274          ? (val = consumeValue([tokens[0]]), [5275            'either', {5276              type: val.type,5277              value: val.value,5278              sel: consumeSelector(tokens)5279            }5280          ])5281          : ['complex', consumeComplexSelector(tokens)], valType = ref$[0], value = ref$[1];5282      selector = {5283        type: 'attribute',5284        name: name,5285        operator: nextOp,5286        valType: valType,5287        value: value5288      };5289      consumeOp(tokens, ']');5290      return selector;5291    }5292  }5293  function consumeProp(tokens){5294    var token, name;5295    consumeOp(tokens, '.');5296    if (peekType(tokens, ['identifier', 'number', 'null', 'boolean'])) {5297      token = consumeType(tokens, ['identifier', 'number', 'null', 'boolean']);5298      name = token.value;5299      return {5300        type: 'string',5301        value: attrMap[name] || name5302      };5303    } else {5304      return {5305        type: 'wildcard'5306      };5307    }5308  }5309  function consumeComplexArgList(tokens){5310    var result, arg;5311    consumeOp(tokens, '(');5312    result = [];5313    while (tokens.length > 0) {5314      arg = consumeComplexSelector(tokens);5315      if (arg) {5316        result.push(arg);5317      } else {5318        throw createError('Expected selector argument:', tokens[0], tokens);5319      }5320      if (peekOp(tokens, ',')) {5321        consumeOp(tokens, ',');5322      } else {5323        break;5324      }5325    }5326    consumeOp(tokens, ')');5327    return result;5328  }...

cssParser.js

Source:cssParser.js

...86  function consumeArgument() {87    skipWhitespace();88    if (isNumber()) return tokens[pos++].value;89    if (isString()) return tokens[pos++].value;90    return consumeComplexSelector();91  }92  function consumeComplexSelector() {93    skipWhitespace();94    const result = {95      simples: [{96        selector: consumeSimpleSelector(),97        combinator: ''98      }]99    };100    while (true) {101      skipWhitespace();102      if (isClauseCombinator()) {103        result.simples[result.simples.length - 1].combinator = tokens[pos++].value;104        skipWhitespace();105      } else if (isSelectorClauseEnd()) {106        break;...

Using AI Code Generation

1const { consumeComplexSelector } = require('playwright/lib/client/selectorEngine');2const { chromium } = require('playwright');3(async () => {4  const browser = await chromium.launch();5  const context = await browser.newContext();6  const page = await context.newPage();7  const selector = await consumeComplexSelector('text=Playwright');8  await page.waitForSelector(selector);9  await browser.close();10})();11const { consumeComplexSelector } = require('playwright/lib/client/selectorEngine');12const { chromium } = require('playwright');13(async () => {14  const browser = await chromium.launch();15  const context = await browser.newContext();16  const page = await context.newPage();17  await page.waitForSelector(await consumeComplexSelector('text=Playwright'));18  await browser.close();19})();20const { consumeComplexSelector } = require('playwright/lib/client/selectorEngine');21const { chromium } = require('playwright');22(async () => {23  const browser = await chromium.launch();24  const context = await browser.newContext();25  const page = await context.newPage();26  await page.waitForSelector(await consumeComplexSelector('text=Playwright'));27  await browser.close();28})();29const { consumeComplexSelector } = require('playwright/lib/client/selectorEngine');30const { chromium } = require('playwright');31(async () => {32  const browser = await chromium.launch();33  const context = await browser.newContext();34  const page = await context.newPage();35  await page.waitForSelector(await consumeComplexSelector('text=Playwright'));36  await browser.close();37})();38const { consumeComplexSelector } = require('playwright/lib/client/selectorEngine');39const { chromium } = require('playwright');40(async () => {41  const browser = await chromium.launch();42  const context = await browser.newContext();

Using AI Code Generation

1const { consumeComplexSelector } = require('@playwright/test/lib/server/selectorEngine');2const { parseSelector } = require('@playwright/test/lib/server/selectorParser');3const { test } = require('@playwright/test');4test('test', async ({ page }) => {5  await page.setContent(`<div class="foo"><div class="bar"></div></div>`);6  const selector = parseSelector('css=div.foo >> css=div.bar');7  const complexSelector = consumeComplexSelector(selector);8  const handle = await page.$(complexSelector);9  console.log(await handle.getAttribute('class'));10});

Using AI Code Generation

1const { consumeComplexSelector } = require('playwright-core/lib/server/selectors/selectorEngine');2const { Selector } = require('playwright-core/lib/server/selectors/selector');3const { parseSelector } = require('playwright-core/lib/server/selectors/parser');4const { SelectorEvaluator } = require('playwright-core/lib/server/selectors/evaluator');5const selector = parseSelector('text="Add to basket"');6const selectorEvaluator = new SelectorEvaluator();7const result = consumeComplexSelector(selector, selectorEvaluator);8console.log(result);

Using AI Code Generation

1const { consumeComplexSelector } = require('@playwright/test/lib/complexSelector');2const { test } = require('@playwright/test');3test('test', async ({ page }) => {4  const element = await consumeComplexSelector('text=Get started');5  await element.click();6});

Using AI Code Generation

1const { consumeComplexSelector } = require('playwright/lib/server/dom.js');2const { parseSelector } = require('playwright/lib/server/selectorParser.js');3const { toCSSSelector } = require('playwright/lib/server/selectorEngine.js');4const { toJQuerySelector } = require('playwright/lib/server/selectorEngine.js');5const { toTextSelector } = require('playwright/lib/server/selectorEngine.js');6const { toXPath } = require('playwright/lib/server/selectorEngine.js');7const { evaluate } = require('playwright/lib/server/dom.js');8const { evaluateHandle } = require('playwright/lib/server/dom.js');9const { parseSelector } = require('playwright/lib/server/selectorParser.js');10const { toCSSSelector } = require('playwright/lib/server/selectorEngine.js');11const { toJQuerySelector } = require('playwright/lib/server/selectorEngine.js');12const { toTextSelector } = require('playwright/lib/server/selectorEngine.js');13const { toXPath } = require('playwright/lib/server/selectorEngine.js');14const { toError } = require('playwright/lib/server/error.js');15const { toProtocolError } = require('playwright/lib/server/error.js');16const { toErrorString } = require('playwright/lib/server/error.js');17const { toExceptionMessage } = require('playwright/lib/server/error.js');18const { toExceptionDetails } = require('playwright/lib/server/error.js');19const { toConsoleMessageLocation } = require('playwright/lib/server/error.js');

Using AI Code Generation

1const { consumeComplexSelector } = require('@playwright/test/lib/utils/complexSelectorParser');2const { parseSelector } = require('@playwright/test/lib/utils/selectorParser');3const selector = 'css=div >> css=button >> text="Click me"';4const complexSelector = parseSelector(selector);5const parsedSelector = consumeComplexSelector(complexSelector);6console.log(parsedSelector);7{8    {9    },10    {11    },12    {13    }14}15const { consumeComplexSelector } = require('@playwright/test/lib/utils/complexSelectorParser');16const { parseSelector } = require('@playwright/test/lib/utils/selectorParser');17const { Selector } = require('@playwright/test');18const selector = 'css=div >> css=button >> text="Click me"';19const complexSelector = parseSelector(selector);20const parsedSelector = consumeComplexSelector(complexSelector);21console.log(parsedSelector);22const selectorEngine = (selector) => {23  return Selector(selector);24};25const createComplexSelector = (parsedSelector) => {26  let complexSelector = selectorEngine(parsedSelector.parts[0].selector);27  for (let i = 1; i < parsedSelector.parts.length; i++) {

Using AI Code Generation

1const { consumeComplexSelector } = require('playwright/lib/server/selectorParser');2const parsedSelector = consumeComplexSelector(complexSelector);3const { consumeTextSelector } = require('playwright/lib/server/selectorParser');4const textSelector = 'text=Login';5const parsedSelector = consumeTextSelector(textSelector);6const { consumeSelector } = require('playwright/lib/server/selectorParser');7const parsedSelector = consumeSelector(selector);8const { consumeSelectorEngine } = require('playwright/lib/server/selectorParser');9const selectorEngine = 'css=button';10const parsedSelector = consumeSelectorEngine(selectorEngine);11const { parseSelector } = require('playwright/lib/server/selectorParser');12const parsedSelector = parseSelector(selector);13const { parseSelector } = require('playwright/lib/server/selectorParser');14const selector = 'text=Login';15const parsedSelector = parseSelector(selector);16const { parseSelector } = require('playwright/lib/server/selectorParser');17const parsedSelector = parseSelector(selector);

Playwright tutorial

LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.

Chapters:

What is Playwright : Playwright is comparatively new but has gained good popularity. Get to know some history of the Playwright with some interesting facts connected with it.
How To Install Playwright : Learn in detail about what basic configuration and dependencies are required for installing Playwright and run a test. Get a step-by-step direction for installing the Playwright automation framework.
Playwright Futuristic Features: Launched in 2020, Playwright gained huge popularity quickly because of some obliging features such as Playwright Test Generator and Inspector, Playwright Reporter, Playwright auto-waiting mechanism and etc. Read up on those features to master Playwright testing.
What is Component Testing: Component testing in Playwright is a unique feature that allows a tester to test a single component of a web application without integrating them with other elements. Learn how to perform Component testing on the Playwright automation framework.
Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
Functions and Selectors in Playwright: Learn how to launch the Chromium browser with Playwright. Also, gain a better understanding of some important functions like “BrowserContext,” which allows you to run multiple browser sessions, and “newPage” which interacts with a page.
Handling Alerts and Dropdowns in Playwright : Playwright interact with different types of alerts and pop-ups, such as simple, confirmation, and prompt, and different types of dropdowns, such as single selector and multi-selector get your hands-on with handling alerts and dropdown in Playright testing.
Playwright vs Puppeteer: Get to know about the difference between two testing frameworks and how they are different than one another, which browsers they support, and what features they provide.
Run Playwright Tests on LambdaTest: Playwright testing with LambdaTest leverages test performance to the utmost. You can run multiple Playwright tests in Parallel with the LammbdaTest test cloud. Get a step-by-step guide to run your Playwright test on the LambdaTest platform.
Playwright Python Tutorial: Playwright automation framework support all major languages such as Python, JavaScript, TypeScript, .NET and etc. However, there are various advantages to Python end-to-end testing with Playwright because of its versatile utility. Get the hang of Playwright python testing with this chapter.
Playwright End To End Testing Tutorial: Get your hands on with Playwright end-to-end testing and learn to use some exciting features such as TraceViewer, Debugging, Networking, Component testing, Visual testing, and many more.
Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.