Best JavaScript code snippet using playwright-internal
autocomplete-input.js
Source: autocomplete-input.js
...88 this.options = options;89 this.selectionIdx = -1;90 // Choose the item if the enter key was pressed before the search completed.91 if (this.enterPressed && options.length === 1) {92 this._selectOption(options[0]);93 }94 if (!options.length) {95 this.noResultsFound = true;96 }97 }).catch((response) => {98 // An undefined response means no search was done99 if (response !== undefined) {100 this.house.handleErrorResponse(response);101 }102 })103 .finally(() => {104 this.isSearching = false;105 this.enterPressed = false;106 });107 }108 /**109 * When input field is focused, clear out the results, and let the parent know110 * focus was received.111 */112 @action113 focusEvent() {114 this.isFocused = true;115 this.selectionIdx = -1;116 this.options = [];117 this.hasSelected = false;118 if (this.args.form) {119 this.args.form.preventSubmit = true;120 }121 if (this.args.onFocus) {122 const promise = this.args.onFocus();123 if (promise) {124 this._runSearch(promise);125 }126 }127 }128 /**129 * Handle arrow {up/down}, escape and enter keys.130 *131 * Arrow {Up/Down} change the selected item132 * Enter:133 * - if only one item, select that134 * - if searching, delay until results are received, and if only one result, select that135 * - if item selected, use that136 * @param {KeyboardEvent} event137 */138 @action139 keyUpEvent(event) {140 const key = event.key;141 const oldSelection = this.selectionIdx;142 switch (key) {143 case 'ArrowUp':144 if (this.selectionIdx === -1) {145 // No selection yet.146 this.selectionIdx = 0;147 } else if (this.selectionIdx >= 1) {148 this.selectionIdx = this.selectionIdx - 1;149 }150 break;151 case 'ArrowDown':152 if (this.selectionIdx === -1) {153 // No selection yet.154 this.selectionIdx = 0;155 } else if (this.selectionIdx < (this.options.length - 1)) {156 this.selectionIdx = this.selectionIdx + 1;157 }158 break;159 case 'Enter':160 if (this.isSearching) {161 this.enterPressed = true;162 } else if (this.options) {163 if (this.options.length === 1) {164 this._selectOption(this.options[0]);165 } else if (this.selectionIdx !== -1) {166 this._selectOption(this.options[this.selectionIdx]);167 }168 }169 break;170 case 'Escape':171 if (this.isFocused) {172 this.inputElement.blur();173 }174 break;175 default:176 return true;177 }178 event.stopPropagation();179 // Scroll selected item into view180 if (oldSelection != this.selectionIdx && this.resultsElement) {181 const item = this.resultsElement.querySelector(`[data-result-id="${this.selectionIdx}"]`);182 if (item) {183 item.scrollIntoView({184 behavior: 'smooth',185 block: 'nearest',186 inline: 'start'187 });188 }189 }190 return false;191 }192 /**193 * When the input element is blurred, clear out the results box after delaying.194 * Don't remove the results box before the user has had a change to click the link.195 */196 @action197 blurEvent() {198 if (this.args.form) {199 this.args.form.preventSubmit = false;200 }201 if (!this.isFocused) {202 return true;203 }204 setTimeout(() => {205 schedule('afterRender', () => {206 if (this.args.selectOnBlur && this.options.length > 0) {207 if (this.options.length === 1 || this.selectionIdx === -1) {208 this._selectOption(this.options[0]);209 } else {210 this._selectOption(this.options[this.selectionIdx]);211 }212 }213 this.isFocused = false;214 })215 }, 100);216 return true;217 }218 /**219 * Handle either a mousedown or click event on a result item.220 *221 * @param {object} option222 * @param {Event} event223 */224 @action225 clickSelection(option, event) {226 event.stopImmediatePropagation();227 this._selectOption(option);228 return false;229 }230 /**231 * Process the selected item. Callback to calling component, and blur the input element.232 *233 * @param {object} option234 * @private235 */236 _selectOption(option) {237 if (this.hasSelected) {238 return;239 }240 const onSelect = this.args.onSelect;241 if (!onSelect) {242 return;243 }244 onSelect(option);245 this.isFocused = false;246 this.hasSelected = true;247 this.selectionIdx = -1;248 if (!this.args.keepFocusOnSelect) {249 this.inputElement.blur();250 }...
dropdown.js
Source: dropdown.js
1M.Dropdown = M.Class.extend({2 3 // this function will run automatically on new M.Dropdown()4 initialize : function (options) {5 M.setOptions(this, options); // will put options in this.options6 this._initLayout();7 },8 _initLayout : function () {9 // set class name10 var className = 'base-layer-dropdown-container ';11 if (this.options.className) className += this.options.className;12 this._baseLayerDropdownContainer = M.DomUtil.create('div', className, this.options.appendTo);13 this._initLayoutActiveLayers();14 this._initEventsListners();15 },16 _initLayoutActiveLayers : function (options) {17 18 this._activeLayersWrap = M.DomUtil.create('div', 'baselayer-dropdown-wrapper', this._baseLayerDropdownContainer);19 this._selectWrap = M.DomUtil.create('div', 'chrome chrome-content active-layer select-wrap', this._activeLayersWrap);20 this._select = M.DomUtil.create('div', 'form-combobox_inner', this._selectWrap);21 this._form_combobox_input = M.DomUtil.create('div', 'form-combobox_input', this._select);22 this._form_combobox__options_wrapper = M.DomUtil.create('div', 'form-combobox_options_wrapper', this._select);23 this._form_combobox__options = M.DomUtil.create('ul', 'form-combobox_options', this._form_combobox__options_wrapper);24 this.options.options = [];25 // Create select options26 this.options.content.forEach(function(selectOption, i) {27 var option = this.options.options[i] = M.DomUtil.create('li', 'form-combobox_option item', this._form_combobox__options, selectOption.title);28 if (selectOption.disabled) {29 M.DomUtil.addClass(option, "disabled-option");30 M.DomEvent.on(option, 'click', function (e) {31 M.DomEvent.stop(e);32 }, this);33 return;34 }35 option.setAttribute('data-value', selectOption.value);36 option.id = selectOption.value;37 if ( selectOption.isSelected ) {38 M.DomUtil.addClass(option, 'hover');39 this._selectOption = option;40 this._hoverItem = option;41 this._form_combobox_input.setAttribute('data-value', selectOption.value);42 this._form_combobox_input.innerHTML = selectOption.title;43 }44 M.DomEvent.on(option, 'click', this._changeActive, this);45 M.DomEvent.on(option, 'mouseover', this._optionHover, this);46 M.DomEvent.on(option, 'mousemove', this._optionHover, this);47 }.bind(this));48 if (!this._selectOption && this.options.placeholder) {49 this._form_combobox_input.setAttribute('data-value', null);50 this._form_combobox_input.innerHTML = this.options.placeholder; 51 }52 this._form_combobox_input.setAttribute("tabindex", 1);53 M.DomEvent.on(this._form_combobox_input, 'keydown', this._onKeydown, this);54 55 },56 setFromUuid : function (layerUuid) {57 58 // Select layer we're working on59 // var options = this.layerSelector.options.options;60 var options = this.options.options;61 for (var k in options) {62 var isElem = M.Tools.isElement(options[k]);63 if ( !isElem ) return;64 var uuid = options[k].getAttribute('data-value');65 if ( uuid == layerUuid ) {66 var title = options[k].innerHTML;67 this.setValue({68 value: uuid,69 title: title70 });71 }72 }73 },74 _initEventsListners : function () {75 M.DomEvent.on(this._select, 'click', this._toggleListItems, this);76 M.DomEvent.on(this._selectWrap, 'click', function (e) {77 M.DomEvent.stop(e);78 }, this);79 M.Mixin.Events.on('appClick', this._hideListItems, this);80 },81 _toggleListItems : function () {82 if (M.DomUtil.hasClass(this._form_combobox__options_wrapper, "open")) {83 M.DomUtil.removeClass(this._form_combobox__options_wrapper, "open");84 } else {85 M.DomUtil.addClass(this._form_combobox__options_wrapper, "open");86 }87 },88 _showListItems : function () {89 if (!M.DomUtil.hasClass(this._form_combobox__options_wrapper, "open")) {90 M.DomUtil.addClass(this._form_combobox__options_wrapper, "open");91 }92 },93 _hideListItems : function () {94 if (M.DomUtil.hasClass(this._form_combobox__options_wrapper, "open")) {95 M.DomUtil.removeClass(this._form_combobox__options_wrapper, "open");96 }97 },98 _changeActive : function (e) {99 M.DomEvent.stop(e);100 this._toggleListItems();101 this.setValue({102 value: e.currentTarget.getAttribute('data-value'),103 title: e.currentTarget.innerHTML104 });105 },106 getValue: function () {107 return {108 value: this._form_combobox_input.getAttribute('data-value'),109 title: this._form_combobox_input.innerHTML110 }111 },112 setValue: function (selectOption) {113 this._form_combobox_input.setAttribute('data-value', selectOption.value);114 this._form_combobox_input.innerHTML = selectOption.title;115 if (this._selectOption && M.DomUtil.hasClass(this._selectOption, "hover")) {116 M.DomUtil.removeClass(this._selectOption, 'hover');117 }118 119 this._selectOption = document.getElementById(selectOption.value);120 M.DomUtil.addClass(this._selectOption, 'hover');121 this._hoverItem = this._selectOption;122 this.options.fn(selectOption.value);123 },124 _optionHover: function (e) {125 if (this._hoverItem && M.DomUtil.hasClass(this._hoverItem, "hover")) {126 M.DomUtil.removeClass(this._hoverItem, "hover"); 127 }128 this._hoverItem = e.currentTarget;129 M.DomUtil.addClass(e.currentTarget, "hover");130 },131 _hoverDown: function () {132 if (this._hoverItem.nextSibling && M.DomUtil.hasClass(this._hoverItem.nextSibling, "form-combobox_option")) {133 M.DomUtil.removeClass(this._hoverItem, "hover");134 this._hoverItem = this._hoverItem.nextSibling;135 if (this._hoverItem && M.DomUtil.hasClass(this._hoverItem, "disabled-option")) {136 this._hoverDown();137 return;138 }139 M.DomUtil.addClass(this._hoverItem, "hover");140 }141 },142 _hoverUp: function () {143 if (this._hoverItem.previousSibling && M.DomUtil.hasClass(this._hoverItem.previousSibling, "form-combobox_option")) {144 M.DomUtil.removeClass(this._hoverItem, "hover");145 this._hoverItem = this._hoverItem.previousSibling;146 if (this._hoverItem && M.DomUtil.hasClass(this._hoverItem, "disabled-option")) {147 this._hoverUp();148 return;149 }150 M.DomUtil.addClass(this._hoverItem, "hover");151 }152 },153 _onKeydown: function (e) {154 var key = event.which ? event.which : event.keyCode;155 if (key === 32) {156 this._showListItems();157 }158 if (key === 27) {159 this._hideListItems();160 }161 if (key === 40) {162 this._hoverDown();163 }164 if (key === 38) {165 this._hoverUp();166 }167 if (key === 13) {168 this.setValue({169 value: this._hoverItem.id,170 title: this._hoverItem.innerHTML171 });172 this._hideListItems();173 }174 if (key === 38 || key === 40 || key === 27 || key === 32 || key === 13) {175 M.DomEvent.stop(e); 176 }177 if ( key > 48 && key < 90 ) {178 this._setKey(key);179 }180 181 },182 _setKey : function (key) {183 // Get character184 var _char = M.Tools.keyMap(key).toUpperCase();185 // Go through list of options, jump to first hit186 for ( var k in this.options.content ) {187 var c = this.options.content[k];188 // Stop if list item is not an object for some reason189 if ( typeof c !== 'object' ) return;190 // Get first character in option191 var _firstChar = c.title.charAt(0).toUpperCase();192 // If it's a match193 if ( _char == _firstChar ) {194 // Set value on list195 this.setValue({196 value: c.value,197 title: c.title198 });199 // Stop200 return;201 } 202 }203 204 }...
select.js
Source: select.js
...53 t.menu.is(":visible") ? t._hideMenu() : t.options.remote.url ? t._loadRemoteData(t._showMenu()) : t._showMenu()54 }),55 this.menu.on("click", ".option",56 function(e) {57 t._selectOption($(e.target).closest(".option")),58 t.menu.detach()59 }),60 t.options.remote.url ? this._loadRemoteData() : this.loadDataDeferred.resolve()61 },62 _showMenu: function() {63 var t, e, i, n, o, l, h, u, d, r = this;64 this.menu.css({65 width: "",66 height: r.options.height || "",67 left: "-9999em",68 top: "-9999em"69 }).appendTo(s.body),70 t = this.menu.css("width", "").width(),71 i = a.width(),72 n = a.height(),73 o = this.element.outerWidth(!0),74 l = this.element.outerHeight(!0),75 h = this.element.offset(),76 o > t && (t = o - 2, this.menu.css("width", t)),77 e = this.menu.height(),78 u = h.left,79 u + t > i && (u = i - t),80 d = h.top + l - 1,81 d + e > n && (d = h.top - e - 1),82 this.menu.css({83 left: u,84 top: d85 }).appendTo(s.body),86 a.on("mousedown." + this._NS,87 function(t) {88 var e;89 t.target != r.element[0] && t.target != r.menu[0] && (e = $(t.target).parents()) && -1 == e.index(r.element) && -1 == e.index(r.menu) && r._hideMenu()90 })91 },92 _hideMenu: function() {93 this.menu.detach(),94 a.off("mousedown." + this._NS)95 },96 _setLabel: function(t) {97 this.label.text(t || ""),98 this.label.data("label", t)99 },100 _selectOption: function(t, e) {101 t || (t = this.defaultOption),102 this._option && t[0] === this._option[0] || (this._option && this._option.removeClass(n), t.addClass(n), this._option = t, this._setLabel(t.data("label")), e || this.emit("change", this.value()))103 },104 _loadRemoteData: function(t) {105 var e = this,106 i = e.value(),107 s = $.getJSON(e.options.remote.url);108 s.done(function(s) {109 if (0 == s.code && s.data) {110 e.reloadOptions();111 for (var a in s.data) e.addOption({112 label: s.data[a][e.options.remote.label],113 value: s.data[a][e.options.remote.value]114 });115 e._selectOption(e._valuesMap[i], !0)116 }117 if ($.isFunction(t)) {118 var n = [].slice.call(arguments).splice(0, 1);119 t.apply(e, n)120 }121 }),122 s.always(function() {123 e.loadDataDeferred.resolve()124 })125 },126 addOption: function(t) {127 var e, i = $('<span class="option disable-select"><i></i><strong></strong></span>').appendTo(this.menu);128 if ($.isPlainObject(t) || (t = {129 label: t130 }), e = void 0 === t.value ? t.label: t.value, e in this._valuesMap) throw new Error("option with value " + e + " already added");131 return t.classes && i.addClass(t.classes),132 i.find("strong").text(t.label),133 i.data("label", t.label),134 i.data("value", e),135 this._valuesMap[e] = i,136 i137 },138 clearOptions: function() {139 return this.value(this._defaultValue),140 this._valuesMap = {},141 this.menu.children().not(this.defaultOption).remove(),142 this143 },144 reloadOptions: function() {145 return this._valuesMap = {},146 this.menu.children().not(this.defaultOption).remove(),147 this148 },149 value: function() {150 if (arguments.length) {151 var t = this,152 e = arguments;153 return "pending" == this.loadDataDeferred.state() ? this.loadDataDeferred.done(function() {154 return t._selectOption(t._valuesMap[e[0]], !0),155 t156 }) : (t._selectOption(t._valuesMap[e[0]], !0), t)157 }158 return this._option ? this._option.data("value") : ""159 },160 text: function() {161 return this.label.data("label") || ""162 },163 clear: function() {164 this._selectOption(this.defaultOption, !0)165 },166 reset: function() {167 this.value(this._defaultValue),168 this.emit("change", this.value())169 }170 },171 e);172 return o...
filter.js
Source: filter.js
1import Visit from "./visit.js";2import Request from "./request.js";3import {Input, Select} from "./classes.js";4export default class Filter {5 constructor() {6 this._searchContainer = document.querySelector(".filter-container");7 this._getVisitsData();8 this._createInput();9 this._createSelectUrgency();10 this._createSelectStatus();11 }12 static filterHide(){13 let filter = document.querySelector(".filter");14 filter.classList.add("hidden");15 }16 static filterShow(){17 let filter = document.querySelector(".filter");18 filter.classList.remove("hidden");19 new Filter();20 }21 _createInput() {22 this._input = new Input("search");23 this._searchContainer.append(this._input);24 }25 _createSelectUrgency() {26 const urgency = ["All", "Regular", "Priority", "Urgent"];27 this._urgencySelect = new Select("searchUrgency");28 const urgencyTitle = document.createElement("span");29 urgencyTitle.classList.add("filter_urgency-title");30 urgencyTitle.innerText = "ÐÑбеÑиÑе ÑÑоÑноÑÑÑ Ð¿Ð¾ÑеÑениÑ:";31 urgency.forEach(e => {32 this._selectOption = document.createElement("option");33 this._selectOption.text = e;34 this._urgencySelect.options.add(this._selectOption);35 });36 this._searchContainer.append(urgencyTitle);37 this._searchContainer.append(this._urgencySelect);38 }39 _createSelectStatus() {40 const status = ["All", "Open", "Done"];41 this._statusSelect = new Select("searchStatus");42 const statusTitle = document.createElement("span");43 statusTitle.classList.add("filter_urgency-title");44 statusTitle.innerText = "ÐÑбеÑиÑе ÑÑаÑÑÑ Ð·Ð°Ñвки:";45 status.forEach(e => {46 this._selectOption = document.createElement("option");47 this._selectOption.text = e;48 this._statusSelect.options.add(this._selectOption);49 });50 this._searchContainer.append(statusTitle);51 this._searchContainer.append(this._statusSelect);52 }53 54 _getVisitsData() {55 new Promise((resolve, reject) => {56 resolve(new Request("getAllVisits"))57 })58 .then(data => {59 this._filter(data);60 this._filterByUrgency(data);61 this._filterByStatus(data);62 })63 }64 _filter(allVisits) {65 this._input.addEventListener("input", function () {66 let visitsArray = [];67 let inputedValue = this.value.trim();68 let inputedData = new RegExp(inputedValue, "i");69 if (inputedValue !== "") {70 allVisits.forEach((el) => {71 let inputedName = el.fullName.search(inputedData);72 let inputedDoctor = el.doctor.search(inputedData);73 let inputedDiscription = el.shortDiscriptionsOfVisit.search(inputedData);74 if (inputedName !== -1 || inputedDoctor !== -1 || inputedDiscription !== -1) {75 visitsArray.push(el);76 }77 });78 Visit.renderAllVisits(visitsArray);79 } else {80 Visit.renderAllVisits(allVisits);81 }82 });83 }84 _filterByUrgency(allVisits) {85 this._urgencySelect.addEventListener("change", (e) => {86 this._input.value = "";87 e.preventDefault();88 e.stopPropagation();89 let filteredUrgencyArray = [];90 if (e.currentTarget.value === "All") {91 Visit.renderAllVisits(allVisits);92 this._filter(allVisits);93 } else {94 allVisits.forEach(elem => {95 if (elem.urgency === e.currentTarget.value) {96 filteredUrgencyArray.push(elem);97 } else {98 let visitsContainer = document.querySelector(".visits");99 visitsContainer.innerHTML = "No data found";100 }101 });102 this._filter(filteredUrgencyArray);103 Visit.renderAllVisits(filteredUrgencyArray);104 }105 });106 }107 _filterByStatus(allVisits) {108 this._statusSelect.addEventListener("change", (e) => {109 this._input.value = "";110 e.preventDefault();111 e.stopPropagation();112 let filteredStatusArray = [];113 if (e.currentTarget.value === "All") {114 Visit.renderAllVisits(allVisits);115 this._filter(allVisits);116 } else {117 allVisits.forEach(elem => {118 if (elem.status === e.currentTarget.value) {119 filteredStatusArray.push(elem);120 }121 });122 this._filter(filteredStatusArray);123 Visit.renderAllVisits(filteredStatusArray);124 }125 });126 }...
form.po.js
Source: form.po.js
...9 return this._getContainer()10 .all(by.css(`.le-item`))11 .get(index);12 }13 _selectOption(index, name, value) {14 this._getItem(index)15 .element(by.valueBind(`${name} & validate`))16 .element(by.css(`option[value=${value}]`))17 .click();18 return browser.sleep(200);19 }20 _setText(index, name, value) {21 this._getItem(index)22 .element(by.valueBind(`${name} & validate`))23 .clear()24 .sendKeys(value);25 return browser.sleep(200);26 }27 clickRemove(index) {28 this._getItem(index)29 .element(by.css(`.le-remove-btn`))30 .click();31 return browser.sleep(200);32 }33 clickAdd() {34 this._getContainer()35 .element(by.css(`.le-add-btn`))36 .click();37 return browser.sleep(200);38 }39}40class PhoneNumberListEditorPO extends ListEditorPO {41 constructor() {42 super('phoneNumbers');43 }44 setType(index, value) {45 return this._selectOption(index, 'type', value);46 }47 setNumber(index, value) {48 return this._setText(index, 'number', value);49 }50}51class EmailAddressListEditorPO extends ListEditorPO {52 constructor() {53 super('emailAddresses');54 }55 setType(index, value) {56 return this._selectOption(index, 'type', value);57 }58 setAddress(index, value) {59 return this._setText(index, 'address', value);60 }61}62class AddressListEditorPO extends ListEditorPO {63 constructor() {64 super('addresses');65 }66 setType(index, value) {67 return this._selectOption(index, 'type', value);68 }69 setNumber(index, value) {70 return this._setText(index, 'number', value);71 }72 setStreet(index, value) {73 return this._setText(index, 'street', value);74 }75 setPostalCode(index, value) {76 return this._setText(index, 'postalCode', value);77 }78 setState(index, value) {79 return this._setText(index, 'state', value);80 }81 setCountry(index, value) {82 return this._setText(index, 'country', value);83 }84}85class SocialProfileListEditorPO extends ListEditorPO {86 constructor() {87 super('socialProfiles');88 }89 setType(index, value) {90 return this._selectOption(index, 'type', value);91 }92 setUsername(index, value) {93 return this._setText(index, 'username', value);94 }95}96export class ContactFormPO {97 constructor() {98 this.phoneNumbers = new PhoneNumberListEditorPO();99 this.emailAddresses = new EmailAddressListEditorPO();100 this.addresses = new AddressListEditorPO();101 this.socialProfiles = new SocialProfileListEditorPO();102 }103 _setText(name, value) {104 element(by.valueBind(`contact.${name} & validate`))...
index.js
Source: index.js
...29 }30 _computeOptionProps (optIndex) {31 return {32 className: optIndex === this.state.currentIndex ? 'checked option-with-icon' : '',33 onClick: () => this._selectOption(optIndex)34 };35 }36 _mapOption (opt, optIndex) {37 const { _computeOptionProps } = this;38 const optionProps = _computeOptionProps(optIndex);39 const isChecked = optIndex === this.state.currentIndex;40 return (41 <div {...optionProps}>42 <span>{opt}</span>43 {isChecked && <img src={checkedIcon}/>}44 </div>45 );46 }47 _getClassName () {...
questions.js
Source: questions.js
1import { DefaultStatement } from '../../constants/default-statement';2import { QuestionEvent } from '../../constants/events/questions';3import { LearningLockerConfig } from '../../constants/learning-locker-config';4import { InteractionType } from '../../constants/interaction-types';5import { xAPIDataService } from '../xapi-data';6const _selectOption = function(event, xAPIEvent) {7 const CORRECT = event.detail.questionsComponent.correctQuestions;8 const NUM_QUESTIONS = event.detail.questionsComponent.numQuestions;9 const ANSWERED = Object.keys(event.detail.questionsComponent.answers).length;10 const scaled = CORRECT / NUM_QUESTIONS;11 const max = NUM_QUESTIONS;12 const success = CORRECT === NUM_QUESTIONS;13 const completion = ANSWERED === NUM_QUESTIONS;14 const statement = Object.assign(DefaultStatement.get(), xAPIEvent.statement, {15 object: {16 id: `${LearningLockerConfig.OBJECTS}/interactions/#answer`,17 definition: {18 interactionType: InteractionType.CHOICE,19 type: 'http://adlnet.gov/expapi/activities/assessment',20 }21 },22 result: {23 score: { scaled, max },24 success,25 completion26 }27 });28 xAPIDataService.post(statement);29};30export const QuestionsEventsService = Object.freeze({31 eventList: [32 {33 id: 'select-option',34 callback: _selectOption,35 name: QuestionEvent.SELECT_OPTION,36 elementSelectors: ['.eao-form-input'],37 isValid: false,38 status: 'OFF',39 statement: {40 verb: {41 id: 'http://adlnet.gov/expapi/verbs/answered',42 display: {'en-US': 'answered'}43 }44 }45 },{46 id: 'submit-questions',47 callback: _selectOption,48 name: QuestionEvent.SUBMIT_QUESTIONS,49 elementSelectors: ['#eao-questions-bees'],50 isValid: false,51 status: 'OFF',52 statement: {53 verb: {54 id: 'http://adlnet.gov/expapi/verbs/attempted',55 display: {'en-US': 'attempted'}56 }57 }58 }59 ]...
SelectOption.test.js
Source: SelectOption.test.js
1"use strict";2var _react = _interopRequireDefault(require("react"));3var _enzyme = require("enzyme");4var _SelectOption = _interopRequireDefault(require("./SelectOption"));5function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }6describe('select options', function () {7 test('renders with value parameter successfully', function () {8 var view = (0, _enzyme.shallow)(_react["default"].createElement(_SelectOption["default"], {9 value: "test",10 sendRef: jest.fn()11 }));12 expect(view).toMatchSnapshot();13 });14 describe('hover', function () {15 test('renders with hover successfully', function () {16 var view = (0, _enzyme.shallow)(_react["default"].createElement(_SelectOption["default"], {17 isHovered: true,18 value: "test",19 sendRef: jest.fn()20 }));21 expect(view).toMatchSnapshot();22 });23 });24 describe('disabled', function () {25 test('renders disabled successfully', function () {26 var view = (0, _enzyme.shallow)(_react["default"].createElement(_SelectOption["default"], {27 isDisabled: true,28 value: "test",29 sendRef: jest.fn()30 }));31 expect(view).toMatchSnapshot();32 });33 });34 describe('is selected', function () {35 test('renders selected successfully', function () {36 var view = (0, _enzyme.shallow)(_react["default"].createElement(_SelectOption["default"], {37 isSelected: true,38 value: "test",39 sendRef: jest.fn()40 }));41 expect(view).toMatchSnapshot();42 });43 });...
Using AI Code Generation
1const { _selectOption } = require('playwright/lib/server/chromium/crPage');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 await page.click('text=Try it');8 await page.waitForTimeout(2000);9 const select = await page.$('select');10 const options = await select.$$('option');11 await _selectOption(page, select, options[1]);12 await page.waitForTimeout(2000);13 await browser.close();14})();
Using AI Code Generation
1const { _selectOption } = require('playwright/lib/server/chromium/crPage');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 await page.click('text=Get Started');8 await page.click('text=API Reference');9 await _selectOption(page, 'select[name="language"]', 'java');10 await page.click('text=API Reference');11 await page.click('text=Show all languages');12 await _selectOption(page, 'select[name="language"]', 'javascript');13 await page.click('text=Show all languages');14 await page.click('text=API Reference');15 await _selectOption(page, 'select[name="language"]', 'python');16 await page.click('text=API Reference');17 await page.click('text=Show all languages');18 await _selectOption(page, 'select[name="language"]', 'csharp');19 await page.click('text=Show all languages');20 await page.click('text=API Reference');21 await _selectOption(page, 'select[name="language"]', 'java');22 await page.click('text=API Reference');23 await page.click('text=Show all languages');24 await _selectOption(page, 'select[name="language"]', 'javascript');25 await page.click('text=Show all languages');26 await page.click('text=API Reference');27 await _selectOption(page, 'select[name="language"]', 'python');28 await page.click('text=API Reference');29 await page.click('text=Show all languages');30 await _selectOption(page, 'select[name="language"]', 'csharp');31 await page.click('text=Show all languages');32 await page.click('text=API Reference');33 await _selectOption(page, 'select[name="language"]', 'java');34 await page.click('text=API Reference');35 await page.click('text=Show all languages');36 await _selectOption(page, 'select[name="language"]', 'javascript');37 await page.click('text=Show all languages');38 await page.click('text=API Reference');39 await _selectOption(page, 'select[name="language"]', 'python');40 await page.click('text=API
Using AI Code Generation
1const { _selectOption } = require('playwright/lib/server/chromium/crPage');2const { chromium } = require('playwright');3(async () => {4 const browser = await chromium.launch();5 const page = await browser.newPage();6 await _selectOption(page, '#iframeResult', 'opel');7 await _selectOption(page, '#iframeResult', { label: 'Audi' });8 await _selectOption(page, '#iframeResult', { index: 2 });9 await _selectOption(page, '#iframeResult', ['saab', 'volvo']);10 await _selectOption(page, '#iframeResult', [{ label: 'Audi' }, { label: 'Volvo' }]);11 await _selectOption(page, '#iframeResult', [{ index: 1 }, { index: 2 }]);12 await _selectOption(page, '#iframeResult', 'all');13 await _selectOption(page, '#iframeResult', 'opel', { deselect: true });14 await _selectOption(page, '#iframeResult', { label: 'Audi' }, { deselect: true });15 await _selectOption(page, '#iframeResult', { index: 2 }, { deselect: true });16 await _selectOption(page, '#iframeResult', ['saab', 'volvo'], { deselect: true });17 await _selectOption(page, '#iframeResult', [{ label: 'Audi' }, { label: 'Volvo' }], { deselect: true });18 await _selectOption(page, '#iframeResult', [{ index: 1 }, { index: 2 }], { deselect: true });19 await _selectOption(page, '#iframeResult', 'all', { deselect: true });20 await browser.close();21})();
Using AI Code Generation
1const { _selectOption } = require('playwright/lib/client/selectorEngine');2const { chromium } = require('playwright');3(async () => {4 const browser = await chromium.launch();5 const context = await browser.newContext();6 const page = await context.newPage();7 await page.click('text=Images');8 await page.click('text=Videos');9 await page.click('text=News');10 await page.click('text=More');11 await page.click('text=Shopping');12 await page.click('text=Books');13 await page.click('text=Flights');14 await page.click('text=Finance');15 await page.click('text=Maps');16 await page.click('text=Translate');17 await page.click('text=Photos');18 await page.click('text=More');19 await page.click('text=Settings');20 await page.click('text=Tools');21 await page.click('text=Sign in');22 await page.click('text=Advanced search');23 await page.click('text=Search tools');24 await page.click('text=About');25 await page.click('text=Privacy');26 await page.click('text=Terms');27 await page.click('text=Settings');28 await page.click('text=Advertising');29 await page.click('text=Business');30 await page.click('text=How Search works');31 await page.click('text=All images');32 await page.click('text=Images');33 await page.click('text=Videos');34 await page.click('text=News');35 await page.click('text=More');36 await page.click('text=Shopping');37 await page.click('text=Books');38 await page.click('text=Flights');39 await page.click('text=Finance');40 await page.click('text=Maps');41 await page.click('text=Translate');42 await page.click('text=Photos');43 await page.click('text=More');44 await page.click('text=Settings');45 await page.click('text=Tools');46 await page.click('text=Sign in');47 await page.click('text=Advanced search');48 await page.click('text=Search tools');49 await page.click('text=About');50 await page.click('text=Privacy');51 await page.click('text=Terms');52 await page.click('text=Settings
Using AI Code Generation
1const { _selectOption } = require('playwright/lib/server/chromium/crPage');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 await page.waitForSelector('#iframeResult');8 const frame = page.frame({ name: 'iframeResult' });9 await frame.click('#cars');10 await _selectOption(frame, '#cars', 'Volvo', { timeout: 3000 });11 await _selectOption(frame, '#cars', 'Saab', { timeout: 3000 });12 await _selectOption(frame, '#cars', 'Opel', { timeout: 3000 });13 await _selectOption(frame, '#cars', 'Audi', { timeout: 3000 });14 await _selectOption(frame, '#cars', 'Mercedes', { timeout: 3000 });15 await _selectOption(frame, '#cars', 'Benz', { timeout: 3000 });16 await _selectOption(frame, '#cars', 'Ford', { timeout: 3000 });17 await _selectOption(frame, '#cars', 'Fiat', { timeout: 3000 });18 await _selectOption(frame, '#cars', 'Honda', { timeout: 3000 });19 await _selectOption(frame, '#cars', 'Jaguar', { timeout: 3000 });20 await _selectOption(frame, '#cars', 'Land Rover', { timeout: 3000 });21 await _selectOption(frame, '#cars', 'Mazda', { timeout: 3000 });22 await _selectOption(frame, '#cars', 'Volvo', { timeout: 3000 });23 await _selectOption(frame, '#cars', 'Volvo', { timeout: 3000 });24 await _selectOption(frame, '#cars', 'Volvo', { timeout: 3000 });25 await _selectOption(frame, '#cars', 'Volvo', { timeout: 3000 });26 await _selectOption(frame, '#cars', 'Volvo', { timeout: 3000 });27 await _selectOption(frame, '#cars', 'Volvo', { timeout: 3000 });
Using AI Code Generation
1const { _selectOption } = require('playwright/lib/server/chromium/crPage');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 await page.click('#L2AGLb');8 await page.click('input[aria-label="Search"]');9 await page.fill('input[aria-label="Search"]', 'Playwright');10 await page.click('text=Playwright');11 await page.click('text=Playwright');12 await _selectOption(page, 'select[name="q"]', 'text=Playwright');13 await page.click('text=Playwright');14 await page.click('text=Playwright');15 await _selectOption(page, 'select[name="q"]', 'text=Playwright');16 await page.click('text=Playwright');17 await page.click('text=Playwright');18 await _selectOption(page, 'select[name="q"]', 'text=Playwright');19 await page.click('text=Playwright');20 await page.click('text=Playwright');21 await _selectOption(page, 'select[name="q"]', 'text=Playwright');22 await page.click('text=Playwright');23 await page.click('text=Playwright');24 await _selectOption(page, 'select[name="q"]', 'text=Playwright');25 await page.click('text=Playwright');26 await page.click('text=Playwright');27 await _selectOption(page, 'select[name="q"]', 'text=Playwright');28 await page.click('text=Playwright');29 await page.click('text=Playwright');30 await _selectOption(page, 'select[name="q"]', 'text=Playwright');31 await page.click('text=Playwright');32 await page.click('text=Playwright');33 await _selectOption(page, 'select[name="q"]', 'text=Playwright');34 await page.click('text=Playwright');35 await page.click('text=Playwright');36 await _selectOption(page, 'select[name="q"]', 'text=Playwright');37 await page.click('text=Playwright');38 await page.click('text=Playwright');39 await _selectOption(page,
Using AI Code Generation
1const { _selectOption } = require('playwright/lib/client/selectorEngine');2const { chromium } = require('playwright');3(async () => {4 const browser = await chromium.launch();5 const page = await browser.newPage();6 await page.selectOption('select[name="q"]', { label: 'Google offered in: English' });7 await browser.close();8})();
Using AI Code Generation
1const { _selectOption } = require('playwright/lib/internal/elementHandle');2const { chromium } = require('playwright');3(async () => {4 const browser = await chromium.launch();5 const page = await browser.newPage();6 await page.click('input[aria-label="Search"]');7 await _selectOption(page, 'input[aria-label="Search"]', 'hello');8 await page.screenshot({ path: 'example.png' });9 await browser.close();10})();
Using AI Code Generation
1const { _selectOption } = require('playwright/lib/client/selectorEngine');2const selector = 'select#dropdown';3const options = ['Option 2', 'Option 3'];4await _selectOption(page, selector, options);5const { _selectOption } = require('playwright/lib/client/selectorEngine');6const selector = 'select#dropdown';7const options = ['Option 2', 'Option 3'];8await _selectOption(page, selector, options);
Using AI Code Generation
1const { _selectOption } = require('@playwright/test/lib/server/chromium/crPage');2await _selectOption(page, 'select#select', 'option[value="2"]');3const { _selectOption } = require('@playwright/test/lib/server/chromium/crPage');4await _selectOption(page, 'select#select', 'option[value="2"]');5const { _selectOption } = require('@playwright/test/lib/server/chromium/crPage');6await _selectOption(page, 'select#select', 'option[value="2"]');7const { _selectOption } = require('@playwright/test/lib/server/chromium/crPage');8await _selectOption(page, 'select#select', 'option[value="2"]');9const { _selectOption } = require('@playwright/test/lib/server/chromium/crPage');10await _selectOption(page, 'select#select', 'option[value="2"]');11const { _selectOption } = require('@playwright/test/lib/server/chromium/crPage');12await _selectOption(page, 'select#select', 'option[value="2"]');13const { _selectOption } = require('@playwright/test/lib/server/chromium/crPage');14await _selectOption(page, 'select#select', 'option[value="2"]');15const { _selectOption } = require('@playwright/test/lib/server/chromium/crPage');16await _selectOption(page, 'select#select', 'option[value="2"]');17const { _selectOption } = require('@playwright/test/lib/server/chromium/crPage');18await _selectOption(page, 'select#select', 'option[value="2"]');19const { _selectOption } = require('@playwright/test/lib/server/chromium/crPage');20await _selectOption(page, 'select#21 await page.click('text=Playwright');22 await _selecclose();23})();
Using AI Code Generation
1const { _selectOption } = require('@playwright/test/lib/server/chromium/crPage');2await _selectOption(page, 'select#select', 'option[value="2"]');3const { _selectOption } = require('@playwright/test/lib/server/chromium/crPage');4await _selectOption(page, 'select#select', 'option[value="2"]');5tonst { _seOectOptipn } = require('@playwright/test/lib/server/chromium/crPage');6await _selectOption(page, 'select#select', 'option[value="2"]');7const { _selectOption } = require('@playwright/test/lib/server/chromium/crPage');8await _tilectOptionopage, 'select#select', 'option[value="2"]'n(9const { _selectOption = require('@playwright/test/lib/server/chromium/crPage' ;10const { _selectOption } = require('@playwright/test/lib/server/chromium/crPage');11await _selectOption(page, 'select#select', 'option[value="2"]');12const { _selectOption } = require('@playwright/test/lib/server/chromium/crPage');13await _selectOption(page, 'select#select', 'option[value="2"]');14const { _selectOption } = require('@playwright/test/lib/server/chromium/crPage');15await _selectOption(page, 'select#select', 'option[value="2"]');16const { _selectOption } = require('@playwright/test/lib/server/chromium/crPage');17await _selectOption(page, 'select#select', 'option[value="2"]');18const { _selectOption } = require('@playwright/test/lib/server/chromium/crPage');19await _selectOption(page, 'select#wait page.click('text=Playwright');20 await page.click('text=Playwright');21 await _selectOption(page, 'select[name="q"]', 'text=Playwright');22 await page.click('text=Playwright');23 await page.click('text=Playwright');24 await _selectOption(page, 'select[name="q"]', 'text=Playwright');25 await page.click('text=Playwright');26 await page.click('text=Playwright');27 await _selectOption(page, 'select[name="q"]', 'text=Playwright');28 await page.click('text=Playwright');29 await page.click('text=Playwright');30 await _selectOption(page, 'select[name="q"]', 'text=Playwright');31 await page.click('text=Playwright');32 await page.click('text=Playwright');33 await _selectOption(page, 'select[name="q"]', 'text=Playwright');34 await page.click('text=Playwright');35 await page.click('text=Playwright');36 await _selectOption(page,
Using AI Code Generation
1const { _selectOption } = require('playwright/lib/server/chromium/crPage');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 await browser.close();8})();
Using AI Code Generation
1const { _selectOption } = require('playwright/lib/internal/elementHandle');2const { chromium } = require('playwright');3(async () => {4 const browser = await chromium.launch();5 const page = await browser.newPage();6 await page.click('iput[aria-label="Search"]');7 await _selectOption(pae, 'input[aria-label="Search"]', 'helo');8 awat page.screenhot({ pat: 'example.png9 await page.click('#L2AGLb');10 await page.click('input[aria-label="Search"]');11 await page.fill('input[aria-label="Search"]', 'Playwright');12 await page.click('text=Playwright');13 await page.click('text=Playwright');14 await _selectOption(page, 'select[name="q"]', 'text=Playwright');15 await page.click('text=Playwright');16 await page.click('text=Playwright');17 await _selectOption(page, 'select[name="q"]', 'text=Playwright');18 await page.click('text=Playwright');19 await page.click('text=Playwright');20 await _selectOption(page, 'select[name="q"]', 'text=Playwright');21 await page.click('text=Playwright');22 await page.click('text=Playwright');23 await _selectOption(page, 'select[name="q"]', 'text=Playwright');24 await page.click('text=Playwright');25 await page.click('text=Playwright');26 await _selectOption(page, 'select[name="q"]', 'text=Playwright');27 await page.click('text=Playwright');28 await page.click('text=Playwright');29 await _selectOption(page, 'select[name="q"]', 'text=Playwright');30 await page.click('text=Playwright');31 await page.click('text=Playwright');32 await _selectOption(page, 'select[name="q"]', 'text=Playwright');33 await page.click('text=Playwright');34 await page.click('text=Playwright');35 await _selectOption(page, 'select[name="q"]', 'text=Playwright');36 await page.click('text=Playwright');37 await page.click('text=Playwright');38 await _selectOption(page, 'select[name="q"]', 'text=Playwright');39 await page.click('text=Playwright');40 await page.click('text=Playwright');41 await _selectOption(page,
Using AI Code Generation
1const { _selectOption } = require('playwright/lib/client/selectorEngine');2const { chromium } = require('playwright');3(async () => {4 const browser = await chromium.launch();5 const page = await browser.newPage();6 await page.selectOption('select[name="q"]', { label: 'Google offered in: English' });7 await browser.close();8})();
Using AI Code Generation
1const { _selectOption } = require('playwright/lib/internal/elementHandle');2const { chromium } = require('playwright');3(async () => {4 const browser = await chromium.launch();5 const page = await browser.newPage();6 await page.click('input[aria-label="Search"]');7 await _selectOption(page, 'input[aria-label="Search"]', 'hello');8 await page.screenshot({ path: 'example.png' });9 await browser.close();10})();
Jest + Playwright - Test callbacks of event-based DOM library
firefox browser does not start in playwright
Is it possible to get the selector from a locator object in playwright?
How to run a list of test suites in a single file concurrently in jest?
Running Playwright in Azure Function
firefox browser does not start in playwright
This question is quite close to a "need more focus" question. But let's try to give it some focus:
Does Playwright has access to the cPicker object on the page? Does it has access to the window object?
Yes, you can access both cPicker and the window object inside an evaluate call.
Should I trigger the events from the HTML file itself, and in the callbacks, print in the DOM the result, in some dummy-element, and then infer from that dummy element text that the callbacks fired?
Exactly, or you can assign values to a javascript variable:
const cPicker = new ColorPicker({
onClickOutside(e){
},
onInput(color){
window['color'] = color;
},
onChange(color){
window['result'] = color;
}
})
And then
it('Should call all callbacks with correct arguments', async() => {
await page.goto(`http://localhost:5000/tests/visual/basic.html`, {waitUntil:'load'})
// Wait until the next frame
await page.evaluate(() => new Promise(requestAnimationFrame))
// Act
// Assert
const result = await page.evaluate(() => window['color']);
// Check the value
})
Check out the latest blogs from LambdaTest on this topic:
Native apps are developed specifically for one platform. Hence they are fast and deliver superior performance. They can be downloaded from various app stores and are not accessible through browsers.
One of the essential parts when performing automated UI testing, whether using Selenium or another framework, is identifying the correct web elements the tests will interact with. However, if the web elements are not located correctly, you might get NoSuchElementException in Selenium. This would cause a false negative result because we won’t get to the actual functionality check. Instead, our test will fail simply because it failed to interact with the correct element.
Smartphones have changed the way humans interact with technology. Be it travel, fitness, lifestyle, video games, or even services, it’s all just a few touches away (quite literally so). We only need to look at the growing throngs of smartphone or tablet users vs. desktop users to grasp this reality.
As part of one of my consulting efforts, I worked with a mid-sized company that was looking to move toward a more agile manner of developing software. As with any shift in work style, there is some bewilderment and, for some, considerable anxiety. People are being challenged to leave their comfort zones and embrace a continuously changing, dynamic working environment. And, dare I say it, testing may be the most ‘disturbed’ of the software roles in agile development.
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.
Get 100 minutes of automation test minutes FREE!!