Join the 1-day Testing & QA Summit featuring 15+ Expert Speakers.Register for FREE! 
How to use uniqueCSSSelector method in Playwright Internal
Best JavaScript code snippet using playwright-internal
EditSitemapSelectorView.js
Source:EditSitemapSelectorView.js 
1import * as c from "../Selector/SelectorTable.js"//c = i(219),2import * as A from "../Arr.js"//A = i(87),3import * as _ from "../Selector/SelectorMicroData.js"//_ = i(217),4import * as N from "../RequestPermissions.js" //N = i(220),5import * as F from "../IM/DevToolsContentScriptClient.js"//F = i(221),6import * as C from "../SelectorOpt/selectorFactory.js"//C = i(94),7import * as l from "react"//l = i(0),8import * as s from "mobx-react"//s = i(21),9import * as d from "./BaseComponent.js"//d = i(25),10import * as u from "../IM/backgroundPageClient.js"//u = i(68),11import * as o from "../../common/lib/jquery.js"//o = i(65),12import * as p from "./DataObjectSelectors.js"//p = i(691),13import * as h from "./DataPreviewButton.js" //h = i(692),14import * as f from "./DiscardInitialElements.js"//f = i(693),15import * as m from "./MicroDataSelectorType.js"//m = i(694),16import * as g from "./SchemaOrgType.js"//g = i(695),17import * as y from "./Script.js"//y = i(696),18import * as b from "./ScriptDataColumns.js"//b = i(699),19import * as v from "./SitemapXmlMinimumPriority.js"//v = i(700)20import * as w from "./SitemapXmlUrlRegex.js"//w = i(701),21import * as S from "./SitemapXmlUrls.js"//S = i(702),22import * as x from "./PerformActionButton.js"//x = i(703),23import * as M from "../SelectorOpt/selectorTypes.js"//M = i(704),24import * as E from "./Checkbox.js"//E = i(705),25import * as O from "./Columns.js"//O = i(706),26import * as P from "./Delay.js"//P = i(707),27import * as k from "./ParentSelectors.js"//k = i(708),28import * as T from "./ElementSelector.js"//T = i(709),29import * as D from "./Select.js"//D = i(710),30import * as R from "./Input.js"//R = i(711),31import * as I from "./InputAutocomplete.js" //I = i(712);32var n = this && this.__decorate || function (e, t, i, n) {33 var r, a = arguments.length, o = a < 3 ? t : null === n ? n = Object.getOwnPropertyDescriptor(t, i) : n;34 if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) o = Reflect.decorate(e, t, i, n); else for (var s = e.length - 1; s >= 0; s--) (r = e[s]) && (o = (a < 3 ? r(o) : a > 3 ? r(t, i, o) : r(t, i)) || o);35 return a > 3 && o && Object.defineProperty(t, i, o), o;36}, r = this && this.__metadata || function (e, t) {37 if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(e, t);38};39let EditSitemapSelectorView = class extends d.BaseComponent {40 constructor(e) {41 super(e);42 const t = C.selectorFactory(e.appState.selector);43 this.state = {44 selector: t,45 schemaOrgExtractorFoundData: []46 };47 }48 get selectorIds() {49 const originalSitemap = this.props.appState.originalSitemap;50 const originalSelector = this.props.appState.originalSelector;51 const cloned_sitemap = originalSitemap.clone();52 cloned_sitemap.updateSelector(originalSelector, this.state.selector);53 const results = [];54 cloned_sitemap.selectors.forEach(e => {55 if (e.canHaveChildSelectors())56 results.push(e.id);57 });58 results.unshift("_root");59 return results;60 }61 get columns() {62 let result = [];63 const selector = this.state.selector;64 if (undefined !== selector.columns) {65 result = selector.columns;66 }67 return result;68 }69 getFormValidatorOptions() {70 const e = {71 fields: {72 id: {73 validators: {74 notEmpty: {75 message: "Sitemap id required and cannot be empty"76 },77 stringLength: {78 min: 2,79 message: "The sitemap id should be atleast 2 characters long"80 },81 regexp: {82 regexp: /^(?!web-scraper)[^_\.\$\#\s&][^\.\$\#\n&]+$/,83 message: "Selector id cannot start with _ and cannot contain . $ #"84 }85 }86 },87 selector: {88 validators: {89 notEmpty: {90 message: "Selector is required and cannot be empty"91 }92 }93 },94 regex: {95 validators: {96 callback: {97 message: "JavaScript does not support regular expressions that can match 0 characters.",98 callback(e, t) {99 if (!e) return !0;100 const i = "".match(new RegExp(e));101 return null === i || "" !== i[0];102 }103 }104 }105 },106 clickElementSelector: {107 validators: {108 notEmpty: {109 message: "Click selector is required and cannot be empty"110 }111 }112 },113 tableHeaderRowSelector: {114 validators: {115 notEmpty: {116 message: "Header row selector is required and cannot be empty"117 }118 }119 },120 tableDataRowSelector: {121 validators: {122 notEmpty: {123 message: "Data row selector is required and cannot be empty"124 }125 }126 },127 delay: {128 validators: {129 numeric: {130 message: "Delay must be numeric"131 }132 }133 },134 sitemapXmlMinimumPriority: {135 validators: {136 between: {137 min: 0,138 max: 1,139 message: "Minimum priority must be between 0 and 1"140 }141 }142 },143 sitemapXmlUrlRegex: {144 validators: {145 callback: {146 message: "JavaScript does not support regular expressions that can match 0 characters.",147 callback(e, t) {148 if (!e) return !0;149 try {150 const t = "".match(new RegExp(e));151 return null === t || "" !== t[0];152 } catch (e) {153 return {154 valid: !1,155 message: "Invalid regex"156 };157 }158 }159 }160 }161 },162 sitemapXmlSitemapXmlUrlRegex: {163 validators: {164 callback: {165 message: "JavaScript does not support regular expressions that can match 0 characters.",166 callback(e, t) {167 if (!e) return !0;168 try {169 const t = "".match(new RegExp(e));170 return null === t || "" !== t[0];171 } catch (e) {172 return {173 valid: !1,174 message: "Invalid regex"175 };176 }177 }178 }179 }180 },181 selectorScrollElement: {182 validators: {}183 },184 selectorScrollDownIfElementNotVisible: {185 validators: {}186 },187 selectorScrollToElement: {188 validators: {}189 },190 parentSelectors: {191 validators: {192 notEmpty: {193 message: "You must choose at least one parent selector"194 },195 callback: {196 message: "Selector needs to have at least one other selector as parent",197 callback: (e, t) => 1 !== e.length || e[0] !== this.state.selector.id198 }199 }200 }201 },202 group: ".form-group:not(:has(.form-group))"203 }, t = /^(?!web-scraper)[^_\.\$\s][^\.\$\n]+$/;204 for (let i = 0; i <= 30; i++) e.fields[`columns[${i}][name]`] = {205 validators: {206 notEmpty: {207 message: "must not be empty"208 },209 regexp: {210 regexp: t,211 message: "invalid format"212 }213 }214 };215 for (let i = 0; i <= 30; i++) e.fields[`scriptDataColumns[${i}][name]`] = {216 validators: {217 notEmpty: {218 message: "must not be empty"219 },220 regexp: {221 regexp: t,222 message: "invalid format"223 }224 }225 };226 for (let t = 0; t <= 30; t++) e.fields[`sitemapXmlUrls[${t}]`] = {227 validators: {228 notEmpty: {229 message: "must not be empty"230 },231 uri: {232 message: "Sitemap.xml URL is not a valid URL"233 }234 }235 };236 return e;237 }238 componentDidMount() {239 this.initFormValidator();240 }241 render() {242 const e = this.selectorIds,243 t = this.props.appState.experimentalFeaturesEnabled, {selector: i, schemaOrgExtractorFoundData: n} = this.state;244 let r = {};245 for (const e of n) i instanceof _.SelectorMicroData && e.schemaOrgType === i.schemaOrgType && (r = e.data[0]);246 const a = n.map(e => e.schemaOrgType), o = {247 auto: "auto",248 linkFromHref: 'Link (<a href="http://example.com/">)',249 linkFromInlineScript: "Scripted link (<a href=\"javascript:window.location='http://example.com'\">)",250 linkFromAttributes: 'Attribute link (<a data-link="http://example.com">)',251 linkFromInnerText: "Text link (<div>link: http://example.com/</div>)",252 linkFromInterceptableJavaScriptClick: "Interceptable Scripted Link click simulation (window.open(), <form> submit, history.pushState())",253 linkFromClickRedirect: 'Scripted Link click simulation (button.addEventListener("click", redirectFunction))',254 clickMore: "Click multiple times on next/more button ([Next page] [Load More])",255 clickOnce: "Click once on multiple buttons ([1] [2], [3])"256 };257 return t || delete o.linkFromClickRedirect, l.createElement("div", {258 ref: e => this.el = e259 }, l.createElement("form", {260 className: "form-horizontal",261 role: "form",262 id: "edit-selector",263 onSubmit: this.cancelEvent.bind(this)264 }, l.createElement("div", {265 className: "form-group"266 }, l.createElement("label", {267 className: "col-lg-1 control-label"268 }, chrome.i18n.getMessage("SelectorID")), l.createElement("div", {269 className: "col-lg-10"270 }, l.createElement("input", {271 type: "text",272 className: "form-control",273 name: "id",274 id: "selectorId",275 placeholder: "Selector Id",276 value: i.id,277 onChange: this.handleInputChange.bind(this)278 }))), l.createElement("div", {279 className: "form-group"280 }, l.createElement("label", {281 className: "col-lg-1 control-label"282 }, chrome.i18n.getMessage("type")), l.createElement("div", {283 className: "col-lg-10"284 }, l.createElement("select", {285 className: "form-control",286 value: i.type,287 name: chrome.i18n.getMessage("type"),288 onChange: this.changeSelectorType.bind(this)289 }, M.selectorTypes.map(e => e.experimental && !t ? "" : l.createElement("option", {290 key: e.type,291 value: e.type292 }, e.title))))), l.createElement(T.ElementSelector, {293 feature: "selector",294 selector: i,295 label: chrome.i18n.getMessage("SelectorAction"),296 onSelectClick: this.selectSelector.bind(this, "selector"),297 onElementPreviewClick: this.elementPreview.bind(this, "selector"),298 onDataPreviewClick: this.dataPreview.bind(this),299 onChange: this.handleInputChange.bind(this)300 }), l.createElement(T.ElementSelector, {301 feature: "selectorScrollElement",302 selector: i,303 label: "Scroll element",304 onSelectClick: this.selectSelector.bind(this, "selectorScrollElement"),305 onElementPreviewClick: this.elementPreview.bind(this, "selectorScrollElement"),306 onChange: this.handleInputChange.bind(this)307 }), l.createElement(T.ElementSelector, {308 feature: "selectorScrollDownIfElementNotVisible",309 selector: i,310 label: "Scroll only if missing",311 onSelectClick: this.selectSelector.bind(this, "selectorScrollDownIfElementNotVisible"),312 onElementPreviewClick: this.elementPreview.bind(this, "selectorScrollDownIfElementNotVisible"),313 onChange: this.handleInputChange.bind(this)314 }), l.createElement(T.ElementSelector, {315 feature: "selectorScrollToElement",316 selector: i,317 label: "Scroll to element",318 onSelectClick: this.selectSelector.bind(this, "selectorScrollToElement"),319 onElementPreviewClick: this.elementPreview.bind(this, "selectorScrollToElement"),320 onChange: this.handleInputChange.bind(this)321 }), l.createElement(T.ElementSelector, {322 feature: "clickElementSelector",323 selector: i,324 label: "Click selector",325 onSelectClick: this.selectClickSelector.bind(this),326 onElementPreviewClick: this.elementPreviewClickSelector.bind(this),327 onChange: this.handleInputChange.bind(this)328 }), l.createElement(T.ElementSelector, {329 feature: "tableHeaderRowSelector",330 selector: i,331 label: chrome.i18n.getMessage("HeaderRowSelector"),332 onSelectClick: this.selectTableHeaderRowSelector.bind(this),333 onElementPreviewClick: this.previewTableRowSelector.bind(this),334 onChange: this.handleInputChange.bind(this)335 }), l.createElement(T.ElementSelector, {336 feature: "tableDataRowSelector",337 selector: i,338 label: chrome.i18n.getMessage("DataRowsSelector"),339 onSelectClick: this.selectTableDataRowSelector.bind(this),340 onElementPreviewClick: this.previewTableRowSelector.bind(this),341 onChange: this.handleInputChange.bind(this)342 }), l.createElement(D.Select, {343 feature: "clickType",344 selector: i,345 label: "Click type",346 onChange: this.handleInputChange.bind(this),347 options: {348 clickOnce: "Click once (pagination, tabs)",349 clickMore: "Click more (click to load more elements. Stops when no new elements with unique text content are found.)"350 }351 }), l.createElement(D.Select, {352 feature: "paginationType",353 selector: i,354 label: "Pagination Type",355 onChange: this.handleInputChange.bind(this),356 options: o357 }), l.createElement(D.Select, {358 selector: i,359 feature: "clickElementUniquenessType",360 label: "Click element uniqueness",361 onChange: this.handleInputChange.bind(this),362 options: {363 uniqueText: "Unique Text",364 uniqueHTMLText: "Unique HTML+Text",365 uniqueHTML: "Unique HTML",366 uniqueCSSSelector: "unique CSS Selector"367 }368 }), l.createElement(m.MicroDataSelectorType, {369 feature: "microDataSelectorType",370 selector: i,371 onChange: this.handleInputChange.bind(this)372 }), l.createElement(g.SchemaOrgType, {373 feature: "schemaOrgType",374 selector: i,375 onChange: this.handleSchemaOrgTypeChange.bind(this),376 onRefresh: this.refreshSchemaOrgTypes.bind(this),377 types: a378 }), l.createElement(y.Script, {379 feature: "script",380 selector: i,381 onChange: this.handleValueChange.bind(this, "script")382 }), l.createElement(b.ScriptDataColumns, {383 feature: "scriptDataColumns",384 selector: i,385 onChange: this.handleInputChange.bind(this),386 onRemove: this.handleMultiRemove.bind(this),387 onAdd: this.handleAddMultiValue.bind(this)388 }), l.createElement(E.Checkbox, {389 feature: "multiple",390 selector: i,391 label: chrome.i18n.getMessage("Multiple"),392 onChange: this.handleInputChange.bind(this)393 }), l.createElement(f.DiscardInitialElements, {394 feature: "discardInitialElements",395 selector: i,396 onChange: this.handleInputChange.bind(this)397 }), t ? l.createElement(D.Select, {398 feature: "linkType",399 selector: i,400 label: "Link type",401 onChange: this.handleInputChange.bind(this),402 options: {403 link: "Link (read from href attribute)",404 text: "Text (use text contents as link)",405 attribute: "Attribute (@TODO)",406 popup: "Popup window (@TODO)",407 redirect: "Redirect (@TODO)",408 "form-submit": "Form submit (@TODO)"409 }410 }) : "", l.createElement(E.Checkbox, {411 feature: "downloadImage",412 selector: i,413 label: "Download image",414 onChange: this.handleInputChange.bind(this)415 }), l.createElement(R.Input, {416 feature: "regex",417 selector: i,418 label: chrome.i18n.getMessage("Regex"),419 onChange: this.handleInputChange.bind(this)420 }), l.createElement(I.InputAutocomplete, {421 feature: "extractAttribute",422 placeholder: "Click to view available attributes",423 selector: i,424 label: "Attribute name",425 onChange: this.handleInputChange.bind(this),426 getOptions: this.handleAttributeSelect427 }), l.createElement(P.Delay, {428 feature: "delay",429 selector: i,430 onChange: this.handleInputChange.bind(this)431 }), l.createElement(O.Columns, {432 feature: "columns",433 selector: i,434 onChange: this.handleInputChange.bind(this)435 }), l.createElement(S.SitemapXmlUrls, {436 feature: "sitemapXmlUrls",437 selector: i,438 onChange: this.handleInputChange.bind(this),439 onRemove: this.handleMultiRemove.bind(this),440 onAddUrl: this.handleAddMultiValue.bind(this),441 onClickPopulateSitemapXmlUrlsFromRobotsTxt: this.populateSitemapXmlLinksFromRobotsTxt.bind(this)442 }), l.createElement(w.SitemapXmlUrlRegex, {443 feature: "sitemapXmlUrlRegex",444 selector: i,445 onChange: this.handleInputChange.bind(this)446 }), l.createElement(v.SitemapXmlMinimumPriority, {447 feature: "sitemapXmlMinimumPriority",448 selector: i,449 onChange: this.handleInputChange.bind(this)450 }), l.createElement(p.DataObjectSelectors, {451 feature: "dataObjectSelectors",452 selector: i,453 sampleData: r,454 onChange: this.handleInputChange.bind(this)455 }), l.createElement(k.ParentSelectors, {456 feature: "parentSelectors",457 selector: i,458 onChange: this.handleInputChange.bind(this),459 selectorIds: e460 }), l.createElement("div", {461 className: "form-group"462 }, l.createElement("div", {463 className: "col-lg-offset-1 col-lg-10"464 }, l.createElement("div", {465 className: "btn-block"466 }, l.createElement(x.PerformActionButton, {467 selector: i,468 onClick: this.performAction.bind(this),469 feature: "performActionButton"470 }), l.createElement(h.DataPreviewButton, {471 visible: i.hasFeature("dataPreviewButton"),472 onClick: this.dataPreview.bind(this)473 }), l.createElement("button", {474 id: "save-selector",475 className: "btn btn-primary",476 type: "button",477 onClick: this.saveSelector.bind(this)478 }, chrome.i18n.getMessage("Save_selector")), l.createElement("button", {479 className: "btn btn-danger",480 type: "button",481 onClick: this.cancelEditing.bind(this)482 }, chrome.i18n.getMessage("Cancel"))))), l.createElement("div", {483 className: "form-group"484 }, l.createElement("div", {485 className: "col-lg-offset-1 col-lg-10"486 }))));487 }488 handleValueChange(e, t) {489 const selector = this.state.selector;490 selector[e] = t;491 this.setState({492 selector: selector493 });494 }495 handleInputChange(e) {496 const target = e.target;497 let value = "checkbox" === target.type ? target.checked : target.value;498 const name = target.name;499 const selector = this.state.selector;500 const matchedName = name.match(/^([^\[]+)\[(.*?)\]$/);501 if (matchedName) {502 const prefix = matchedName[1];503 const postFix = matchedName[2].split("][");504 let partOfSelector = selector[prefix];505 for (let index = 0; index <= postFix.length - 2; index++)506 partOfSelector = partOfSelector[postFix[index]];507 partOfSelector[postFix[postFix.length - 1]] = value;508 this.setState({509 selector: selector510 });511 } else {512 if ("select-multiple" === target.type) {513 const e = target.options, n = [];514 for (let t = 0, i = e.length; t < i; t++)515 e[t].selected && n.push(e[t].value);516 value = n;517 }518 if ("id" === name)519 for (const parentSelector in selector.parentSelectors) {520 const t = selector.parentSelectors[parentSelector];521 selector.id === t && selector.parentSelectors.splice(parseInt(parentSelector, 10), 1, value);522 }523 selector[name] = value;524 this.setState({525 selector: selector526 });527 }528 }529 changeSelectorType(e) {530 const t = e.currentTarget.value;531 let i = this.state.selector;532 const n = {533 id: i.id,534 type: t,535 selector: i.selector,536 parentSelectors: i.parentSelectors537 };538 i = C.selectorFactory(n);539 if (!i.canHaveChildSelectors())540 for (const e in i.parentSelectors) {541 const t = i.parentSelectors[e];542 if (i.id === t) {543 i.parentSelectors.splice(parseInt(e, 10), 1);544 break;545 }546 }547 this.setState({548 selector: i549 });550 }551 saveSelector(e) {552 e.preventDefault();553 e.stopPropagation();554 if (!this.isValidForm())555 return !1;556 this.props.appState.saveSelector(this.state.selector);557 }558 cancelEditing(e) {559 e.preventDefault();560 e.stopPropagation();561 this.props.appState.cancelSelectorEditing();562 }563 async selectSelector(e = "selector", t) {//éè¦ï¼ç¹å»selectçæ¯æ¶åï¼ä¼æ§è¡è¿ä¸ª564 t.preventDefault();565 t.stopPropagation();566 const currentTarget = t.currentTarget;567 const sitemap = this.props.appState.sitemap;568 const selector = this.state.selector;569 const selectorBreadcrumb = this.props.appState.selectorBreadcrumb;570 const parentCSSSelector = sitemap.selectors.getParentCSSSelectorWithinOnePage(selectorBreadcrumb);571 const l = await F.DevToolsContentScriptClient.selectSelector({572 parentCSSSelector: parentCSSSelector,573 allowedElements: selector.getItemCSSSelector()574 });575 selector[e] = l.CSSSelector;576 this.setState({577 selector: selector578 });579 if (selector instanceof c.SelectorTable) {580 const e = await this.getSelectorHTML();581 const t = selector.getTableHeaderRowSelectorFromTableHTML(e, o);582 const tableDataRowSelector = selector.getTableDataRowSelectorFromTableHTML(e, o);583 selector.tableHeaderRowSelector = t;584 selector.tableDataRowSelector = tableDataRowSelector;585 const n = selector.getTableHeaderColumnsFromHTML(t, e, o);586 selector.columns = n;587 this.setState({588 selector: selector589 });590 this.revalidateField(o("input[name='tableHeaderRowSelector']").get()[0]);591 this.revalidateField(o("input[name='tableDataRowSelector']").get()[0]);592 }593 this.revalidateField(currentTarget);594 }595 async handleAttributeSelect(e) {596 const element = await F.DevToolsContentScriptClient.getElement(e);597 const attributes = await F.DevToolsContentScriptClient.getAllAttributes(element);598 const result = [];599 for (const attribute in attributes)600 if ("" !== attributes[attribute] && null !== attributes[attribute])601 result.push(attribute);602 return result;603 }604 async selectClickSelector(e) {605 e.preventDefault();606 e.stopPropagation();607 const currentTarget = e.currentTarget;608 const sitemap = this.props.appState.sitemap;609 const selector = this.state.selector;610 const selectorBreadcrumb = this.props.appState.selectorBreadcrumb;611 const parentCSSSelectorWithinOnePage = sitemap.selectors.getParentCSSSelectorWithinOnePage(selectorBreadcrumb);612 const devToolPageContentScriptSelector = await F.DevToolsContentScriptClient.selectSelector({613 parentCSSSelector: parentCSSSelectorWithinOnePage,614 allowedElements: selector.getItemCSSSelector()615 });616 selector.clickElementSelector = devToolPageContentScriptSelector.CSSSelector;617 this.setState({618 selector: selector619 });620 this.revalidateField(currentTarget);621 }622 async selectTableHeaderRowSelector(e) {623 e.preventDefault();624 e.stopPropagation();625 const currentTarget = e.currentTarget;626 const sitemap = this.props.appState.sitemap;627 const selector = this.state.selector;628 const selectorBreadcrumb = this.props.appState.selectorBreadcrumb;629 const parentCSSSelector = sitemap.selectors.getCSSSelectorWithinOnePage(selector.id, selectorBreadcrumb);630 const s = await F.DevToolsContentScriptClient.selectSelector({631 parentCSSSelector: parentCSSSelector,632 allowedElements: "tr"633 });634 selector.tableHeaderRowSelector = s.CSSSelector;635 this.setState({636 selector: selector637 });638 const cssSelector = s.CSSSelector;639 const c = await this.getSelectorHTML();640 const u = selector.getTableHeaderColumnsFromHTML(cssSelector, c, o);641 selector.columns = u;642 this.setState({643 selector: selector644 });645 this.revalidateField(currentTarget);646 }647 async getSelectorHTML() {648 const e = this.state.selector;649 this.props.appState.sitemap = this.props.appState.originalSitemap.clone();650 this.props.appState.sitemap.updateSelector(this.props.appState.originalSelector, e);651 const sitemap = this.props.appState.sitemap;652 const selectorBreadcrumb = this.props.appState.selectorBreadcrumb;653 const n = sitemap.selectors.getCSSSelectorWithinOnePage(e.id, selectorBreadcrumb);654 return await F.DevToolsContentScriptClient.getCssSelectorHTML(n);655 }656 async selectTableDataRowSelector(e) {657 e.preventDefault();658 e.stopPropagation();659 const currentTarget = e.currentTarget;660 const sitemap = this.props.appState.sitemap;661 const selector = this.state.selector;662 const selectorBreadcrumb = this.props.appState.selectorBreadcrumb;663 const cssSelectorWithinOnePage = sitemap.selectors.getCSSSelectorWithinOnePage(selector.id, selectorBreadcrumb);664 const devToolPageContentScriptSelector = await F.DevToolsContentScriptClient.selectSelector({665 parentCSSSelector: cssSelectorWithinOnePage,666 allowedElements: "tr"667 });668 selector.tableDataRowSelector = devToolPageContentScriptSelector.CSSSelector;669 this.setState({670 selector: selector671 });672 this.revalidateField(currentTarget);673 }674 async elementPreview(e = "selector", t) {675 t.preventDefault();676 t.stopPropagation();677 const currentTarget = t.currentTarget;678 if (currentTarget.classList.contains("preview")) {679 await F.DevToolsContentScriptClient.removeCurrentContentSelector();680 currentTarget.classList.remove("preview");681 } else {682 const sitemap = this.props.appState.sitemap;683 const selector = this.state.selector;684 const selectorBreadcrumb = this.props.appState.selectorBreadcrumb;685 const parentCSSSelector = sitemap.selectors.getParentCSSSelectorWithinOnePage(selectorBreadcrumb);686 await F.DevToolsContentScriptClient.elementPreview({687 parentCSSSelector: parentCSSSelector,688 elementCSSSelector: selector[e]689 });690 currentTarget.classList.add("preview");691 }692 }693 async elementPreviewClickSelector(e) {694 e.preventDefault();695 e.stopPropagation();696 const currentTarget = e.currentTarget;697 if (currentTarget.classList.contains("preview")) {698 await F.DevToolsContentScriptClient.removeCurrentContentSelector();699 currentTarget.classList.remove("preview");700 } else {701 const sitemap = this.props.appState.sitemap;702 const selector = this.state.selector;703 const selectorBreadcrumb = this.props.appState.selectorBreadcrumb;704 const parentCSSSelector = sitemap.selectors.getParentCSSSelectorWithinOnePage(selectorBreadcrumb);705 await F.DevToolsContentScriptClient.elementPreview({706 parentCSSSelector: parentCSSSelector,707 elementCSSSelector: selector.clickElementSelector708 });709 currentTarget.classList.add("preview");710 }711 }712 async previewTableRowSelector(e) {713 e.preventDefault();714 e.stopPropagation();715 const currentTarget = e.currentTarget;716 if (currentTarget.classList.contains("preview")) {717 await F.DevToolsContentScriptClient.removeCurrentContentSelector();718 currentTarget.classList.remove("preview");719 } else {720 const sitemap = this.props.appState.sitemap;721 const selector = this.state.selector;722 const selectorBreadcrumb = this.props.appState.selectorBreadcrumb;723 const parentCSSSelector = sitemap.selectors.getCSSSelectorWithinOnePage(selector.id, selectorBreadcrumb);724 const elementCSSSelector = o(currentTarget).closest(".form-group").find("input").val();725 await F.DevToolsContentScriptClient.elementPreview({726 parentCSSSelector: parentCSSSelector,727 elementCSSSelector: elementCSSSelector728 });729 currentTarget.classList.add("preview");730 }731 }732 async dataPreview(e) {733 e.preventDefault();734 e.stopPropagation();735 const selector = this.state.selector;736 const i = this.props.appState.originalSelector;737 this.props.appState.sitemap = this.props.appState.originalSitemap.clone();738 this.props.appState.sitemap.updateSelector(i, selector);739 await this.props.appState.dataPreview(selector.id);740 }741 async performAction(e) {742 e.preventDefault();743 e.stopPropagation();744 await N.RequestPermissions.requestAdditionalPermissions();745 const selector = this.state.selector;746 const originalSelector = this.props.appState.originalSelector;747 const clonedSitemap = this.props.appState.sitemap.clone();748 this.props.appState.sitemap = this.props.appState.originalSitemap.clone();749 this.props.appState.sitemap.updateSelector(originalSelector, selector);750 await this.props.appState.performSelectorAction(selector.id);751 this.props.appState.sitemap = clonedSitemap;752 }753 async refreshSchemaOrgTypes() {754 await N.RequestPermissions.requestAdditionalPermissions();755 const e = await u.backgroundPageClient.findSchemaOrgData();756 let t;757 this.setState({758 schemaOrgExtractorFoundData: e759 });760 if (e.length > 0)761 t = e[0].schemaOrgType;762 this.updateSchemaOrgType(t);763 }764 updateSchemaOrgType(e) {765 const schemaOrgExtractorFoundData = this.state.schemaOrgExtractorFoundData;766 const selector = this.state.selector;767 if (void 0 === e) {768 selector.schemaOrgType = void 0;769 selector.dataObjectSelectors = [];770 this.setState({771 selector: selector772 });773 } else {774 selector.schemaOrgType = e;775 for (const n of schemaOrgExtractorFoundData)776 if (n.schemaOrgType === e) {777 selector.dataObjectSelectors = n.dataObjectSelectors;778 this.setState({779 selector: selector780 });781 }782 }783 }784 handleSchemaOrgTypeChange(e) {785 this.handleInputChange(e);786 const t = e.target.value;787 this.updateSchemaOrgType(t);788 }789 handleMultiRemove(e, t, i) {790 const selector = this.state.selector;791 if (1 === selector[e].length)792 selector[e] = [i];793 else794 selector[e].splice(t, 1);795 this.setState({796 selector: selector797 });798 }799 handleAddMultiValue(e, t) {800 const selector = this.state.selector;801 selector[e].push(t);802 this.setState({803 selector: selector804 });805 }806 async populateSitemapXmlLinksFromRobotsTxt() {807 await N.RequestPermissions.requestAdditionalPermissions();808 const selector = this.state.selector;809 const links = await u.backgroundPageClient.getSitemapXmlLinksFromRobotsTxt();810 let i = A.Arr.mergeUnique(selector.sitemapXmlUrls, links);811 if (i.length > 0)812 i = A.Arr.removeEmpty(i);813 selector.sitemapXmlUrls = i;814 this.setState({815 selector: selector816 });817 }818};819EditSitemapSelectorView = n([s.inject("appState"), s.observer, r("design:paramtypes", [Object])], EditSitemapSelectorView);...
autoScrollTableUtilities.js
Source:autoScrollTableUtilities.js
1import $ from "jquery";2// This is a set of small functions to help construct and start a auto-scrolling table3// Here's the structure that I expect to encounter.4// The auto-scrolling table is inside a CSS3 Grid element, so starting from the top5// <div grid-element> (allows item to span multiple grid items)6// <div class="dataCard"> ()7// <div class="fullCardContainer"> (added this to help with React single-div rule, doesn't do much. Must have 100% width!)8// <table class="headerTable" (separate table just for column headers, so they can stay on screen)9// <div class="bodyTableContainerDiv" (auto-scroll applied to div, not table !)10// <table id="uniqueTableID" (I *could* auto-scroll this table, but then need to be display:block)11//12// Tricky part is that jquery autoscroll only works on div, not table element. And if I convert the table element13// to display:block, then the width:40% trick to set column width doesn't work. So, allow the table to be a table,14// and then simply auto-scroll the surrounding div15// ----------------------------------------------------------------------------16// React seems pretty sharp about remembering the mid-scroll position of an element. So if you re-load a page,17// the element might be mid-way through a scroll. This function simply scrolls the table back to the top18// You call it with the id attached to the table, but it actually scrolls the parent div19export function scrollToTop(uniqueCssSelector) {20 $(uniqueCssSelector)21 .parent()22 .scrollTop(0);23}24// ----------------------------------------------------------------------------25// It's very difficult (impossible ?) to set the height of the div that defines the view into our scrolling26// So, committing a little sin here by reaching into the DOM, measuring a few surrounding elments, and then27// explicitly setting the height of the scrollable div28// This gets called once when the React component mounts, and again whenever the browser window resizes29export function setTableSizeViaJquery(scrollingTableID) {30 // Find the CSS3 grid Item for ourselves (see the expected structure described above)31 let gridItem = $(scrollingTableID)32 .parent()33 .parent()34 .parent();35 // Find the separate table which contains the columns headers (so we can subtract from the overall height)36 let headerTable = gridItem.find(".headerTable");37 // Find the div containing the table for the data (this is the item on which we'll set the height)38 let bodyTableContainerDiv = gridItem.find(".bodyTableContainerDiv");39 // Compute the desired height by tagking the gridItem height, and subtracting what's occupied by the header table40 let desiredTbodyHeight = gridItem.height() - headerTable.height() - 40;41 // console.log("New desired height for widget: ", desiredTbodyHeight);42 // Now set the height for the div (which scrolls) which contains the table of data43 bodyTableContainerDiv.height(desiredTbodyHeight);44}45// ----------------------------------------------------------------------------46// Start the scrolling action on the div which contains the table full of data47export function initScroll(uniqueCssSelector, scrollLengthInSecs) {48 // console.warn("initscroll");49 // convert seconds to milliseconds50 let scrollLengthInMS = scrollLengthInSecs * 1000;51 // Compute how much we should scroll. There's a div that contains all the content, and a div that defines the (smaller) "viewport"52 // Compute the difference between those two (in pixels)53 let scrollDistancePixels =54 $(uniqueCssSelector).height() -55 $(uniqueCssSelector)56 .parent()57 .height();58 // console.warn("scrollDistancePixels: ", scrollDistancePixels);59 // If table has more than can fit into widget, then start scrolling it60 if (scrollDistancePixels > 0) {61 // via jQuery, grab the div which contains the table (see description at top)62 let scrollableDiv = $(uniqueCssSelector).parent();63 // Define a callback function to be used when auto-scroll hits the bottom64 let callbackForWhenScrollHitsBottom = function() {65 // This is the callback for when the animation finishes66 // console.log(uniqueCssSelector + ": Down Scroll Done, so scrolling back to top");67 // The scrollable div (which we want to now scroll up) is the parent of the table containing the data68 let scrollableDiv = $(uniqueCssSelector).parent();69 // Now stop that jQuery scroll (isn't it already stopped ?), and then scroll back to top70 scrollableDiv.stop().animate({ scrollTop: 0 }, scrollLengthInMS, "swing", function() {71 // console.log(uniqueCssSelector + ": Back at the top, so restarting scroll");72 initScroll(uniqueCssSelector, scrollLengthInSecs);73 });74 };75 // Start jQuery scroll animation on that div, here are the expected args76 // arg1: object os properties to animate (scrollTop scrolls vertically, scrollLeft scrolls horizontally)77 // arg2: duration (millseconds ?)78 // arg3: easing function (i.e. linear or swing)79 // arg4: callback when complete80 // Check to see if it's already animating81 if (scrollableDiv.is(":animated")) {82 // console.warn("already animated!");83 } else {84 console.log("starting table scroll animation");85 scrollableDiv.animate(86 {87 scrollTop: scrollDistancePixels88 },89 scrollLengthInMS,90 "swing",91 callbackForWhenScrollHitsBottom92 );93 }94 }95}96// ----------------------------------------------------------------------------97// ----------------------------------------------------------------------------...
index.js
Source:index.js
1import CssOptimumSelectorHelper from './css-traversal-helper'2import $ from 'jquery'3export default class CssOptimumSelector extends CssOptimumSelectorHelper {4 constructor(props) {5 super(props);6 this.multiSelector = this.multiSelector.bind(this)7 this.getMultiSelector = this.getMultiSelector.bind(this)8 this.uniqueCssSelector = this.uniqueCssSelector.bind(this)9 this.getUniqueCssSelector = this.getUniqueCssSelector.bind(this)10 }11 getUniqueCssSelector(element, path = '') {12 if (path && this.isUniqueInDocument(element, path)) return path13 const checkList = this.getCheckList(element)14 const filteredCheckList = this.getFilteredCheckList(checkList)15 const priorityArray = this.formPriorityArray(filteredCheckList)16 const result = this.checkUniqueInParent(element.parent(), priorityArray, path)17 let parentPath = null18 if(result) {19 parentPath = result20 } else {21 parentPath = `${this.nthChildStr(element)}`22 if (path) parentPath = `${parentPath} > ${path}`23 }24 return this.getUniqueCssSelector(element.parent(), parentPath)25 }26 uniqueCssSelector(element) {27 return this.getUniqueCssSelector($(element))28 }29 getMultiSelector(firstElement, secondElement, relativeDepth = this.relativeDepth) {30 const commonParent = this.checkCommonParent(firstElement, secondElement)31 const noCommonSelector = () => [32 this.getUniqueCssSelector(firstElement),33 this.getUniqueCssSelector(secondElement)34 ]35 if (!commonParent) return noCommonSelector()36 const ele1Path = this.childToParentTraversal(firstElement, commonParent).slice(1).join(' > ')37 const ele2Path = this.childToParentTraversal(secondElement, commonParent).slice(1).join(' > ')38 if (this.checkCommonPath(ele1Path, ele2Path)) {39 const path = this.getUniqueCssSelector(commonParent)40 const relativeDegree = this.checkRelativeDegree(ele1Path, ele2Path)41 const relativeChildPath = this.getRelativeChildPath(ele1Path,relativeDepth)42 const commonSelector = `${path} ${relativeChildPath}`43 return [commonSelector]44 }45 return noCommonSelector()46 }47 multiSelector(firstElement, secondElement, relativeDepth = this.relativeDepth) {48 return this.getMultiSelector($(firstElement), $(secondElement), relativeDepth)49 }...
UniqueElementListSpec.js
Source:UniqueElementListSpec.js
1describe("UniqueElementList", function () {2 var $el;3 beforeEach(function () {4 $el = jQuery("#tests").html("");5 if($el.length === 0) {6 $el = $("<div id='tests' style='display:none'></div>").appendTo("body");7 }8 });9 it("it should add only unique elements", function () {10 $el.html("<a>1</a><a>2</a>");11 var list = new UniqueElementList('uniqueText');12 expect(list.length).toEqual(0);13 var $a = $el.find("a");14 list.push($a[0]);15 expect(list.length).toEqual(1);16 list.push($a[0]);17 expect(list.length).toEqual(1);18 list.push($a[1]);19 expect(list.length).toEqual(2);20 list.push($a[1]);21 expect(list.length).toEqual(2);22 });23 it("it should add only unique elements when using uniqueHTMLText type", function () {24 $el.html("<a id='1'>a</a><a id='2'>a</a>");25 var list = new UniqueElementList('uniqueHTMLText');26 expect(list.length).toEqual(0);27 var $a = $el.find("a");28 list.push($a[0]);29 expect(list.length).toEqual(1);30 list.push($a[0]);31 expect(list.length).toEqual(1);32 list.push($a[1]);33 expect(list.length).toEqual(2);34 list.push($a[1]);35 expect(list.length).toEqual(2);36 });37 it("it should add only unique elements when using uniqueHTML type", function () {38 $el.html("<a class='1'>a<span>a</span></a><a class='2'>a<span>b</span></a><a class='1'>c<span>c</span></a>");39 var list = new UniqueElementList('uniqueHTML');40 expect(list.length).toEqual(0);41 var $a = $el.find("a");42 list.push($a[0]);43 expect(list.length).toEqual(1);44 list.push($a[0]);45 expect(list.length).toEqual(1);46 list.push($a[1]);47 expect(list.length).toEqual(2);48 list.push($a[1]);49 expect(list.length).toEqual(2);50 list.push($a[2]);51 expect(list.length).toEqual(2);52 });53 it("it should add only unique elements when using uniqueCSSSelector type", function () {54 $el.html("<a></a><a></a>");55 var list = new UniqueElementList('uniqueCSSSelector');56 expect(list.length).toEqual(0);57 var $a = $el.find("a");58 list.push($a[0]);59 expect(list.length).toEqual(1);60 list.push($a[0]);61 expect(list.length).toEqual(1);62 list.push($a[1]);63 expect(list.length).toEqual(2);64 list.push($a[1]);65 expect(list.length).toEqual(2);66 });...
3241.js
Source:3241.js
1/**2 * Only Elements unique will be added to this array3 * @constructor4 */5UniqueElementList = function(clickElementUniquenessType) {6 this.clickElementUniquenessType = clickElementUniquenessType;7 this.addedElements = {};8};9UniqueElementList.prototype = new Array;10UniqueElementList.prototype.push = function(element) {11 if(this.isAdded(element)) {12 return false;13 }14 else {15 var elementUniqueId = this.getElementUniqueId(element);16 this.addedElements[elementUniqueId] = true;17 Array.prototype.push.call(this, $(element).clone(true)[0]);18 return true;19 }20};21UniqueElementList.prototype.getElementUniqueId = function(element) {22 if(this.clickElementUniquenessType === 'uniqueText') {23 var elementText = $(element).text().trim();24 return elementText;25 }26 else if(this.clickElementUniquenessType === 'uniqueHTMLText') {27 var elementHTML = $("<div class='-web-scraper-should-not-be-visible'>").append($(element).eq(0).clone()).html();28 return elementHTML;29 }30 else if(this.clickElementUniquenessType === 'uniqueHTML') {31 // get element without text32 var $element = $(element).eq(0).clone();33 var removeText = function($element) {34 $element.contents()35 .filter(function() {36 if(this.nodeType !== 3) {37 removeText($(this));38 }39 return this.nodeType == 3; //Node.TEXT_NODE40 }).remove();41 };42 removeText($element);43 var elementHTML = $("<div class='-web-scraper-should-not-be-visible'>").append($element).html();44 return elementHTML;45 }46 else if(this.clickElementUniquenessType === 'uniqueCSSSelector') {47 var cs = new CssSelector({48 enableSmartTableSelector: false,49 parent: $("body")[0],50 enableResultStripping:false51 });52 var CSSSelector = cs.getCssSelector([element]);53 return CSSSelector;54 }55 else {56 throw "Invalid clickElementUniquenessType "+this.clickElementUniquenessType;57 }58};59UniqueElementList.prototype.isAdded = function(element) {60 var elementUniqueId = this.getElementUniqueId(element);61 var isAdded = elementUniqueId in this.addedElements;62 return isAdded;...
UniqueElementList.js
Source:UniqueElementList.js
1class UniqueElementList {2 constructor(e) {3 this.elementUniquenessType = e;4 this.addedElements = {};5 this.elements = [];6 }7 async push(e) {8 const t = await this.getElementUniqueId(e);9 if (this.isAdded(t))10 return false;11 else12 {13 this.addedElements[t] = !0;14 const i = await e.getClone();15 this.elements.push(i);16 return true;17 }18 }19 async getElementUniqueId(e) {20 let t;21 if ("uniqueText" === this.elementUniquenessType)22 t = await e.getText();23 else if ("uniqueHTMLText" === this.elementUniquenessType)24 t = await e.getWrappedHTML();25 else if ("uniqueHTML" === this.elementUniquenessType)26 t = await e.getWrappedHTMLWithoutText();27 else {28 if ("uniqueCSSSelector" !== this.elementUniquenessType) {29 throw "Invalid elementUniquenessType " + this.elementUniquenessType;30 }31 t = await e.getCSSSelector();32 }33 return t;34 }35 async isElementAdded(e) {36 return (await this.getElementUniqueId(e)) in this.addedElements;37 }38 isAdded(e) {39 return e in this.addedElements;40 }41 get length() {42 return this.elements.length;43 }44 getElements() {45 return this.elements;46 }47}...
Using AI Code Generation
1const { uniqueCSSSelector } = require('playwright');2const { chromium } = require('playwright');3(async () => {4 const browser = await chromium.launch();5 const context = await browser.newContext();6 const page = await context.newPage();
Using AI Code Generation
1const { uniqueCSSSelector } = require('playwright/lib/server/dom.js');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 page.$eval('text=Get started', uniqueCSSSelector);8 console.log(selector);
Using AI Code Generation
1const { uniqueCSSSelector } = require('playwright-core/lib/server/dom.js');2const { chromium } = require('playwright-core');3(async () => {4 const browser = await chromium.launch({ headless: false });5 const context = await browser.newContext();6 const page = await context.newPage();7 const elementHandle = await page.$('input[type="text"]');8 const cssSelector = await uniqueCSSSelector(elementHandle);9 console.log(cssSelector);10 await browser.close();11})();12const { uniqueCSSSelector } = require('playwright-core/lib/server/dom.js');13const { chromium } = require('playwright-core');14(async () => {15 const browser = await chromium.launch({ headless: false });16 const context = await browser.newContext();17 const page = await context.newPage();18 const elementHandle = await page.$('input[type="text"]');19 const cssSelector = await uniqueCSSSelector(elementHandle);20 console.log(cssSelector);21 await browser.close();22})();23const { uniqueCSSSelector } = require('playwright-core/lib/server/dom.js');24const { chromium } = require('playwright-core');25(async () => {26 const browser = await chromium.launch({ headless: false });27 const context = await browser.newContext();28 const page = await context.newPage();29 const elementHandle = await page.$('input[type="text"]');30 const cssSelector = await uniqueCSSSelector(elementHandle);31 console.log(cssSelector);32 await browser.close();33})();34const {
Using AI Code Generation
1const { uniqueCSSSelector } = require('@playwright/test/lib/internal/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 uniqueCSSSelectorString = await uniqueCSSSelector(page.locator('#hplogo'));8 console.log(uniqueCSSSelectorString);9 await browser.close();10})();
Using AI Code Generation
1const { uniqueCSSSelector } = require('playwright/lib/internal/selectors/selectorEngine');2const { selectors } = require('playwright/lib/internal/selectors/evaluators');3const { ElementHandle } = require('playwright/lib/cjs/pw_exports');4const element = await page.$('a');5const selector = uniqueCSSSelector(element, selectors);6console.log(selector);
Using AI Code Generation
1const { uniqueCSSSelector } = require('playwright/lib/server/dom.js');2const { chromium } = require('playwright');3(async () => {4 const browser = await chromium.launch({ headless: false });5 const context = await browser.newContext();6 const page = await context.newPage();7 const selector = await page.evaluate((element) => {8 return uniqueCSSSelector(element);9 }, await page.$('text=Get started'));10 console.log(selector);11 await browser.close();12})();
Using AI Code Generation
1const { uniqueCSSSelector } = require('playwright/lib/internal/injected/uniqueSelector');2const selector = uniqueCSSSelector(document.querySelector('a'));3console.log(selector);4const { uniqueCSSSelector } = require('playwright/lib/server/injected/uniqueSelector');5const selector = uniqueCSSSelector(document.querySelector('a'));6console.log(selector);7const { uniqueCSSSelector } = require('playwright/lib/server/injected/uniqueSelector');8const selector = uniqueCSSSelector(document.querySelector('a'));9console.log(selector);10const { uniqueCSSSelector } = require('playwright/lib/server/injected/uniqueSelector');11const selector = uniqueCSSSelector(document.querySelector('a'));12console.log(selector);13const { uniqueCSSSelector } = require('playwright/lib/server/injected/uniqueSelector');14const selector = uniqueCSSSelector(document.querySelector('a'));15console.log(selector);16const { uniqueCSSSelector } = require('playwright/lib/server/injected/uniqueSelector');17const selector = uniqueCSSSelector(document.querySelector('a'));18console.log(selector);19const { uniqueCSSSelector } = require('playwright/lib/server/injected/uniqueSelector');20const selector = uniqueCSSSelector(document.querySelector('a'));21console.log(selector);22const { uniqueCSSSelector } = require('playwright/lib/server/injected/uniqueSelector');23const selector = uniqueCSSSelector(document.querySelector('a'));24console.log(selector);25const { uniqueCSSSelector } = require('playwright/lib/server/injected/uniqueSelector');26const selector = uniqueCSSSelector(document.querySelector('a'));27console.log(selector);28const { uniqueCSSSelector } = require('playwright/lib/server/injected/uniqueSelector');29const selector = uniqueCSSSelector(document.querySelector('a'));30console.log(selector);31const { uniqueCSSSelector } = require('playwright/lib/server/injected/uniqueSelector');32const selector = uniqueCSSSelector(document.querySelector('a'));33console.log(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.
Run Playwright Internal automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
