KaneAI - World’s First E2E Software Testing Agent.Signup for Private Beta 
How to use getAriaSelected method in Playwright Internal
Best JavaScript code snippet using playwright-internal
designsystem.js
Source:designsystem.js 
...91 static getAriadescribedby() { return "aria-describedby" }92 static getAriaInvalid() { return "aria-invalid" }93 static getAriaPressed() { return "aria-pressed" }94 static getAriaExpanded() { return "aria-expanded" }95 static getAriaSelected() { return "aria-selected" }96 static getInvalidMessage() { return ".invalid-message" }97 static onSuperordinateElementChanged(e, t) { $(e).is(":checked") ? $(t).prop("disabled", !1) : ($(t).prop("disabled", !0), $(t).prop("checked", !1)) }98 static setupNonExpandableInformationBlock() {99 const e = ".accordioncontent";100 $(".informationmessageblock:visible").each((function() {101 const t = $(this),102 i = $(this).find(e).height();103 !t.hasClass("accordioncontentopen") && i <= 130 && (t.addClass("content-open"), t.find(e).removeClass("hide"), t.addClass("nonexpandable"), t.find(".expand-button").find(".informationmessageheading").unwrap().wrap('<div class="disabled-button subtitle" />'))104 }))105 }106 static trapTabKey(e, t, i) {107 if (9 === e.which) {108 const s = $(":focus");109 e.shiftKey ? s.get(0) === t.get(0) && (i.focus(), e.preventDefault()) : s.get(0) === i.get(0) && (t.focus(), e.preventDefault())110 }111 }112 static showLogoutWindow() { IdleChecker.showLogoutWindow(), $("#abouttobeloggedout").hide(), $("#sessiontimedout").show(), $("#sessiontimedout .continue").focus() }113 static openLightbox(e, i, s) {114 const n = "lightboxwrapper";115 let a;116 t.closeLightbox(), $("body").addClass("hasmodal"), a = "string" == typeof i ? $("<div>" + i + "</div>").insertAfter("footer") : i, a.wrap('<div class="modal_background" tabindex="-1"></div>').wrap('<div class="lightboxwrapper" aria-modal="true"></div>'), s.wrapperclass && $(n).addClass(s.wrapperclass), s.destroy && $(n).addClass("destroy"), s.persistentwindow || ($(document).on("click.closelightbox", (function() { t.closeLightbox(e) })), $(document).on("keydown.closelightbox", (function(i) { 27 === i.keyCode && $(".modal_background").length > 0 && t.closeLightbox(e) })))117 }118 static closeLightbox(e) {119 const t = $(".lightboxwrapper");120 $(document).off("click.closelightbox").off("keydown.closelightbox"), t.length > 0 && (t.hasClass("destroy") ? t.parent().remove() : t.children().unwrap().unwrap(), null != e && $(e).focus()), $("body").removeClass("hasmodal")121 }122 static scrollTo(e, t) { e.is(":visible") && $("html").animate({ scrollTop: e.offset().top - 82 }, t) }123}124class i {125 constructor(e) { this.element = e, this.initEvents() }126 initEvents() {127 t.setupNonExpandableInformationBlock(), $(this.element).on({128 click: function() {129 const e = $(this).closest(".accordion");130 e.toggleClass("expanded"), t.toggleBooleanAttribute($(this), "aria-expanded"), e.find(".accordioncontent").toggleClass("hide")131 }132 })133 }134}135class s {136 constructor(e) { this.element = e, this.closeevent = "click.popupclose", this.popup_keyboardevent = "keydown.popup", this.favouriteactive = "favourite-active", this.setup() }137 setup() {138 const e = this;139 $(this.element).on("click", ".info-toggle", (function() {140 const t = $(this),141 i = t.prev(".info-popup"),142 s = t.hasClass("favourite-toggle"),143 n = !t.hasClass("inactive");144 s && n ? (t.toggleClass(e.favouriteactive), e.togglefavouriteScreenreader(t)) : i.is(":visible") ? e.closePopup(t, i) : i && i.length && e.openPopup(t, i, { closeAll: !0 })145 })), $(this.element).on("click", ".close", (function() {146 const t = $(this).closest(".popup-component").find(".info-toggle"),147 i = t.prev(".info-popup");148 e.closePopup(t, i)149 }))150 }151 openPopup(e, i, s) {152 const n = this;153 s && s.closeAll && this.closeAllPopups(), i.show(), n.positionPopup(e, i), i.addClass("active"), i.is(":visible") && t.scrollIntoView(i), setTimeout((function() { i.find(".close").focus() }), 100), $("body").on(this.closeevent, (function(e) {154 if (n.isInsidePopup(e)) return !0;155 n.closeAllPopups()156 })), $(document).on(this.popup_keyboardevent, (function(s) { 27 === s.keyCode && n.isPopupOpen(i) && n.closePopup(e, i), 9 === s.keyCode && n.isTooltip(i) && n.isPopupOpen(i) && n.closePopup(e, i), n.isDialog(i) && t.trapTabKey(s, i.find(".close"), n.lastElementInPopup(i)) })), e.on("blur", (function(t) { n.isInsidePopup(t) || n.closePopup(e, i), e.off("blur") }))157 }158 closePopup(e, t) { $("body").off(this.closeevent), $(document).off(this.popup_keyboardevent), t.hide(), t.removeClass("active"), e.focus() }159 closeAllPopups() { $("body").off(this.closeevent), $(document).off(this.popup_keyboardevent), $(".info-popup").each((function(e, t) { $(t).hide(), $(t).removeClass("active") })) }160 togglefavouriteScreenreader(e) {161 const t = e.attr("id");162 e.hasClass(this.favouriteactive) ? e.attr("aria-labelledby", "remove-favourite-text-" + t) : e.attr("aria-labelledby", "save-favourite-text-" + t)163 }164 positionPopup(e, t) {165 const i = t.offset(),166 s = i.top,167 n = i.left,168 a = n + t.outerWidth(),169 o = { top: s, left: n },170 r = $(window).scrollLeft(),171 l = r + $(window).width();172 n < r && (o.left = r + 16), a > l && (o.left = l - t.outerWidth()), t.offset(o)173 }174 isInsidePopup(e) { return $(e.target).closest(".popup-component").find(".info-popup").length > 0 }175 isDialog(e) { return e.closest(".popup-component").hasClass("dialog") }176 isTooltip(e) { return e.closest(".popup-component").hasClass("tooltip") }177 isPopupOpen(e) { return e.length > 0 }178 lastElementInPopup(e) { return e.find("button:visible, a:visible, input:visible").last() }179}180class n {181 constructor(e) { this.element = e, this.$element = $(this.element), this.optionList = ".accordioncontent", this.expand_button = ".expand-button", this.options = ".option input", this.optionsChecked = ".option input:checked", this.accordion = ".accordion", this.triggerName = ".expand-button .selected-name", this.optionLast = ".option:last-child input", this.optionFirst = ".option:first-child input", this.optionsAllButFirst = ".option:not(:first-child) input", this.initEvents() }182 initEvents() {183 const e = this;184 $(this.element).ready((function() { e.updateSelectedOption(e.countryselectOptionFirst), e.updateTriggerName() })), $(this.element).on({ click: function() { n.focusSelectedOption() } }, this.expand_button), $(this.element).on({ keydown: function(i) { if (void 0 !== i) return !t.isEnterkey(i) && (t.isArrowdown(i) ? (e.nextListItem(this), !1) : t.isArrowup(i) ? (e.previousListItem(this), !1) : t.isEndkey(i) ? (e.$element.find(e.optionLast).focus(), !1) : t.isHomekey(i) ? (e.$element.find(e.optionFirst).focus(), !1) : t.isEsckey(i) || t.isTabkey(i) && e.isOptionListVisible() ? (e.closeOptionList(), e.focusTriggerElement(), !1) : void 0) }, click: function() { e.updateSelectedOption(this) } }, this.options), $(this.element).on({ keydown: function(i) { if (t.isArrowdown(i) || t.isEnterkey(i)) return e.openOptionList(), n.focusSelectedOption(), !1 } }, this.expand_button), $(document).on("click", (function(t) { if (e.isOptionListVisible() && e.isClickOutsideOptionList(t)) return e.closeOptionList(), e.focusTriggerElement(), !1 }))185 }186 updateSelectedOption(e) { this.isDefaultOption(e) && this.$element.find(this.optionsAllButFirst).prop("checked", !1), this.isOtherThanDefaultOptionSelected(e) ? this.$element.find(this.optionFirst).prop("checked", !1) : this.isSelectionEmpty() && this.$element.find(this.optionFirst).prop("checked", !0), this.updateTriggerName(e) }187 isDefaultOption(e) { return $(e).attr("id") === this.$element.find(this.optionFirst).attr("id") }188 isOtherThanDefaultOptionSelected(e) { return this.$element.find(this.optionsChecked).length > 1 && !this.isDefaultOption(e) }189 isSelectionEmpty() { return 0 === this.$element.find(this.optionsChecked).length }190 updateTriggerName() {191 const e = this.$element.find(this.optionsChecked).length,192 i = this.$element.find(this.optionsChecked).next("label").text();193 1 === e ? this.$element.find(this.triggerName).html(i) : this.$element.find(this.triggerName).html(i).html(e + " " + t.getMessage("multiselect_many_selected"))194 }195 static focusSelectedOption() { $(".multi-select .option input:checked").first().focus() }196 focusTriggerElement() { this.$element.find(this.expand_button).focus() }197 isOptionListVisible() { return this.$element.find(this.optionList).is(":visible") }198 isClickOutsideOptionList(e) { return !$(e.target).closest(this.$element.find(this.accordion)).length }199 closeOptionList() { this.$element.find(this.optionList).addClass("hide"), this.$element.find(this.expand_button).attr("aria-expanded", !1), this.$element.find(this.accordion).removeClass("expanded") }200 openOptionList() { this.$element.find(this.optionList).removeClass("hide"), this.$element.find(this.expand_button).attr("aria-expanded", !0), this.$element.find(this.accordion).addClass("expanded") }201 previousListItem(e) { $(e).closest("li").prev().find("input").focus() }202 nextListItem(e) { $(e).closest("li").next().find("input").focus() }203}204class a {205 constructor(e) { this.element = e, this.initEvents() }206 initEvents() {207 const e = this;208 $(this.element).on("change", (function() {209 if (e.checkIfDateIsValid())210 if (e.isNotStandardDatepicker()) {211 const t = e.calculateSimpleDatepickerValue();212 e.simpleDatepickerElements().value.val(t), $("#" + e.getIdBase() + "-standard").val(t)213 } else {214 const t = $("#" + e.getIdBase() + "-standard").val();215 $("#" + e.getIdBase()).val(t);216 const i = new Date(t);217 e.simpleDatepickerElements().year.val(i.getFullYear()), e.simpleDatepickerElements().month.val(e.getMonth(i)), e.simpleDatepickerElements().day.val(e.getDay(i))218 }219 }))220 }221 isNotStandardDatepicker() { return $(this.element).attr("id") !== this.getIdBase() + "-standard" }222 simpleDatepickerElements() { return { year: $("#" + this.getIdBase() + "-year"), month: $("#" + this.getIdBase() + "-month"), day: $("#" + this.getIdBase() + "-day"), value: $("#" + this.getIdBase()) } }223 calculateSimpleDatepickerValue() { const e = this.simpleDatepickerElements(); return e.year.val() && e.month.val() && e.day.val() ? e.year.val() + "-" + e.month.val() + "-" + e.day.val() : null }224 getMonth(e) { return ("0" + (e.getMonth() + 1)).slice(-2) }225 getIdBase() { return $(this.element).attr("id").split("-")[0] }226 getDay(e) { return ("0" + e.getDate()).slice(-2) }227 renderThisMessageValid(e) { $(t.getInvalidMessage(), this.getThisContext(e)).hide(), $(e).removeAttr(t.getAriadescribedby()), this.renderThisFieldValid(e) }228 renderThisMessageInvalid(e) {229 const i = $(e).attr("id");230 $(e).attr(t.getAriadescribedby(), "error-" + i), $(".helpertext", e).hide(), $(t.getInvalidMessage(), this.getThisContext(e)).show(), this.renderThisFieldInvalid(e)231 }232 renderThisFieldValid(e) { $(e).addClass("valid"), $(e).removeClass("invalid"), $(e).attr(t.getAriaInvalid(), "false") }233 renderThisFieldInvalid(e) { $(e).addClass("invalid"), $(e).removeClass("valid"), $(e).attr(t.getAriaInvalid(), "true") }234 getThisContext(e) { return $(e).parent() }235 checkIfDateIsValid() {236 const e = this.simpleDatepickerElements();237 if (e.year.val() && e.month.val() && e.day.val()) {238 if (!this.isDateValid(e.year.val(), e.month.val(), e.day.val())) return this.renderThisMessageInvalid("#" + this.getIdBase() + "-day"), $("#" + this.getIdBase()).val(this.calculateSimpleDatepickerValue()), !1;239 this.renderThisMessageValid("#" + this.getIdBase() + "-year"), this.renderThisMessageValid("#" + this.getIdBase() + "-month"), this.renderThisMessageValid("#" + this.getIdBase() + "-day")240 } else $("#" + this.getIdBase()).val("");241 return !0242 }243 isDateValid(e, t, i) { return t >= 1 && t < 13 && i > 0 && i <= this.daysInMonth(e, Number(t)) }244 daysInMonth(e, t) {245 switch (t) {246 case 2:247 return e % 4 == 0 && e % 100 || e % 400 == 0 ? 29 : 28;248 case 9:249 case 4:250 case 6:251 case 11:252 return 30;253 default:254 return 31255 }256 }257}258class o {259 constructor(e) { this.element = e, this.initEvents() }260 initEvents() { if ($(this.element).on({ change: function() { $(this).addClass("changed-show-error") } }), "countryid" === $(this.element).attr("id").toLowerCase()) { $(this.element).on({ change: function() { const e = $("#zipCode"); "SE" === $(this).children("option:selected").val() ? (e.prop("required", !0), e.siblings("label").find(".optionaltext").addClass("hide")) : (e.prop("required", !1), e.siblings("label").find(".optionaltext").removeClass("hide")) } }); const e = $("#zipCode"); "SE" === $(this.element).children("option:selected").val() && (e.prop("required", !0), e.siblings("label").find(".optionaltext").addClass("hide")) } }261}262class r {263 constructor(e) { this.element = e, this.disableDependentIfNeeded(), this.initEvents() }264 initEvents() {265 const e = this;266 $(this.element).on({ click: function() { e.disableDependentIfNeeded() } })267 }268 disableDependentIfNeeded() {269 const e = $(this.element).data("dependsonid");270 $(e).attr("disabled", $(this.element).is(":checked"))271 }272}273class l {274 constructor(e) { this.element = e }275 validateField(e) { return this._validate(this.getValue(), e) }276 validateFieldTrim(e) { return this._validate(this.getValueTrim(), e) }277 _validate(e, t) { return this.isInitiated() && (l.matchPattern(e, t) ? this.renderMessageValid() : this.renderMessageInvalid()), !1 }278 validateFieldMatch(e, t) { const i = t.val(); "" !== e && "" !== i && this.isValidated() && (e === i ? this.renderThisMessageValid(t) : this.renderThisMessageInvalid(t)) }279 renderMessageValid() {280 if ($(t.getInvalidMessage(), this.getContext()).hide(), $(this.element).removeAttr(t.getAriadescribedby()), 0 !== $(this.element).closest(".textfield").find(".validicon").length) {281 const e = $(this.element).attr("id");282 $(this.element).attr(t.getAriadescribedby(), "valid-" + e)283 }284 this.renderFieldValid()285 }286 renderMessageInvalid() {287 const e = $(this.element).attr("id");288 $(this.element).attr(t.getAriadescribedby(), "error-" + e), $(".helpertext", this.element).hide(), $(t.getInvalidMessage(), this.getContext()).show(), $(this.getEmailOccupiedSelector(), this.element).text(""), this.renderFieldInvalid()289 }290 renderThisMessageValid(e) { $(t.getInvalidMessage(), this.getThisContext(e)).hide(), $(e).removeAttr(t.getAriadescribedby()), this.renderThisFieldValid(e) }291 renderThisMessageInvalid(e) {292 const i = $(e).attr("id");293 $(e).attr(t.getAriadescribedby(), "error-" + i), $(".helpertext", e).hide(), $(t.getInvalidMessage(), this.getThisContext(e)).show(), $(this.getEmailOccupiedSelector(), e).text(""), this.renderThisFieldInvalid(e)294 }295 renderThisFieldValid(e) { $(e).addClass("valid"), $(e).removeClass("invalid"), $(e).attr(t.getAriaInvalid(), "false") }296 renderThisFieldInvalid(e) { $(e).addClass("invalid"), $(e).removeClass("valid"), $(e).attr(t.getAriaInvalid(), "true") }297 renderFieldValid() { $(this.element).addClass("valid"), $(this.element).removeClass("invalid"), $(this.element).attr(t.getAriaInvalid(), "false") }298 renderFieldInvalid() { $(this.element).addClass("invalid"), $(this.element).removeClass("valid"), $(this.element).attr(t.getAriaInvalid(), "true") }299 static matchPattern(e, t) { return t.test(e) }300 getThisContext(e) { return $(e).parent() }301 getContext() { return $(this.element).parent() }302 getEmailOccupiedSelector() { return ".occupiedemail-message" }303 getValue() { return $(this.element).val().toString() }304 getValueTrim() { return $(this.element).val().toString().trim() }305 setInitiated() { return $(this.element).addClass("initiated") }306 setValidated() { return $(this.element).addClass("validated") }307 isInitiated() { return $(this.element).hasClass("initiated") }308 isValidated() { return $(this.element).hasClass("validated") }309}310class c extends l {311 constructor(e) { super(e), this.newpassword = "[name=password]", this.confirmpassword = "[name=passwordVer]", this.validatePasswordCorrect(this.getValue()), this.initEvents() }312 initEvents() {313 const e = this,314 t = $(this.element).siblings("button");315 $(this.element).attr("autocomplete") && "new-password" === $(this.element).attr("autocomplete").toLowerCase() && $(this.element).on({ input: function() { e.setInitiated(), e.validatePasswordCorrect(e.getValue()), e.isValidated() && (e.validateField(e.getPasswordPattern()), e.validateFieldMatch($(e.newpassword).val(), $(e.confirmpassword))) }, blur: function() { e.setValidated(), e.validateField(e.getPasswordPattern()), e.validateFieldMatch($(e.newpassword).val(), $(e.confirmpassword)) } }), $(t).on({316 click: function() {317 const t = $(this).siblings("input"),318 i = t.attr("type"),319 s = t.attr("id");320 return "password" === i ? e.setPasswordVisible(this, t, s) : e.setPasswordInvisible(this, t, s), !1321 }322 })323 }324 validatePasswordCorrect(e) { "password" === $(this.element).attr("name") && (c.matchPattern(e, this.getPasswordPattern()) && this.renderMessageValid(), this.validatePasswordPattern(e, ".lowercase", this.passwordPatternLowerCase()), this.validatePasswordPattern(e, ".uppercase", this.getPasswordPatternUpperCase()), this.validatePasswordPattern(e, ".number", this.getPasswordPatternnumber()), this.validatePasswordPattern(e, ".specialchar", this.getPasswordPatternSpecialChar()), this.validatePasswordPattern(e, ".totalchars", this.getPasswordPatternTotalChar())) }325 validatePasswordPattern(e, t, i) {326 const s = $(this.element).siblings(".evaluatepassword-message");327 c.matchPattern(e, i) ? s.find(t).prop("checked", !0) : s.find(t).prop("checked", !1)328 }329 setPasswordVisible(e, i, s) { i.attr("type", "text"), $(e).attr("aria-labelledby", "make-invisible-text-" + s), $(e).removeClass("make-visible"), $(e).addClass("make-invisible"), $(e).attr(t.getAriadescribedby(), s + "-" + c.getPasswordvisibletextId()), $("#" + s + "-" + c.getPasswordvisibletextId()).html(t.getMessage("accessible_passwordvisible")) }330 setPasswordInvisible(e, i, s) { i.attr("type", "password"), $(e).attr("aria-labelledby", "make-visible-text-" + s), $(e).removeClass("make-invisible"), $(e).addClass("make-visible"), $(e).attr(t.getAriadescribedby(), s + "-" + c.getPasswordvisibletextId()), $("#" + s + "-" + c.getPasswordvisibletextId()).html(t.getMessage("accessible_passwordinvisible")) }331 getPasswordPattern() { return new RegExp("^(?=.*[A-Z])(?=.*[a-z])(?=.*\\d)(?=.*[-_,.;:!?+\\\\/@%(){}\\[\\]\"*`~^=|\\s'])[A-Za-z0-9-_,.;:!?+\\\\/@%(){}\\[\\]\"*`~^=|\\s']{8,50}$") }332 passwordPatternLowerCase() { return new RegExp("[a-z]") }333 getPasswordPatternUpperCase() { return new RegExp("[A-Z]") }334 getPasswordPatternnumber() { return new RegExp("[0-9]") }335 getPasswordPatternTotalChar() { return new RegExp("^.{8,50}$") }336 getPasswordPatternSpecialChar() { return new RegExp("[-_,.;:!?+\\\\/@%(){}\\[\\]\"*`~^=|\\s']") }337 static getPasswordvisibletextId() { return "togglevisible-sr" }338}339class d extends l {340 constructor(e) { super(e) }341 static getPersonnummer() { return $("#pnr").val() }342 static isPersonnummer() { const e = $("#pnr").val(); return void 0 !== e && e.length > 0 }343}344class u extends l {345 constructor(e) { super(e), this.newemail = "[name=email]", this.confirmemail = "[name=emailVer]", this.initEvents() }346 initEvents() {347 const e = this;348 $(this.element).on({ input: function() { e.setInitiated(), e.isValidated() && (e.validateEmail(), e.validateFieldMatch($(e.newemail).val(), $(e.confirmemail))) }, blur: function() { e.setValidated(), e.isInitiated() && e.validateEmail(), e.validateFieldMatch($(e.newemail).val(), $(e.confirmemail)) } }), $(this.element).attr("id") && "email" === $(this.element).attr("id").toLowerCase() && $(this.element).on({ blur: function(i) { if ($(this).hasClass("valid")) { t.awebShowSpinner(); const s = d.getPersonnummer(); return d.isPersonnummer() ? e.checkPnrEmailAvailability(this, s, i) : e.checkEmailAvailability(this, i), !1 } } })349 }350 checkEmailAvailability(e, i) {351 const s = this;352 $.ajax({ url: t.getTrack() + "/validateemail", cache: !1, type: "GET", data: { epost: e.value }, success: function() { s.renderEmailNotOccupiedMessage() }, error: function() { s.renderEmailOccupiedMessage() }, complete: function() { t.awebHideSpinner(), s.setFocusOnRelatedTarget(i) } })353 }354 checkPnrEmailAvailability(e, i, s) {355 const n = this;356 $.ajax({ url: t.getTrack() + "/validatepnremail", cache: !1, type: "GET", data: { epost: e.value, personnummer: i }, success: function() { n.renderEmailNotOccupiedMessage() }, error: function() { n.renderEmailOccupiedMessage() }, complete: function() { t.awebHideSpinner(), n.setFocusOnRelatedTarget(s) } })357 }358 validateEmail() { this.validateEmailPatterns(this.getValueTrim()) ? this.renderMessageValid() : this.renderMessageInvalid() }359 validateEmailPatterns(e) { return !u.matchPattern(e, this.getEmailInvalidPattern()) && u.matchPattern(e, this.getEmailValidPattern()) }360 renderEmailOccupiedMessage() {361 const e = $(this.element).attr("id");362 $(this.element).attr(t.getAriadescribedby(), "occupiedemail-" + e), $(this.getEmailOccupiedSelector(), this.getContext()).text(""), $(this.getEmailOccupiedSelector(), this.getContext()).show(), $(this.getEmailOccupiedSelector(), this.getContext()).text(t.getMessage("occupiedemail")), this.renderFieldInvalid(this.element)363 }364 setFocusOnRelatedTarget(e) {365 const i = t.getRelatedTargetId(e);366 void 0 !== i && $("#" + i).focus()367 }368 renderEmailNotOccupiedMessage() { $(this.getEmailOccupiedSelector(), this.getContext()).text(""), $(this.element).removeAttr(t.getAriadescribedby()) }369 getEmailInvalidPattern() { return new RegExp("(\\.\\.)|(@\\.)|(\\.@)|(^\\.)") }370 getEmailValidPattern() { return new RegExp("^([+\\-\\w.]+)@((\\[?[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}]?)|((([\\-\\w]{1,63}\\.)+)([a-zA-Z]{2,63})))$") }371}372class h extends l {373 constructor(e) { super(e), this.name_field = 'input[name$="Name"]:not([readonly])', this.initEvents() }374 initEvents() {375 const e = this;376 $(this.element).on({ input: function() { e.setInitiated(), l.matchPattern(e.getValue(), e.getNamePattern()) && e.renderMessageValid(), e.isValidated() && e.validateField(e.getNamePattern()) }, blur: function() { e.setValidated(), e.validateField(e.getNamePattern()) } })377 }378 getNamePattern() { return new RegExp("^[A-Za-zªµºÃ-ÃÃ-öø-ËË-ËË -ˤˬˮͰ-ʹͶͷͺ-ͽÎÎ-ÎÎÎ-ΡΣ-ϵϷ-ÒÒ-Ô§Ô±-ÕÕÕ¡-Ö×-תװ-×²Ø -Ùٮٯٱ-ÛÛÛ¥Û¦Û®Û¯Ûº-Û¼Û¿ÜÜ-ܯÝ-Þ¥Þ±ß-ߪߴߵߺà -à à à ¤à ¨à¡-à¡à¢ ࢢ-ࢬà¤-हऽà¥à¥-ॡॱ-ॷॹ-ॿà¦
-à¦à¦à¦à¦-নপ-রলশ-হঽà§à§à§à§-ৡৰৱà¨
-à¨à¨à¨à¨-ਨਪ-ਰਲਲ਼ਵਸ਼ਸਹà©-à©à©à©²-à©´àª
-àªàª-àªàª-નપ-રલળવ-હઽà«à« à«¡à¬
-à¬à¬à¬à¬-ନପ-ରଲଳଵ-ହଽààà-à¡à±à®à®
-à®à®-à®à®-à®à®à®à®à®à®à®£à®¤à®¨-பம-ஹà¯à°
-à°à°-à°à°-నప-ళవ-హఽà±à±à± ౡà²
-à²à²-à²à²-ನಪ-ಳವ-ಹಽà³à³ ೡೱೲà´
-à´à´-à´à´-ഺഽàµàµ ൡൺ-ൿà¶
-à¶à¶-නඳ-රලà·-à·à¸-ะาำà¹-à¹àºàºàºàºàºàºàºàº-àºàº-àºàº¡-ຣລວສຫàº-ະາຳຽà»-à»à»à»-à»à¼à½-à½à½-ཬà¾-à¾á-áªá¿á-áá-áá¡á¥á¦á®-á°áµ-ááá -á
ááá-áºá¼-áá-áá-ááá-áá -áá-áá-á°á²-áµá¸-á¾áá-á
á-áá-áá-áá-áá-áá -á´á-á¬á¯-á¿á-áá -áªá-áá-áá -á±á-áá -á¬á®-á°á-á³ááá -á¡·á¢-ᢨᢪᢰ-ᣵá¤-á¤á¥-á¥á¥°-ᥴá¦-ᦫá§-á§á¨-á¨á¨ -á©áª§á¬
-ᬳá
-áá®-ᮠᮮᮯᮺ-ᯥá°-á°£á±-á±á±-ᱽᳩ-ᳬᳮ-ᳱᳵᳶá´-ᶿá¸-á¼á¼-á¼á¼ -á½
á½-á½á½-á½á½á½á½á½-á½½á¾-ᾴᾶ-ᾼιá¿-á¿á¿-á¿á¿-á¿á¿-á¿á¿ -Ῥῲ-ῴῶ-ῼâ±â¿â-ââââ-âââ-ââ¤â¦â¨âª-ââ¯-â¹â¼-â¿â
-â
â
âââ°-Ⱞⰰ-â±â± -ⳤⳫ-ⳮⳲⳳâ´-ⴥⴧâ´â´°-ⵧⵯâ¶-â¶â¶ -ⶦⶨ-ⶮⶰ-ⶶⶸ-ⶾâ·-â·â·-â·â·-â·â·-â·â¸¯ã
ãã±-ãµã»ã¼ã-ãã-ãã¡-ãºã¼-ã¿ã
-ãã±-ãã -ãºã°-ã¿ã-䶵ä¸-é¿ê-êê-ê½ê-êê-êêªê«ê-ê®ê¿-êê -ê¥ê-êê¢-êê-êê-êê -êªê¸-ê ê -ê
ê -ê ê -ê ¢ê¡-ꡳê¢-ꢳꣲ-ꣷꣻê¤-ꤥꤰ-ê¥ê¥ -ꥼê¦-ꦲê§ê¨-ꨨê©-ê©ê©-ê©ê© -ꩶꩺêª-ꪯꪱꪵꪶꪹ-ꪽê«ê«ê«-ê«ê« -ꫪꫲ-ê«´ê¬-ê¬ê¬-ê¬ê¬-ê¬ê¬ -ꬦꬨ-ꬮê¯-ꯢê°-í£í°-íí-í»ï¤-ï©ï©°-ï«ï¬-ï¬ï¬-ï¬ï¬ï¬-ﬨשׁ-זּטּ-לּמּïïïïï-ï®±ï¯-ï´½ïµ-ï¶ï¶-ï·ï·°-ﷻﹰ-ﹴﹶ-ﻼＡ-Ｚï½-ï½ï½¦-ï¾¾ï¿-ï¿ï¿-ï¿ï¿-ï¿ï¿-ï¿ Â áá â-ââââFâã\ufeff'´-]+$") }379}380class p extends l {381 constructor(e) { super(e), this.initEvents() }382 initEvents() {383 const e = this;384 $(this.element).on({ input: function() { e.setInitiated(), l.matchPattern(e.getValueTrim(), e.getPhonePattern()) && e.renderMessageValid(), e.isValidated() && e.validateFieldTrim(e.getPhonePattern()) }, blur: function() { e.setValidated(), e.validateFieldTrim(e.getPhonePattern()) } })385 }386 getPhonePattern() { return new RegExp("^(\\+|[0-9])(?:[0-9()-]){4,14}[0-9]$") }387}388class m {389 constructor(e) { this.element = e, this.initEvents() }390 initEvents() { $(this.element).on({ click: function() { return window.location = "/" + t.getLang() + "/login", !1 } }) }391}392class g {393 constructor(e) { this.element = e, this.initEvents() }394 initEvents() { $(this.element).on({ click: function() { return window.location = "/" + t.getLang() + "/selections", !1 } }) }395}396class f {397 constructor(e) { this.element = e, this.initEvents() }398 initEvents() { $(this.element).on({ click: function() { return window.location = "/" + t.getLang() + "/logout", !1 } }) }399}400class b {401 constructor(e) { this.element = e, this.initEvents() }402 initEvents() {403 const e = this,404 i = "expanded";405 $(this.element).on({ click: function() { return $(e.element).toggleClass(i), $(e.element).siblings(".mypages-container").toggleClass(i), $(e.element).attr("aria-expanded", $(e.element).hasClass(i)), !1 } }), $(document).mouseup((function(t) { if (!$(t.target).closest(".menu-button-container.mypages").length) return $(e.element).removeClass(i), $(e.element).siblings(".mypages-container").removeClass(i), !1 })), $(document).on("keyup", (function(s) { if (t.isEsckey(s)) return $(e.element).removeClass(i), $(e.element).siblings(".mypages-container").removeClass(i), !1 }))406 }407}408class v {409 constructor(e) { this.element = e, this.initEvents() }410 initEvents() {411 const e = this,412 i = "expanded";413 $(this.element).on({ click: function() { return $(e.element).toggleClass(i), $(e.element).siblings(".menu-container").toggleClass(i), $(e.element).attr("aria-expanded", $(e.element).hasClass(i)), $("body").toggleClass("hasoverlay"), !1 } }), $(".menu-container .close-button").on({ click: function() { return $(e.element).removeClass(i), $(e.element).siblings(".menu-container").removeClass(i), $(e.element).attr("aria-expanded", !1), $("body").removeClass("hasoverlay"), !1 } }), $(document).mouseup((function(t) { $(".menu-button-container.navigation .menu-container").is(":visible") && !$(t.target).closest(".menu-button-container.navigation").length && ($(e.element).removeClass(i), $(e.element).siblings(".menu-container").removeClass(i), $("body").removeClass("hasoverlay")) })), $(document).on("keyup", (function(s) { t.isEsckey(s) && ($(e.element).removeClass(i), $(e.element).siblings(".menu-container").removeClass(i), $("body").removeClass("hasoverlay")) }))414 }415}416class w {417 constructor(e) { this.element = e, this.initEvents() }418 initEvents() {419 const e = this,420 t = "expanded";421 $(this.element).on({422 click: function() {423 $(e.element).toggleClass(t), $(e.element).closest(".menu-heading").toggleClass(t), $(e.element).attr("aria-expanded", $(e.element).hasClass(t));424 var i = $(e.element).closest(".menu-part").find(".menu-body");425 i.hasClass(t) ? i.slideUp("fast", (function() { i.toggleClass(t) })) : (i.toggleClass(t), i.slideDown("fast", (function() {})))426 }427 })428 }429}430class y {431 constructor() { this.password_field = "input[type=password]:not([data-initiated])", this.email_field = "input[type=email]:not([data-initiated])", this.name_field = 'input[name$="Name"]:not([readonly]):not([data-initiated])', this.phone_field = "input[type=tel]:not([data-initiated])", this.select = ".dropdown select:not([data-initiated])", this.checkbox = ".checkbox.dependent input[type=checkbox]:not([data-initiated])", this.accordion = ".accordion .expand-button:not([data-initiated])", this.datepicker = ".datepicker input[type=date]:not([data-initiated]),.datepicker select:not([data-initiated])", this.pnr = "#pnr", this.multi_select = ".multi-select", this.logiIn_button = ".login-button:not([data-initiated])", this.selEection_button = ".selection-button:not([data-initiated])", this.logout_button = ".mypages-logout-link .outlined-button:not([data-initiated])", this.mypages_button = ".menu-toggle-button-notification.mypages-button:not([data-initiated])", this.navigation_button = ".menu-toggle-button-burger.menu-button:not([data-initiated])", this.navigation_toggle_button = ".navigation-toggle-button:not([data-initiated])", this.popup = ".popup-component:not([data-initiated])", this.initEvents(), this.generateObjects() }432 generateObjects() {433 const e = "data-initiated";434 $(this.datepicker).each((function(t, i) { new a(i), $(i).attr(e, "") })), $(this.multi_select).each((function(t, i) { new n(i), $(i).attr(e, "") })), $(this.accordion).each((function(t, s) { new i(s), $(s).attr(e, "") })), $(this.select).each((function(t, i) { new o(i), $(i).attr(e, "") })), $(this.checkbox).each((function(t, i) { new r(i), $(i).attr(e, "") })), $(this.password_field).each((function(t, i) { new c(i), $(i).attr(e, "") })), $(this.email_field).each((function(t, i) { new u(i), $(i).attr(e, "") })), $(this.name_field).each((function(t, i) { new h(i), $(i).attr(e, "") })), $(this.phone_field).each((function(t, i) { new p(i), $(i).attr(e, "") })), $(this.pnr).each((function(t, i) { new d(i), $(i).attr(e, "") })), $(this.login_button).each((function(t, i) { new m(i), $(i).attr(e, "") })), $(this.selection_button).each((function(t, i) { new g(i), $(i).attr(e, "") })), $(this.logout_button).each((function(t, i) { new f(i), $(i).attr(e, "") })), $(this.mypages_button).each((function(t, i) { new b(i), $(i).attr(e, "") })), $(this.navigation_button).each((function(t, i) { new v(i), $(i).attr(e, "") })), $(this.navigation_toggle_button).each((function(t, i) { new w(i), $(i).attr(e, "") })), $(this.popup).each((function(t, i) { new s(i), $(i).attr(e, "") }))435 }436 initEvents() {437 const e = this;438 $(document).on("ajaxComplete", (function() { e.generateObjects() }))439 }440}441class x {442 constructor() { this.element = ".subject-container", this.close_button = ".subject-container .close-button", this.toggle_expand = ".subject-container .toggle-expand", this.selectable_item = ".subject-container .selectable-item", $(this.element).attr("data-initiated", ""), this.initEvents() }443 initEvents() {444 const e = this;445 $(e.close_button).on("click", (function() { e.closeSubjectList() })), $(e.selectable_item).on("click", (function() { x.clearSelection(), e.updateTriggerName($(this).find(".subjectname")), e.updateSelectedItem($(this)), e.closeSubjectList(), $(e.element).trigger("change") })), $(e.toggle_expand).on("click", (function() { e.toggleExpand($(this)) })), $(e.element).on("keydown", (function(i) { t.trapTabKey(i, $(this).find(".close-button"), $(this).find("button:visible:last")); const s = $(i.target); return t.isEsckey(i) ? (e.closeSubjectList(), !1) : t.isArrowdown(i) ? (e.moveToNextElement(s), !1) : t.isArrowup(i) ? (e.moveToPreviousElement(s), !1) : t.isHomeKey(i) ? (e.getFirstElement().focus(), !1) : t.isEndKey(i) ? (e.getLastElement().focus(), !1) : t.isArrowright(i) ? (e.handleArrowRight(s), !1) : t.isArrowleft(i) ? (e.handleArrowLeft(s), !1) : t.isSpacekey(i) || t.isEnterkey(i) ? (s.trigger("click"), !1) : void 0 })), $(document).on("click", (function(t) { if (e.isSubjectListVisible() && e.isClickOutsideSubjectList(t)) return e.closeSubjectList(), !1 }))446 }447 handleArrowRight(e) { e.hasClass("toggle-expand") && (this.isExpanded(e) ? this.moveToNextElement(e) : x.expandItem(e)) }448 handleArrowLeft(e) { this.isExpanded(e) ? e.hasClass("expanded") && x.collapseItem(e) : 0 !== e.closest("li").length && this.moveToParent(e) }449 getFirstElement() { return $(this.element).find("li:visible").first().children("button") }450 getLastElement() { return $(this.element).find("li:visible").last().children("button") }451 moveToParent(e) { e.parents(".list").siblings(x.getToggleExpand()).focus() }452 moveToNextElement(e) {453 const t = $(".subject-container button:not(.close-button):visible"),454 i = t.index(e) + 1;455 t.eq(i).focus()456 }457 moveToPreviousElement(e) {458 const t = $(".subject-container button:not(.close-button):visible"),459 i = t.index(e) - 1;460 i >= 0 && t.eq(i).focus()461 }462 isExpanded(e) { return e.hasClass("expanded") }463 isLastChild(e) { return $(e.target).closest("li").is(":last-child") }464 isFirstChild(e) { return $(e.target).closest("li").is(":first-child") }465 updateTriggerName(e) {466 const t = e.text().trim().replace(/^\w/, (e => e.toUpperCase()));467 $("#subjectstrigger .selected-name").html(t)468 }469 updateSelectedItem(e) { e.attr(t.getAriaPressed(), "true"), e.closest("li").addClass("selected").attr(t.getAriaSelected(), "true") }470 isSubjectListVisible() { return $(this.element).is(":visible") }471 isClickOutsideSubjectList(e) { return !$(e.target).closest(this.element).length }472 closeSubjectList() { t.closeLightbox(), setTimeout((function() { $("#subjectstrigger").focus() }), 300) }473 toggleExpand(e) { e.hasClass("expanded") ? x.collapseItem(e) : x.expandItem(e) }474 static clearSelection() { $(".list-item.selected").removeClass("selected").removeAttr(t.getAriaSelected()).find(this.getSelectableItem()).attr(t.getAriaPressed(), "false") }475 static expandItem(e) {476 const i = e.closest(".list-item").find(".list-body").first();477 e.addClass("expanded"), e.attr(t.getAriaExpanded(), !0), $(i).slideDown("fast")478 }479 static collapseItem(e) {480 const i = e.closest(".list-item").find(".list-body").first();481 e.removeClass("expanded"), e.attr(t.getAriaExpanded(), !1), $(i).slideUp("fast")482 }483 static makeSelectionVisible() {484 const e = $("#subjecttree .selected").parents(".list").siblings(this.getToggleExpand());485 $(e).each((function(e, t) { x.expandItem($(t)) })), this.getSelectedItem().focus()486 }487 static getSelectedItem() { return $(".list-item.selected").find(this.getSelectableItem()) }488 static onClearFilter() { $("#subjecttree").find(".selected").attr(t.getAriaPressed(), "false").closest("li").removeClass("selected").removeAttr("aria-selected"), $("#clearsubject").attr(t.getAriaPressed(), "true").closest("li").addClass("selected").attr("aria-selected", "true"), $("#subjectstrigger .selected-name").html($(".default-value").text()), this.collapseAllTreeItems() }...
index.js
Source:index.js
...633 className: cx(getClasses(baseClassNames.node), baseClassNames.leaf),634 "aria-setsize": setsize,635 "aria-posinset": posinset,636 "aria-level": level,637 "aria-selected": getAriaSelected({638 isSelected: selectedIds.has(element.id),639 isDisabled: disabledIds.has(element.id),640 multiSelect641 }),642 disabled: disabledIds.has(element.id),643 "aria-disabled": disabledIds.has(element.id)644 };645 };646 const getBranchProps = ({ onClick } = {}) => {647 return {648 onClick:649 onClick == null650 ? composeHandlers(handleSelect, handleExpand, handleFocus)651 : composeHandlers(onClick, handleFocus),652 className: cx(getClasses(baseClassNames.node), baseClassNames.branch)653 };654 };655 return isBranchNode(data, element.id) ? (656 <li657 role="treeitem"658 aria-expanded={expandedIds.has(element.id)}659 aria-selected={getAriaSelected({660 isSelected: selectedIds.has(element.id),661 isDisabled: disabledIds.has(element.id),662 multiSelect663 })}664 aria-setsize={setsize}665 aria-posinset={posinset}666 aria-level={level}667 disabled={disabledIds.has(element.id)}668 aria-disabled={disabledIds.has(element.id)}669 tabIndex={tabbableId === element.id ? 0 : -1}670 ref={x => (nodeRefs.current[element.id] = x)}671 className={baseClassNames.branchWrapper}672 >673 {nodeRenderer({...
Tag.js
Source:Tag.js
...172 data-has-trailing-icon={removable}173 tabIndex={finalDisabled ? null : -1}174 disabled={finalDisabled || null}175 aria-disabled={finalDisabled}176 aria-selected={this.getAriaSelected()}177 onClick={this.onClick}178 onFocus={this.focus}179 onBlur={this.blur}180 onKeyDown={this.onKeyDown}181 ref={this.getTagRoot}182 >183 { this.props.children }184 { removable ? (185 <TagClose onClick={this.handleCloseClick} />186 ) : null }187 </TagRoot>188 );189 }190}...
utils.js
Source:utils.js
1import { useRef, useEffect } from "react";2export const composeHandlers = (...handlers) => event => {3 for (const handler of handlers) {4 handler && handler(event);5 if (event.defaultPrevented) {6 break;7 }8 }9};1011export const difference = (a, b) => {12 const s = new Set();13 for (const v of a) {14 if (!b.has(v)) {15 s.add(v);16 }17 }18 return s;19};2021export const symmetricDifference = (a, b) => {22 return new Set([...difference(a, b), ...difference(b, a)]);23};2425export const usePrevious = x => {26 const ref = useRef();27 useEffect(() => {28 ref.current = x;29 }, [x]);30 return ref.current;31};3233export const isBranchNode = (data, i) =>34 data[i].children != null && data[i].children.length > 0;3536export const focusRef = ref => {37 if (ref != null && ref.focus) {38 ref.focus();39 }40};4142export const getParent = (data, id) => {43 return data[id].parent;44};4546export const getDescendants = (data, id, disabledIds) => {47 const descendants = [];48 const getDescendantsHelper = (data, id) => {49 const node = data[id];50 if (node.children == null) return;51 for (const childId of node.children.filter(x => !disabledIds.has(x))) {52 descendants.push(childId);53 getDescendantsHelper(data, childId);54 }55 };56 getDescendantsHelper(data, id);57 return descendants;58};5960export const getSibling = (data, id, diff) => {61 const parentId = getParent(data, id);62 if (parentId != null) {63 const parent = data[parentId];64 const index = parent.children.indexOf(id);65 const siblingIndex = index + diff;66 if (parent.children[siblingIndex]) {67 return parent.children[siblingIndex];68 }69 }70 return null;71};7273export const getLastAccessible = (data, id, expandedIds) => {74 let node = data[id];75 const isRoot = data[0].id === id;76 if (isRoot) {77 node = data[data[id].children[data[id].children.length - 1]];78 }79 while (expandedIds.has(node.id) && isBranchNode(data, node.id)) {80 node = data[node.children[node.children.length - 1]];81 }82 return node.id;83};8485export const getPreviousAccessible = (data, id, expandedIds) => {86 if (id === data[0].children[0]) {87 return null;88 }89 const previous = getSibling(data, id, -1);90 if (previous == null) {91 return getParent(data, id);92 }93 return getLastAccessible(data, previous, expandedIds);94};9596export const getNextAccessible = (data, id, expandedIds) => {97 let nodeId = data[id].id;98 if (isBranchNode(data, nodeId) && expandedIds.has(nodeId)) {99 return data[nodeId].children[0];100 }101 while (true) {102 const next = getSibling(data, nodeId, 1);103 if (next != null) {104 return next;105 }106 nodeId = getParent(data, nodeId);107108 //we have reached the root so there is no next accessible node109 if (nodeId == null) {110 return null;111 }112 }113};114115export const propagateSelectChange = (data, ids, selectedIds, disabledIds) => {116 const changes = { every: new Set(), some: new Set(), none: new Set() };117 for (const id of ids) {118 let currentId = id;119 while (true) {120 const parent = getParent(data, currentId);121 if (parent === 0 || disabledIds.has(parent)) break;122 const enabledChildren = data[parent].children.filter(123 x => !disabledIds.has(x)124 );125 if (enabledChildren.length === 0) break;126 const some = enabledChildren.some(x => selectedIds.has(x));127 if (!some) {128 changes.none.add(parent);129 } else {130 if (enabledChildren.every(x => selectedIds.has(x))) {131 changes.every.add(parent);132 } else {133 changes.some.add(parent);134 }135 }136 currentId = parent;137 }138 }139 return changes;140};141142export const getAccessibleRange = ({ data, expandedIds, from, to }) => {143 let range = [];144 let max_loop = Object.keys(data).length;145 let count = 0;146 let currentId = from;147 range.push(from);148 if (from < to) {149 while (count < max_loop) {150 currentId = getNextAccessible(data, currentId, expandedIds);151 range.push(currentId);152 if (currentId == null || currentId === to) break;153 count += 1;154 }155 } else if (from > to) {156 while (count < max_loop) {157 currentId = getPreviousAccessible(data, currentId, expandedIds);158 range.push(currentId);159 if (currentId == null || currentId === to) break;160 count += 1;161 }162 }163 return range;164};165166export const flattenTree = function(tree) {167 let count = 0;168 const flattenedTree = [];169170 const flattenTreeHelper = function(tree, parent) {171 tree.id = count;172 tree.parent = parent;173 flattenedTree[count] = tree;174 count += 1;175 if (tree.children == null || tree.children.length === 0) return;176 for (const child of tree.children) {177 flattenTreeHelper(child, tree.id);178 }179 tree.children = tree.children.map(x => x.id);180 };181182 flattenTreeHelper(tree, null);183 return flattenedTree;184};185186export const getAriaSelected = ({ isSelected, isDisabled, multiSelect }) => {187 if (isDisabled) return undefined;188 if (multiSelect) return isSelected;189 return isSelected ? true : undefined;190};191192export const propagatedIds = (data, ids, disabledIds) =>193 ids.concat(194 ...ids195 .filter(id => isBranchNode(data, id))196 .map(id => getDescendants(data, id, disabledIds))197 );198199const isIE = () => window.navigator.userAgent.match(/Trident/);200201export const onComponentBlur = (event, treeNode, callback) => {202 if (isIE()) {203 setTimeout(204 () => !treeNode.contains(document.activeElement) && callback(),205 0206 );207 } else {208 !treeNode.contains(event.nativeEvent.relatedTarget) && callback();209 }
...
ActiveList.js
Source:ActiveList.js
...21 // const getAriaSelected = index => {22 // return ariaSelection.current.children[index]23 // }24 // useEffect(() => {25 // const selected = getAriaSelected(activeIndex)26 // if (selected) {27 // selected.setAttribute('tabindex', 0)28 // }29 // }, [])30 // useEffect(() => {31 // const prevSelected = getAriaSelected(prevAriaIndex)32 // const selected = getAriaSelected(ariaCurrentIndex)33 // if (prevSelected) {34 // prevSelected.setAttribute('tabindex', -1)35 // selected.setAttribute('tabindex', 0)36 // selected.focus()37 // }38 // }, [ariaCurrentIndex])39 // const handleKeyboardNav = (e, item, i) => {40 // switch (e.key) {41 // case 'ArrowUp':42 // if (ariaCurrentIndex > activeMinIndex) {43 // setAriaCurrentIndex(i - 1)44 // }45 // break46 // case 'ArrowDown':47 // if (ariaCurrentIndex < activeMaxIndex) {48 // setAriaCurrentIndex(i + 1)49 // }50 // break51 // case 'Tab':52 // // const selected = getAriaSelected(ariaCurrentIndex)53 // // const active = getAriaSelected(activeIndex)54 // // selected.setAttribute('tabindex', -1)55 // // active.setAttribute('tabindex', 0)56 // break57 // case 'Enter':58 // case ' ':59 // if (activeIndex !== ariaCurrentIndex) {60 // selectCallback(item, i)61 // }62 // break63 // }64 // }65 const handleScrollToBottom = container =>66 animateScroll.scrollToBottom({67 duration: 500,...
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.$('text=Get started');7 const ariaSelected = await elementHandle.evaluate(element => {8 return element.getAriaSelected();9 });10 console.log(ariaSelected);11 await browser.close();12})();13import {chromium} from 'playwright';14(async () => {15 const browser = await chromium.launch();16 const context = await browser.newContext();17 const page = await context.newPage();18 const elementHandle = await page.$('text=Get started');19 const ariaSelected = await elementHandle.evaluate(element => {20 return element.getAriaSelected();21 });22 console.log(ariaSelected);23 await browser.close();24})();
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const page = await browser.newPage();5 await page.click('text=Show/Hide Code');6 await page.click('text=Run');7 await page.click('select');
Using AI Code Generation
1const { getAriaSelected } = 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 ariaSelected = await getAriaSelected(await page.$('#api-class-page'));8 console.log(ariaSelected);9 await browser.close();10})();
Using AI Code Generation
1const { getAriaSelected } = 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 element = await page.$('text=Get started');8 console.log(await getAriaSelected(element));9 await browser.close();10})();
Using AI Code Generation
1const { getAriaSelected } = 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 ariaSelected = await getAriaSelected(page, input);8 await browser.close();9})();10const { getAttribute } = require('playwright/lib/server/dom.js');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 ariaSelected = await getAttribute(page, input, 'aria-selected');17 await browser.close();18})();
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const page = await browser.newPage();5 await page.click('text=Docs');6 console.log(await page.getAriaSelected('text=Docs'));7 await browser.close();8})();9await page.getAriaSelected(selector[, options])10const { chromium } = require('playwright');11(async () => {12 const browser = await chromium.launch();13 const page = await browser.newPage();14 await page.click('text=Docs');15 console.log(await page.getAriaSelected('text=Docs'));16 await browser.close();17})();18const { chromium } = require('playwright');19(async () => {20 const browser = await chromium.launch();21 const page = await browser.newPage();22 await page.click('text=Docs');23 const ariaSelected = await page.getAriaSelected('text=Docs');24 console.log(ariaSelected);25 await browser.close();26})();27const { chromium } = require('playwright');28(async () => {29 const browser = await chromium.launch();30 const page = await browser.newPage();31 await page.click('text=Docs');
Using AI Code Generation
1const { getAriaSelected } = require('@playwright/test');2const { test, expect } = require('@playwright/test');3test('aria-selected', async ({ page }) => {4 await page.waitForSelector('text=Get started');5 const ariaSelected = await getAriaSelected(page, 'text=Get started');6 expect(ariaSelected).toBe('true');7});8module.exports = {9 use: {10 internal: {11 getAriaSelected: require('./test.js').getAriaSelected,12 },13 },14};15const { getAriaSelected } = require('@playwright/test');16const { test, expect } = require('@playwright/test');17module.exports = {18};19module.exports = {20 use: {21 internal: {22 getAriaSelected: require('./test.js').getAriaSelected,23 },24 },25};
Using AI Code Generation
1const { getAriaSelected } = require('@playwright/test/lib/server/frames');2const { test } = require('@playwright/test');3test('test', async ({ page }) => {4 const checkbox = await page.$('input#ex1');5 console.log(await getAriaSelected(checkbox));6});
Using AI Code Generation
1const { getAriaSelected } = require('@playwright/test/lib/server/frames');2const { test } = require('@playwright/test');3test('get aria-selected', async ({ page }) => {4 await page.setContent(`5 `);6 const tab1 = await page.$('div[role="tab"]:nth-of-type(1)');7 const tab2 = await page.$('div[role="tab"]:nth-of-type(2)');8 const ariaSelected1 = await getAriaSelected(tab1);9 const ariaSelected2 = await getAriaSelected(tab2);10 expect(ariaSelected1).toBe(false);11 expect(ariaSelected2).toBe(true);12});13const { getAttribute } = require('@playwright/test/lib/server/frames');14const { test } = require('@playwright/test');15test('get attribute', async ({ page }) => {16 await page.setContent(`17 `);18 const tab1 = await page.$('div[role="tab"]:nth-of-type(1)');19 const tab2 = await page.$('div[role="tab"]:nth-of-type(2)');20 const ariaSelected1 = await getAttribute(tab1, 'aria-selected');21 const ariaSelected2 = await getAttribute(tab2, 'aria-selected');22 expect(ariaSelected1).toBe('false');23 expect(ariaSelected2).toBe('true');24});
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?
