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

How to use chooseFirstSelector method in Playwright Internal

Best JavaScript code snippet using playwright-internal

selectors.js

Source:selectors.js

1define(['jquery', 'CMS', 'rz_root/notlive/js/cssHelper'], function ($, CMS, cssHelper) {2    var i18n = {};3    var cachedModulesAndSelectors = null;4    // global css selectors5    var getGlobalCssSelectors = function () {6        var globalSel =  {};7        globalSel.other = [{8            title: i18n['selector.allChildModules'],9            selector: ' .isModule'10        }, {11            title: i18n['selector.allFirstLevelChildModules'],12            // includes selector for modules with wrappers, e.g. rz_box and rz_grid13            selector: ' > .isModule, > :not(.isModule) > .isModule, > :not(.isModule) > :not(.isModule) > .isModule'14        }, {15            title: i18n['selector.headlines'],16            selector: ' h1, h2, h3, h4, h5, h6',17            items: [{18                title: i18n['selector.headline1'],19                selector: ' h1'20            },{21                title: i18n['selector.headline2'],22                selector: ' h2'23            },{24                title: i18n['selector.headline3'],25                selector: ' h3'26            },{27                title: i18n['selector.headline4'],28                selector: ' h4'29            },{30                title: i18n['selector.headline5'],31                selector: ' h5'32            },{33                title: i18n['selector.headline6'],34                selector: ' h6'35            }]36        }];37        return globalSel;38    };39    // ----40    var formValueChangeHandler = function (cfg) {41        var modulesAndSelectors = getModulesAndSelectors();42        // update module list43        if (cfg.key == 'module') {44            // update selector list45            var currentSelectors = modulesAndSelectors.selectorByModule[cfg.newValue];46            updateSelectorList(cfg.unitId, currentSelectors);47            // select first selector48            var firstSelectorInList = currentSelectors[0][0] || '';49            CMS.set(cfg.unitId, 'selectorChooser', firstSelectorInList);50            selectorChooserValueChanged(cfg, modulesAndSelectors);51        } else if (cfg.key == 'selectorChooser') {52            // update name and stuff53            selectorChooserValueChanged(cfg, modulesAndSelectors);54        }55        // update the hidden field56        updateAdditionalSelectorHiddenField(cfg);57    };58    // HELPER methods59    // Nth Child60    var updateNthChildChooser = function (cfg, hide) {61        CMS.updateFormFieldConfig(cfg.unitId, 'nthChildEnable', {locked: !!hide});62    };63    var generateCustomNthTypeOf = function (formValues) {64        var additionalPseudoClass = '' + formValues.customPseudoClass.value;65        switch (formValues.customType.value) {66        case 'single':67            additionalPseudoClass += '(' + formValues.singleStartIndex.value + ')';68            break;69        case 'multiple':70            additionalPseudoClass += '(-n+' + formValues.multipleCount.value + ')';71            break;72        case 'all':73            additionalPseudoClass += '(n+' + formValues.allStartIndex.value + ')';74            break;75        case 'multipleOffset':76            additionalPseudoClass += '(' + formValues.multipleOffsetNth.value + 'n+' + formValues.multipleOffsetStartIndex.value + ')';77            break;78        }79        return additionalPseudoClass;80    };81    var generateNthTypeOf = function (cfg) {82        var formValues = CMS.get(cfg.unitId).formValues;83        var nthChildSelector = '';84        // handle types change hidden field85        switch (formValues.type.value) {86        case 'preset':87            nthChildSelector = '' + formValues.presets.value;88            break;89        case 'custom':90            nthChildSelector = generateCustomNthTypeOf(formValues);91            break;92        }93        return nthChildSelector;94    };95    // Other Stuff96    var selectorChooserValueChanged = function (cfg, modulesAndSelectors) {97        var formValues = CMS.get(cfg.unitId).formValues;98        var currentModule = formValues.module.value;99        var selectorConfig = modulesAndSelectors.selectorConfigByModule[currentModule] || {};100        var selectorChooserValue = formValues.selectorChooser.value;101        // show or hide nthChild102        var showNthChild = (selectorConfig[selectorChooserValue] && selectorConfig[selectorChooserValue].enableNthTypeOf);103        updateNthChildChooser(cfg, !showNthChild);104        // uncheck nthChildEnable105        CMS.set(cfg.unitId, 'nthChildEnable', false);106        // update name107        var selName = selectorConfig[selectorChooserValue] ? selectorConfig[selectorChooserValue].title : '';108        CMS.setInfo(cfg.unitId, 'selector', selName);109    };110    var updateAdditionalSelectorHiddenField = function (cfg) {111        var unit = CMS.get(cfg.unitId);112        var formValues = unit.formValues;113        var curSelector = formValues.selectorChooser.value;114        var nthTypeOf = formValues.nthChildEnable.value ? ':' + generateNthTypeOf(cfg) : '';115        var completeSelector = curSelector + nthTypeOf;116        CMS.set(cfg.unitId, 'additionalSelector', completeSelector);117        // trigger refresh of css (this is required as the CMS.set() will not trigger formValueChange of the hidden field)118        cssHelper.refreshCSS(unit);119    };120    // iterates over the parentUnits until a default unit is found121    var getNextParentDefaultUnit = function (unit) {122        var parentUnit = CMS.get(unit.parentUnitId, false);123        if (CMS.getModule(parentUnit.moduleId).extensionModule) {124            return getNextParentDefaultUnit(parentUnit);125        } else {126            return parentUnit;127        }128    };129    // init a unit of this module130    var initUnit = function (cfg) {131        var unitId = cfg.unitId;132        var modulesAndSelectors = getModulesAndSelectors();133        var moduleList = modulesAndSelectors.allModules;134        var selectorByModule = modulesAndSelectors.selectorByModule;135        updateModuleList(unitId, moduleList);136        var unit = CMS.get(unitId);137        var currentModule = 0;138        if (unit) {139            currentModule = unit.formValues.module.value;140        }141        // init current module with parent std module142        if (currentModule === 0) {143            var parentDefaultUnit = getNextParentDefaultUnit(unit);144            currentModule = parentDefaultUnit.moduleId;145            // current parent module doesn't offer selectors, use the first in the moduleList146            var chooseFirstSelector = true;147            if (!selectorByModule[currentModule]) {148                currentModule = moduleList[0][0];149                chooseFirstSelector = false;150            }151            CMS.set(unitId, 'module', currentModule);152            var currentSelectors = modulesAndSelectors.selectorByModule[currentModule];153            // update the selector list because CMS.set does not fire an formValueChange!154            updateSelectorList(unitId, currentSelectors);155            // select first selector156            if (chooseFirstSelector) {157                var firstSelectorInList = currentSelectors[0][0] || '';158                CMS.set(unitId, 'selectorChooser', firstSelectorInList);159                selectorChooserValueChanged(cfg, modulesAndSelectors);160                // update hidden field161                updateAdditionalSelectorHiddenField(cfg);162            }163        } else {164            // update the selector list because CMS.set does not fire an formValueChange!165            updateSelectorList(unitId, modulesAndSelectors.selectorByModule[currentModule]);166        }167        // update nthChild visibility168        unit = CMS.get(unitId); // update formValues169        var selectorConfigByModule = modulesAndSelectors.selectorConfigByModule[currentModule];170        var curSelConfig = selectorConfigByModule ? selectorConfigByModule[unit.formValues.selectorChooser.value] : {};171        var hideNthChild = !unit.formValues.selectorChooser.value || !(curSelConfig && curSelConfig.enableNthTypeOf);172        updateNthChildChooser(cfg, hideNthChild);173    };174    // fetch all modules and selectors175    var getModulesAndSelectors = function () {176        // fetch data only once!177        if (!cachedModulesAndSelectors) {178            // TODO: move to root module lib?179            var availableSelectors = JSON.parse($('#available_selectors').text()) || {};180            // fix php empty object == empty array181            if (availableSelectors && availableSelectors.length === 0) {182                availableSelectors = {};183            }184            var allSelectors = $.extend({}, availableSelectors, getGlobalCssSelectors());185            // [key, value] pairs for the drop-down/selectlist options186            var allModules = [];187            var selectorByModule = {};188            var selectorConfigByModule = {};189            $.each(allSelectors, function (module, selectors) {190                // only add the default "All X Modules" selector191                if (selectors === true) {192                    selectors = [];193                }194                // use id as initial moduleName195                var moduleName = module;196                // customize module name197                if (module === 'other') {198                    moduleName = i18n['selector.other'];199                } else {200                    // fetch module name, if module is an moduleId201                    var moduleInfo = CMS.getModule(module);202                    if (moduleInfo) {203                        moduleName = moduleInfo.name;204                    }205                    // add All <Module-Name> Modules selector206                    var allXModulesTitle = JSON.parse(JSON.stringify(i18n['selector.allXModules'])) || ['{moduleName}'];207                    Object.keys(allXModulesTitle).forEach(function (key) {208                        allXModulesTitle[key] = allXModulesTitle[key].replace('{moduleName}', moduleName);209                    });210                    var allXModulesSelector = '.' + module; // TODO: legacy modules added &.moduleId211                    selectors.unshift({title: allXModulesTitle, selector: allXModulesSelector});212                }213                // add to list214                allModules.push([module, moduleName]);215                // save selector by module and selector config by selector216                selectorByModule[module] = [];217                selectorConfigByModule[module] = {};218                var addSelectors = function thisFn(module, moduleSelectors, hierarchy) {219                    $.each(moduleSelectors, function (idx, sel) {220                        selectorByModule[module].push([sel.selector, sel.title, hierarchy]);221                        selectorConfigByModule[module][sel.selector] = {222                            enableNthTypeOf: sel.enableNthTypeOf,223                            title: sel.title224                        };225                        // has children?226                        if (sel && sel.items) {227                            thisFn(module, sel.items, hierarchy + 1);228                        }229                    });230                };231                // run addSelectors232                addSelectors(module, selectors, 0);233            });234            cachedModulesAndSelectors = {235                allModules: allModules,236                selectorByModule: selectorByModule,237                selectorConfigByModule: selectorConfigByModule238            };239        }240        return cachedModulesAndSelectors;241    };242    // update the module list243    var updateModuleList = function (unitId, allModules) {244        // sort the module list245        allModules.sort(function (a, b) {246            return (a[1] < b[1] ? -1 : (a[1] > b[1] ? 1 : 0));247        });248        CMS.updateFormFieldConfig(unitId, 'module', {249            options: allModules250        });251    };252    // update selector list253    var updateSelectorList = function (unitId, currentSelectors) {254        CMS.updateFormFieldConfig(unitId, 'selectorChooser', {255            options: currentSelectors || [256                ['', '']257            ]258        });259    };260    return {261        // init on different "events"262        init: function (data) {263            i18n = JSON.parse(data.i18n);264            var eventFilter = {moduleId: data.moduleId};265            // formValueChange266            CMS.on('formValueChange', eventFilter, formValueChangeHandler);267            // init all units of this module after dom ready once268            CMS.getAllUnitIds(data.moduleId).forEach(function (unitId) {269                initUnit({unitId: unitId});270            });271        }272    };...

Using AI Code Generation

1const { chromium } = require('playwright');2(async () => {3  const browser = await chromium.launch();4  const context = await browser.newContext();5  const page = await context.newPage();6  const element = await page._client.send('DOM.querySelector', {7  });8  console.log(element);9  await browser.close();10})();11const { chromium } = require('playwright');12(async () => {13  const browser = await chromium.launch();14  const context = await browser.newContext();15  const page = await context.newPage();16  const element = await page._client.send('DOM.querySelectorAll', {17  });18  console.log(element);19  await browser.close();20})();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  const element = await page._client.send('DOM.querySelector', {27  });28  console.log(element);29  await browser.close();30})();31const { chromium } = require('playwright');32(async () => {33  const browser = await chromium.launch();34  const context = await browser.newContext();35  const page = await context.newPage();36  const element = await page._client.send('DOM.querySelectorAll', {37  });38  console.log(element);39  await browser.close();40})();41const { chromium } = require('playwright');42(async () => {43  const browser = await chromium.launch();44  const context = await browser.newContext();45  const page = await context.newPage();

Using AI Code Generation

1const { chromium } = require('playwright');2(async () => {3  const browser = await chromium.launch();4  const context = await browser.newContext();5  const page = await context.newPage();6  const element = await page.$(await page.chooseFirstSelector(['div', 'span']));7  console.log(element);8  await browser.close();9})();10const { chromium } = require('playwright');11(async () => {12  const browser = await chromium.launch();13  const context = await browser.newContext();14  const page = await context.newPage();15  const element = await page.$(await page.chooseFirstSelector(['div', 'span']));16  console.log(element);17  await browser.close();18})();

Using AI Code Generation

1const playwright = require('playwright');2(async () => {3  for (const browserType of BROWSER) {4    const browser = await playwright[browserType].launch();5    const context = await browser.newContext();6    const page = await context.newPage();7    const element = await page._delegate.chooseFirstSelector('text=Docs');8    console.log(element);9    await browser.close();10  }11})();12ElementHandle {13  _context: BrowserContext {14    _options: {15    },16    _browser: Browser {17      _browserType: BrowserType {18      },

Using AI Code Generation

1const playwright = require('playwright');2(async () => {3  for (const browserType of BROWSER) {4    const browser = await browserType.launch();5    const context = await browser.newContext();6    const page = await context.newPage();7    await page.screenshot({ path: `example-${browserType.name()}.png` });8    await browser.close();9  }10})();11at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)12at Function.Module._load (internal/modules/cjs/loader.js:725:27)13at Module.require (internal/modules/cjs/loader.js:952:19)14at require (internal/modules/cjs/helpers.js:88:18)15at Object. (C:\Users\user\Desktop\test.js:1:19)16at Module._compile (internal/modules/cjs/loader.js:1063:30)17at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)18at Module.load (internal/modules/cjs/loader.js:928:32)19at Function.Module._load (internal/modules/cjs/loader.js:769:14)20at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)21const playwright = require('playwright');22(async () => {23  for (const browserType of BROWSER) {24    const browser = await browserType.launch();25    const context = await browser.newContext();26    const page = await context.newPage();

Using AI Code Generation

1const {chromium, selectors} = require('playwright');2(async () => {3  const browser = await chromium.launch();4  const context = await browser.newContext();5  const page = await context.newPage();6  await page.click(selectors.chooseFirstSelector('a'));7  await browser.close();8})();

Using AI Code Generation

1const { selectFirst } = require('playwright/lib/selectors');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 firstElement = await selectFirst('text=Get started', page);8  console.log(firstElement);9  await browser.close();10})();11const { selectAll } = require('playwright/lib/selectors');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  const allElements = await selectAll('text=Get started', page);18  console.log(allElements);19  await browser.close();20})();21const { selectAll } = require('playwright/lib/selectors');22const { chromium } = require('playwright');23(async () => {24  const browser = await chromium.launch();25  const context = await browser.newContext();26  const page = await context.newPage();27  const allElements = await selectAll('text=Get started', page);28  console.log(allElements);29  await browser.close();30})();31const { selectAll } = require('playwright/lib/selectors');32const { chromium } = require('playwright');33(async () => {34  const browser = await chromium.launch();35  const context = await browser.newContext();36  const page = await context.newPage();37  const allElements = await selectAll('text=Get started', page);38  console.log(allElements);39  await browser.close();40})();41const { selectAll } = require('playwright/lib/selectors');42const { chromium } = require('playwright');43(async () => {44  const browser = await chromium.launch();45  const context = await browser.newContext();46  const page = await context.newPage();

Using AI Code Generation

1const {chooseFirstSelector} = require('@playwright/test/lib/server/selectors');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 chooseFirstSelector(page, 'input[name="q"]');8    console.log(selector);9    await browser.close();10})();11const {chooseFirstSelector} = require('@playwright/test/lib/server/selectors');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    const selector = await chooseFirstSelector(page, 'input[name="q"]');18    console.log(selector);19    await browser.close();20})();21const {chooseFirstSelector} = require('@playwright/test/lib/server/selectors');22const {chromium} = require('playwright');23(async () => {24    const browser = await chromium.launch();25    const context = await browser.newContext();26    const page = await context.newPage();27    const selector = await chooseFirstSelector(page, 'input[name="q"]');28    console.log(selector);29    await browser.close();30})();31const {chooseFirstSelector} = require('@playwright/test/lib/server/selectors');32const {chromium} = require('playwright');33(async () => {34    const browser = await chromium.launch();35    const context = await browser.newContext();36    const page = await context.newPage();37    const selector = await chooseFirstSelector(page, 'input[name="q"]');38    console.log(selector);39    await browser.close();40})();41const {chooseFirstSelector} = require('@playwright/test/lib/server/selectors');42const {chromium} = require('playwright');43(async () => {

Using AI Code Generation

1const { chooseFirstSelector } = require('@playwright/test');2const { test, expect } = require('@playwright/test');3test('should be able to use Playwright Internal API', async ({ page }) => {4  const searchBox = await chooseFirstSelector(page, 'input[type="search"]');5  await searchBox.type('playwright');6  const searchResults = await page.$$('ul.search-results > li');7  expect(searchResults.length).toBeGreaterThan(0);8});

Using AI Code Generation

1const { chromium } = require('playwright');2(async () => {3  const browser = await chromium.launch();4  const context = await browser.newContext();5  const page = await context.newPage();6  const elementHandle = await page.$('body');7  console.log(elementHandle);8  await browser.close();9})();10const { chromium } = require('playwright');11(async () => {12  const browser = await chromium.launch();13  const context = await browser.newContext();14  const page = await context.newPage();15  const elementHandle = await page.$('body');16  console.log(elementHandle);17  await browser.close();18})();19const { chromium } = require('playwright');20(async () => {21  const browser = await chromium.launch();22  const context = await browser.newContext();23  const page = await context.newPage();24  const elementHandle = await page.$('body');25  console.log(elementHandle);26  await browser.close();27})();28const { chromium } = require('playwright');29(async () => {30  const browser = await chromium.launch();31  const context = await browser.newContext();32  const page = await context.newPage();33  const elementHandle = await page.$('body');34  console.log(elementHandle);35  await browser.close();36})();

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.