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

How to use createTextMatcher method in Playwright Internal

Best JavaScript code snippet using playwright-internal

drupalmentionui.js

Source:drupalmentionui.js

...110     * @returns {module:mention/textwatcher~TextWatcher}111     */112    _setupTextWatcherForFeed( marker, minimumCharacters, validMentionCharacters ) {113        const editor = this.editor;114        const watcher = new TextWatcher( editor, createTestCallback( marker, minimumCharacters, validMentionCharacters ), createTextMatcher( marker, validMentionCharacters ) );115        watcher.on( 'matched', ( evt, data ) => {116            const matched = data.matched;117            const selection = editor.model.document.selection;118            const focus = selection.focus;119            // The text watcher listens only to changed range in selection - so the selection attributes are not yet available120            // and you cannot use selection.hasAttribute( 'mention' ) just yet.121            // See https://github.com/ckeditor/ckeditor5-engine/issues/1723.122            const hasMention = focus.textNode && focus.textNode.hasAttribute( 'mention' );123            const nodeBefore = focus.nodeBefore;124            if ( hasMention || nodeBefore && nodeBefore.is( 'text' ) && nodeBefore.hasAttribute( 'mention' ) ) {125                return;126            }127            const { feedText, marker } = matched;128            const matchedTextLength = marker.length + feedText.length;129            // Create a marker range.130            const start = focus.getShiftedBy( -matchedTextLength );131            const end = focus.getShiftedBy( -feedText.length );132            const markerRange = editor.model.createRange( start, end );133            let mentionMarker;134            if ( editor.model.markers.has( 'mention' ) ) {135                mentionMarker = editor.model.markers.get( 'mention' );136            } else {137                mentionMarker = editor.model.change( writer => writer.addMarker( 'mention', {138                    range: markerRange,139                    usingOperation: false,140                    affectsData: false141                } ) );142            }143            this._getFeed( marker, feedText )144                .then( feed => {145                    this._items.clear();146                    for ( const feedItem of feed ) {147                        const item = typeof feedItem != 'object' ? { id: feedItem, text: feedItem } : feedItem;148                        this._items.add( { item, marker } );149                    }150                    if ( this._items.length ) {151                        this._showUI( mentionMarker );152                    } else {153                        this._hideUIAndRemoveMarker();154                    }155                } );156        } );157        watcher.on( 'unmatched', () => {158            this._hideUIAndRemoveMarker();159        } );160        return watcher;161    }162    /**163     * Creates the {@link #_mentionsView}.164     *165     * @private166     * @returns {module:mention/ui/mentionsview~MentionsView}167     */168    _createMentionView() {169        const locale = this.editor.locale;170        const mentionsView = new MentionsView( locale );171        this._items = new Collection();172        mentionsView.items.bindTo( this._items ).using( data => {173            const { item, marker } = data;174            const listItemView = new MentionListItemView( locale );175            const view = this._renderItem( item, marker );176            view.delegate( 'execute' ).to( listItemView );177            listItemView.children.add( view );178            listItemView.item = item;179            listItemView.marker = marker;180            listItemView.on( 'execute', () => {181                mentionsView.fire( 'execute', {182                    item,183                    marker184                } );185            } );186            return listItemView;187        } );188        mentionsView.on( 'execute', ( evt, data ) => {189            const editor = this.editor;190            const model = editor.model;191            const item = data.item;192            const marker = data.marker;193            const watcher = this._getWatcher( marker );194            const validMentionCharacters = this._getValidMentionCharacters( marker );195            const text = watcher.last;196            const textMatcher = createTextMatcher( marker, validMentionCharacters );197            const matched = textMatcher( text );198            const matchedTextLength = matched.marker.length + matched.feedText.length;199            // Create a range on matched text.200            const end = model.createPositionAt( model.document.selection.focus );201            const start = end.getShiftedBy( -matchedTextLength );202            const range = model.createRange( start, end );203            this._hideUIAndRemoveMarker();204            editor.execute( 'mention', {205                mention: item,206                text: item.text,207                marker,208                range209            } );210            editor.editing.view.focus();211        } );212        return mentionsView;213    }214}215// Creates a RegExp pattern for the marker.216//217// Function has to be exported to achieve 100% code coverage.218//219// @param {String} marker220// @param {Number} minimumCharacters221// @returns {RegExp}222export function createRegExp( marker, minimumCharacters, validMentionCharacters ) {223    const numberOfCharacters = minimumCharacters == 0 ? '*' : `{${ minimumCharacters },}`;224    const patternBase = featureDetection.isPunctuationGroupSupported ? '\\p{Ps}\\p{Pi}"\'' : '\\(\\[{"\'';225    return new RegExp( buildPattern( patternBase, marker, numberOfCharacters, validMentionCharacters ), 'u' );226}227// Helper to build a RegExp pattern string for the marker.228//229// @param {String} whitelistedCharacters230// @param {String} marker231// @param {Number} minimumCharacters232// @returns {String}233function buildPattern( whitelistedCharacters, marker, numberOfCharacters, validMentionCharacters ) {234    validMentionCharacters = validMentionCharacters || VALID_MENTION_DEFAULT_CHARACTERS;235    return `(^|[ ${ whitelistedCharacters }])([${ marker }])([${ validMentionCharacters }]${ numberOfCharacters }?)$`;236}237// Creates a test callback for the marker to be used in the text watcher instance.238//239// @param {String} marker240// @param {Number} minimumCharacters241// @returns {Function}242function createTestCallback( marker, minimumCharacters, validMentionCharacters ) {243    const regExp = createRegExp( marker, minimumCharacters, validMentionCharacters );244    return text => regExp.test( text );245}246// Creates a text matcher from the marker.247//248// @param {String} marker249// @returns {Function}250function createTextMatcher( marker, validMentionCharacters ) {251    const regExp = createRegExp( marker, 0, validMentionCharacters );252    return text => {253        const match = text.match( regExp );254        const marker = match[ 2 ];255        const feedText = match[ 3 ];256        return { marker, feedText };257    };258}259// The default feed callback.260function createFeedCallback( feedItems ) {261    return feedText => {262        const filteredItems = feedItems263        // Make the default mention feed case-insensitive.264            .filter( item => {...

matchers.js

Source:matchers.js

1const { platform, isPlatform, isRegex } = require("../utils");2const { NotImplementedError, NotSupportedError } = require("./errors");3const Matcher = require("./Matcher");4const getNativeRegex = require("./helpers/getNativeRegex");5const createIdMatcher = (id) => {6  return new Matcher({7    type: "id",8    value: id,9    resolve: () => {10      if (isPlatform("Web")) {11        throw new NotImplementedError();12      }13      if (isRegex(id)) {14        const regex = getNativeRegex(id);15        return platform.select({16          ios: () => ({17            using: "-ios predicate string",18            value: `name MATCHES${regex.modifiers} '${regex.pattern}'`19          }),20          android: () => ({21            using: "-android uiautomator",22            value: `new UiSelector().resourceIdMatches("${regex.modifiers}${regex.pattern}")`23          })24        });25      }26      return {27        using: "id",28        value: id29      };30    }31  });32};33const createLabelMatcher = (label) => {34  return new Matcher({35    type: "label",36    value: label,37    resolve: () => {38      if (isPlatform("Web")) {39        throw new NotImplementedError();40      }41      if (isRegex(label)) {42        const regex = getNativeRegex(label);43        return platform.select({44          ios: () => ({45            using: "-ios predicate string",46            value: `name MATCHES${regex.modifiers} '${regex.pattern}'`47          }),48          android: () => ({49            using: "-android uiautomator",50            value: `new UiSelector().descriptionMatches("${regex.modifiers}${regex.pattern}")`51          })52        });53      }54      return {55        using: "accessibility id",56        value: label57      };58    }59  });60};61const createTextMatcher = (text) => {62  return new Matcher({63    type: "text",64    value: text,65    resolve: () => {66      if (isPlatform("Web")) {67        throw new NotImplementedError();68      }69      if (isRegex(text)) {70        const regex = getNativeRegex(text);71        return platform.select({72          ios: () => ({73            using: "-ios predicate string",74            value: `label MATCHES${regex.modifiers} '${regex.pattern}'`75          }),76          android: () => ({77            using: "-android uiautomator",78            value: `new UiSelector().textMatches("${regex.modifiers}${regex.pattern}")`79          })80        });81      }82      return platform.select({83        ios: () => ({84          using: "-ios predicate string",85          value: `label = '${text}'`86        }),87        android: () => ({88          using: "-android uiautomator",89          value: `new UiSelector().text("${text}")`90        })91      });92    }93  });94};95// TODO: Investigate Web context support.96const createTypeMatcher = (type) => {97  return new Matcher({98    type: "type",99    value: type,100    resolve: () => ({101      using: "class name",102      value: type103    })104  });105};106const createIosPredicateMatcher = (predicate) => {107  return new Matcher({108    type: "ios predicate",109    value: predicate,110    resolve: () => {111      if (isPlatform("iOS")) {112        return {113          using: "-ios predicate string",114          value: predicate115        };116      }117      throw new NotSupportedError();118    }119  });120};121const createUiAutomatorMatcher = (selector) => {122  return new Matcher({123    type: "ui automator",124    value: selector,125    resolve: () => {126      if (isPlatform("Android")) {127        return {128          using: "-android uiautomator",129          value: selector130        };131      }132      throw new NotSupportedError();133    }134  });135};136const createCssMatcher = (css) => {137  return new Matcher({138    type: "css",139    value: css,140    resolve: () => {141      if (isPlatform("Web")) {142        return {143          using: "css selector",144          value: css145        };146      }147      throw new NotImplementedError();148    }149  });150};151module.exports = {152  id: createIdMatcher,153  label: createLabelMatcher,154  text: createTextMatcher,155  type: createTypeMatcher,156  iosPredicate: createIosPredicateMatcher,157  uiAutomator: createUiAutomatorMatcher,158  css: createCssMatcher...

Using AI Code Generation

1const { createTextMatcher } = require('@playwright/test').utils;2const { chromium } = require('playwright');3(async () => {4  const browser = await chromium.launch();5  const page = await browser.newPage();6  await page.click(createTextMatcher('Get Started'));7  await browser.close();8})();

Using AI Code Generation

1const { createTextMatcher } = require('@playwright/test/lib/matchers/matchers');2const { test } = require('@playwright/test');3test('My test', async ({ page }) => {4  const text = await page.textContent('h1');5  expect(text).toEqual(createTextMatcher('Hello World'));6});7{8  "compilerOptions": {9    "paths": {10    }11  }12}13const { test } = require('@playwright/test');14test('My test', async ({ page }) => {15  const text = await page.textContent('h1');16  expect(text).toEqual(expect.stringContaining('Hello World'));17});18{19  "compilerOptions": {20    "paths": {21    }22  }23}

Using AI Code Generation

1const { createTextMatcher } = require('playwright/lib/internal/utils');2const { test } = require('@playwright/test');3test('test', async ({ page }) => {4  const textMatcher = createTextMatcher('Get started');5  const element = await page.waitForSelector((e) => e.textContent.match(textMatcher));6  console.log(await element.textContent());7});8const { createTextMatcher } = require('playwright/lib/internal/utils');9const { test } = require('@playwright/test');10test('test', async ({ page }) => {11  const textMatcher = createTextMatcher('Get started');12  const element = await page.waitForSelector((e) => e.textContent.match(textMatcher));13  console.log(await element.textContent());14});15const { createTextMatcher } = require('playwright/lib/internal/utils');16const { test } = require('@playwright/test');17test('test', async ({ page }) => {18  const textMatcher = createTextMatcher('Get started');19  const element = await page.waitForSelector((e) => e.textContent.match(textMatcher));20  console.log(await element.textContent());21});22import { createTextMatcher } from 'playwright/lib/internal/utils';23import { test } from '@playwright/test';24test('test', async ({ page }) => {25  const textMatcher = createTextMatcher('Get started');26  const element = await page.waitForSelector((e) => e.textContent.match(textMatcher));27  console.log(await element.textContent());28});29import { createTextMatcher } from 'playwright/lib/internal/utils';30import { test } from '@playwright/test';31test('test', async ({ page }) => {32  const textMatcher = createTextMatcher('Get started');33  const element = await page.waitForSelector((e) => e.textContent.match(textMatcher));

Using AI Code Generation

1const { createTextMatcher } = require('playwright/lib/utils/selectorParser');2const matcher = createTextMatcher('some text');3const { createTextMatcher } = require('playwright/lib/utils/selectorParser');4const matcher = createTextMatcher('some text');5const { createTextMatcher } = require('playwright/lib/utils/selectorParser');6const matcher = createTextMatcher('some text');7const { createTextMatcher } = require('playwright/lib/utils/selectorParser');8const matcher = createTextMatcher('some text');9const { createTextMatcher } = require('playwright/lib/utils/selectorParser');10const matcher = createTextMatcher('some text');11const { createTextMatcher } = require('playwright/lib/utils/selectorParser');12const matcher = createTextMatcher('some text');13const { createTextMatcher } = require('playwright/lib/utils/selectorParser');14const matcher = createTextMatcher('some text');15const { createTextMatcher } = require('playwright/lib/utils/selectorParser');16const matcher = createTextMatcher('some text');17const { createTextMatcher } = require('playwright/lib/utils/selectorParser');18const matcher = createTextMatcher('some text');19const { createTextMatcher } = require('playwright/lib/utils/selectorParser');20const matcher = createTextMatcher('some text');21const { createTextMatcher } = require('playwright/lib/utils/selectorParser');22const matcher = createTextMatcher('some text');23const { createTextMatcher } = require('playwright/lib/utils/selectorParser');24const matcher = createTextMatcher('some text');25const { createTextMatcher

Using AI Code Generation

1const { createTextMatcher } = require('playwright/lib/server/dom.js');2const textMatcher = createTextMatcher('test');3const { createTextMatcher } = require('playwright/lib/server/dom.js');4const textMatcher = createTextMatcher('test');5const { createTextMatcher } = require('playwright/lib/server/dom.js');6const textMatcher = createTextMatcher('test');

Using AI Code Generation

1import { createTextMatcher } from "playwright/lib/internal/selectorEngine";2const textMatcher = createTextMatcher({ content: "Click me", strict: true });3const elements = document.querySelectorAll("button");4for (const element of elements) {5  if (textMatcher(element)) {6    console.log("Found element with text Click me");7  }8}9import { createTextMatcher } from "playwright/lib/internal/selectorEngine";10const textMatcher = createTextMatcher({ content: "Click me", strict: false });11const elements = document.querySelectorAll("button");12for (const element of elements) {13  if (textMatcher(element)) {14    console.log("Found element with text Click me");15  }16}17import { createTextMatcher } from "playwright/lib/internal/selectorEngine";18const textMatcher = createTextMatcher({19});20const elements = document.querySelectorAll("button");21for (const element of elements) {22  if (textMatcher(element)) {23    console.log("Found element with text Click me");24  }25}26import { createTextMatcher } from "playwright/lib/internal/selectorEngine";27const textMatcher = createTextMatcher({28});

Using AI Code Generation

1import { createTextMatcher } from 'playwright/lib/server/frames';2const matcher = createTextMatcher('text to match');3const element = await page.$('selector');4if (await matcher(element)) {5  console.log('matched');6}

Using AI Code Generation

1const { createTextMatcher } = require('playwright/lib/server/textUtils');2const matcher = createTextMatcher('text');3const { createTextMatcher } = require('playwright/lib/server/textUtils');4const matcher = createTextMatcher('text', { exact: false, normalize: true });5console.log(matcher('6const { createTextMatcher } = require('playwright/lib/server/textUtils');7const matcher = createTextMatcher('text', { exact: false, normalize: true, caseSensitive: true });8console.log(matcher('9const { createTextMatcher } = require('playwright/lib/server/textUtils');10const matcher = createTextMatcher('text', { exact: false, normalize: true, caseSensitive: true, trim: true });11console.log(matcher('12console.log(matcher('13console.log(matcher('14const { createTextMatcher } = require('playwright/lib/server/textUtils');15const matcher = createTextMatcher('text', { exact: false, normalize: true, caseSensitive: true, trim: true, word: true });

Using AI Code Generation

1const { createTextMatcher } = require('playwright/lib/server/frames');2const matcher = createTextMatcher('Hello');3const result = matcher(document);4console.log(result);5{ value: 'Hello', node: Element, index: 0 }6const { createTextMatcher } = require('playwright/lib/server/frames');7const matcher = createTextMatcher('Hello');8const result = matcher(document, 50, 1);9console.log(result);10{ value: 'Hello', node: Element, index: 0 }11const { createTextMatcher } = require('playwright/lib/server/frames');12const matcher = createTextMatcher('Hello');13const result = matcher(document, 50, 0, 50);14console.log(result);15{ value: 'Hello', node: Element, index: 0 }

Using AI Code Generation

1const { createTextMatcher } = require('playwright/lib/internal/selectorParser');2const textMatcher = createTextMatcher('text to be searched in the page');3await page.waitForSelector({ selector: textMatcher, timeout: 10000, text: 'text to be searched in the page', state: 'visible' });4const textContent = await page.textContent(textMatcher);5await page.click(textMatcher);6await page.press(textMatcher, 'Enter');7await page.type(textMatcher, 'text to be typed');

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.