Best JavaScript code snippet using playwright-internal
index.js
Source: index.js
1'use strict';2/* globals JSONSchemaView */3import {4 convertXOf,5 _if6} from './helpers.js';7/**8 * @class JSONSchemaView9 *10 * A pure JavaScript component for rendering JSON Schema in HTML.11*/12export default class JSONSchemaView {13 /**14 * @param {object} schema The JSON Schema object15 *16 * @param {number} [open=1] his number indicates up to how many levels the17 * rendered tree should expand. Set it to `0` to make the whole tree collapsed18 * or set it to `Infinity` to expand the tree deeply19 */20 constructor(schema, open) {21 this.schema = schema;22 this.open = open;23 this.isCollapsed = open <= 0;24 // Determine if a schema is an array25 this.isArray = this.schema && this.schema.type === 'array';26 // Determine if a schema is a primitive27 this.isPrimitive = this.schema &&28 !this.schema.properties &&29 !this.schema.items &&30 this.schema.type !== 'array' &&31 this.schema.type !== 'object';32 // populate isRequired property down to properties33 if (this.schema && Array.isArray(this.schema.required)) {34 this.schema.required.forEach(requiredProperty => {35 if (typeof this.schema.properties[requiredProperty] === 'object') {36 this.schema.properties[requiredProperty].isRequired = true;37 }38 });39 }40 }41 /*42 * Returns the template with populated properties.43 * This template does not have the children44 */45 template() {46 if (!this.schema) {47 return '';48 }49 return `50 <!-- Primitive -->51 ${_if(this.isPrimitive)`52 <div class="primitive">53 ${_if(this.schema.description || this.schema.title)`54 <a class="title"><span class="toggle-handle"></span>${this.schema.title || ''} </a>55 `}56 <span class="type">${this.schema.type}</span>57 ${_if(this.schema.isRequired)`58 <span class="required">*</span>59 `}60 ${_if(!this.isCollapsed && this.schema.format)`61 <span class="format">(${this.schema.format})</span>62 `}63 ${_if(!this.isCollapsed && this.schema.minimum)`64 <span class="range minimum">minimum:${this.schema.minimum}</span>65 `}66 ${_if(!this.isCollapsed && this.schema.exclusiveMinimum)`67 <span class="range exclusiveMinimum">(ex)minimum:${this.schema.exclusiveMinimum}</span>68 `}69 ${_if(!this.isCollapsed && this.schema.maximum)`70 <span class="range maximum">maximum:${this.schema.maximum}</span>71 `}72 ${_if(!this.isCollapsed && this.schema.exclusiveMaximum)`73 <span class="range exclusiveMaximum">(ex)maximum:${this.schema.exclusiveMaximum}</span>74 `}75 ${_if(!this.isCollapsed && this.schema.minLength)`76 <span class="range minLength">minLength:${this.schema.minLength}</span>77 `}78 ${_if(!this.isCollapsed && this.schema.maxLength)`79 <span class="range maxLength">maxLength:${this.schema.maxLength}</span>80 `}81 ${_if(this.schema.description && !this.isCollapsed)`82 <div class="inner description">${this.schema.description}</div>83 `}84 ${_if(!this.isCollapsed && this.schema.enum)`85 ${this.enum(this.schema, this.isCollapsed, this.open)}86 `}87 ${_if(this.schema.allOf && !this.isCollapsed)`${this.xOf(this.schema, 'allOf')}`}88 ${_if(this.schema.oneOf && !this.isCollapsed)`${this.xOf(this.schema, 'oneOf')}`}89 ${_if(this.schema.anyOf && !this.isCollapsed)`${this.xOf(this.schema, 'anyOf')}`}90 </div>91 `}92 <!-- Array -->93 ${_if(this.isArray)`94 <div class="array">95 <a class="title"><span class="toggle-handle"></span>${this.schema.title || ''}<span class="opening bracket">[</span>${_if(this.isCollapsed)`<span class="closing bracket">]</span>`}</a>96 ${_if(!this.isCollapsed && (this.schema.uniqueItems || this.schema.minItems || this.schema.maxItems))`97 <span>98 <span title="items range">(${this.schema.minItems || 0}..${this.schema.maxItems || 'â'})</span>99 ${_if(!this.isCollapsed && this.schema.uniqueItems)`<span title="unique" class="uniqueItems">â¦</span>`}100 </span>101 `}102 <div class="inner">103 ${_if(!this.isCollapsed && this.schema.description)`104 <div class="description">${this.schema.description}</div>105 `}106 </div>107 ${_if(!this.isCollapsed && this.schema.enum)`108 ${this.enum(this.schema, this.isCollapsed, this.open)}109 `}110 ${_if(this.schema.allOf && !this.isCollapsed)`${this.xOf(this.schema, 'allOf')}`}111 ${_if(this.schema.oneOf && !this.isCollapsed)`${this.xOf(this.schema, 'oneOf')}`}112 ${_if(this.schema.anyOf && !this.isCollapsed)`${this.xOf(this.schema, 'anyOf')}`}113 ${_if(!this.isCollapsed)`114 <span class="closing bracket">]</span>115 `}116 </div>117 `}118 <!-- Object -->119 ${_if(!this.isPrimitive && !this.isArray)`120 <div class="object">121 <a class="title"><span122 class="toggle-handle"></span>${this.schema.title || ''} <span123 class="opening brace">{</span>${_if(this.isCollapsed)`124 <span class="closing brace" ng-if="isCollapsed">}</span>125 `}</a>126 <div class="inner">127 ${_if(!this.isCollapsed && this.schema.description)`128 <div class="description">${this.schema.description}</div>129 `}130 <!-- children go here -->131 </div>132 ${_if(!this.isCollapsed && this.schema.enum)`133 ${this.enum(this.schema, this.isCollapsed, this.open)}134 `}135 ${_if(this.schema.allOf && !this.isCollapsed)`${this.xOf(this.schema, 'allOf')}`}136 ${_if(this.schema.oneOf && !this.isCollapsed)`${this.xOf(this.schema, 'oneOf')}`}137 ${_if(this.schema.anyOf && !this.isCollapsed)`${this.xOf(this.schema, 'anyOf')}`}138 ${_if(!this.isCollapsed)`139 <span class="closing brace">}</span>140 `}141 </div>142 `}143`.replace(/\s*\n/g, '\n').replace(/(\<\!\-\-).+/g, '').trim();144 }145 /*146 * Template for oneOf, anyOf and allOf147 */148 xOf(schema, type) {149 return `150 <div class="inner ${type}">151 <b>${convertXOf(type)}:</b>152 </div>153 `;154 }155 /*156 * Template for enums157 */158 enum(schema, isCollapsed, open) {159 return `160 ${_if(!isCollapsed && schema.enum)`161 <div class="inner enums">162 <b>Enum:</b>163 </div>164 `}165 `;166 }167 /*168 * Toggles the 'collapsed' state169 */170 toggle() {171 this.isCollapsed = !this.isCollapsed;172 this.render();173 }174 /*175 * Renders the element and returns it176 */177 render() {178 if (!this.element) {179 this.element = document.createElement('div');180 this.element.classList.add('json-schema-view');181 }182 if (this.isCollapsed) {183 this.element.classList.add('collapsed');184 } else {185 this.element.classList.remove('collapsed');186 }187 this.element.innerHTML = this.template();188 if (!this.schema) {189 return this.element;190 }191 if (!this.isCollapsed) {192 this.appendChildren(this.element);193 }194 // add event listener for toggling195 if (this.element.querySelector('a.title')) {196 this.element.querySelector('a.title').addEventListener('click', this.toggle.bind(this));197 }198 return this.element;199 }200 /*201 * Appends children to given element based on current schema202 */203 appendChildren(element) {204 const inner = element.querySelector('.inner');205 if (this.schema.enum) {206 const formatter = new JSONFormatter(this.schema.enum, this.open - 1);207 const formatterEl = formatter.render();208 formatterEl.classList.add('inner');209 element.querySelector('.enums.inner').appendChild(formatterEl);210 }211 if (this.isArray) {212 const view = new JSONSchemaView(this.schema.items, this.open - 1)213 inner.appendChild(view.render());214 }215 if (typeof this.schema.properties === 'object') {216 Object.keys(this.schema.properties).forEach(propertyName => {217 const property = this.schema.properties[propertyName];218 const tempDiv = document.createElement('div');;219 tempDiv.innerHTML = `<div class="property">220 <span class="name">${propertyName}:</span>221 </div>`;222 const view = new JSONSchemaView(property, this.open - 1);223 tempDiv.querySelector('.property').appendChild(view.render());224 inner.appendChild(tempDiv.querySelector('.property'));225 });226 }227 if (this.schema.allOf) { appendXOf.call(this, 'allOf'); }228 if (this.schema.oneOf) { appendXOf.call(this, 'oneOf'); }229 if (this.schema.anyOf) { appendXOf.call(this, 'anyOf'); }230 function appendXOf(type) {231 const innerAllOf = element.querySelector(`.inner.${type}`);232 this.schema[type].forEach(schema => {233 const inner = document.createElement('div');234 inner.classList.add('inner');235 const view = new JSONSchemaView(schema, this.open - 1);236 inner.appendChild(view.render());237 innerAllOf.appendChild(inner);238 });239 }240 }241}242// TODO: UMD...
collapseHorizontally.spec.js
Source: collapseHorizontally.spec.js
1describe('collapse directive', function() {2 var elementH, compileFnH, scope, $compile, $animate, $q;3 beforeEach(module('ui.bootstrap.collapse'));4 beforeEach(module('ngAnimateMock'));5 beforeEach(inject(function(_$rootScope_, _$compile_, _$animate_, _$q_) {6 scope = _$rootScope_;7 $compile = _$compile_;8 $animate = _$animate_;9 $q = _$q_;10 }));11 beforeEach(function() {12 elementH = angular.element(13 '<div uib-collapse="isCollapsed" '14 + 'expanding="expanding()" '15 + 'expanded="expanded()" '16 + 'collapsing="collapsing()" '17 + 'collapsed="collapsed()" '18 + 'horizontal>'19 + 'Some Content</div>');20 compileFnH = $compile(elementH);21 angular.element(document.body).append(elementH);22 });23 afterEach(function() {24 elementH.remove();25 });26 function initCallbacks() {27 scope.collapsing = jasmine.createSpy('scope.collapsing');28 scope.collapsed = jasmine.createSpy('scope.collapsed');29 scope.expanding = jasmine.createSpy('scope.expanding');30 scope.expanded = jasmine.createSpy('scope.expanded');31 }32 function assertCallbacks(expected) {33 ['collapsing', 'collapsed', 'expanding', 'expanded'].forEach(function(cbName) {34 if (expected[cbName]) {35 expect(scope[cbName]).toHaveBeenCalled();36 } else {37 expect(scope[cbName]).not.toHaveBeenCalled();38 }39 });40 }41 it('should be hidden on initialization if isCollapsed = true', function() {42 initCallbacks();43 scope.isCollapsed = true;44 compileFnH(scope);45 scope.$digest();46 expect(elementH.width()).toBe(0);47 assertCallbacks({ collapsed: true });48 });49 it('should not trigger any animation on initialization if isCollapsed = true', function() {50 var wrapperFn = function() {51 $animate.flush();52 };53 scope.isCollapsed = true;54 compileFnH(scope);55 scope.$digest();56 expect(wrapperFn).toThrowError(/No pending animations ready to be closed or flushed/);57 });58 it('should collapse if isCollapsed = true on subsequent use', function() {59 scope.isCollapsed = false;60 compileFnH(scope);61 scope.$digest();62 initCallbacks();63 scope.isCollapsed = true;64 scope.$digest();65 $animate.flush();66 expect(elementH.width()).toBe(0);67 assertCallbacks({ collapsing: true, collapsed: true });68 });69 it('should show after toggled from collapsed', function() {70 initCallbacks();71 scope.isCollapsed = true;72 compileFnH(scope);73 scope.$digest();74 expect(elementH.width()).toBe(0);75 assertCallbacks({ collapsed: true });76 scope.collapsed.calls.reset();77 scope.isCollapsed = false;78 scope.$digest();79 $animate.flush();80 expect(elementH.width()).not.toBe(0);81 assertCallbacks({ expanding: true, expanded: true });82 });83 it('should not trigger any animation on initialization if isCollapsed = false', function() {84 var wrapperFn = function() {85 $animate.flush();86 };87 scope.isCollapsed = false;88 compileFnH(scope);89 scope.$digest();90 expect(wrapperFn).toThrowError(/No pending animations ready to be closed or flushed/);91 });92 it('should expand if isCollapsed = false on subsequent use', function() {93 scope.isCollapsed = false;94 compileFnH(scope);95 scope.$digest();96 scope.isCollapsed = true;97 scope.$digest();98 $animate.flush();99 initCallbacks();100 scope.isCollapsed = false;101 scope.$digest();102 $animate.flush();103 expect(elementH.width()).not.toBe(0);104 assertCallbacks({ expanding: true, expanded: true });105 });106 it('should collapse if isCollapsed = true on subsequent uses', function() {107 scope.isCollapsed = false;108 compileFnH(scope);109 scope.$digest();110 scope.isCollapsed = true;111 scope.$digest();112 $animate.flush();113 scope.isCollapsed = false;114 scope.$digest();115 $animate.flush();116 initCallbacks();117 scope.isCollapsed = true;118 scope.$digest();119 $animate.flush();120 expect(elementH.width()).toBe(0);121 assertCallbacks({ collapsing: true, collapsed: true });122 });123 it('should change aria-expanded attribute', function() {124 scope.isCollapsed = false;125 compileFnH(scope);126 scope.$digest();127 expect(elementH.attr('aria-expanded')).toBe('true');128 scope.isCollapsed = true;129 scope.$digest();130 $animate.flush();131 expect(elementH.attr('aria-expanded')).toBe('false');132 });133 it('should change aria-hidden attribute', function() {134 scope.isCollapsed = false;135 compileFnH(scope);136 scope.$digest();137 expect(elementH.attr('aria-hidden')).toBe('false');138 scope.isCollapsed = true;139 scope.$digest();140 $animate.flush();141 expect(elementH.attr('aria-hidden')).toBe('true');142 });143 describe('expanding callback returning a promise', function() {144 var defer, collapsedWidth;145 beforeEach(function() {146 defer = $q.defer();147 scope.isCollapsed = true;148 scope.expanding = function() {149 return defer.promise;150 };151 compileFnH(scope);152 scope.$digest();153 collapsedWidth = elementH.width();154 // set flag to expand ...155 scope.isCollapsed = false;156 scope.$digest();157 // ... shouldn't expand yet ...158 expect(elementH.attr('aria-expanded')).not.toBe('true');159 expect(elementH.width()).toBe(collapsedWidth);160 });161 it('should wait for it to resolve before animating', function() {162 defer.resolve();163 // should now expand164 scope.$digest();165 $animate.flush();166 expect(elementH.attr('aria-expanded')).toBe('true');167 expect(elementH.width()).toBeGreaterThan(collapsedWidth);168 });169 it('should not animate if it rejects', function() {170 defer.reject();171 // should NOT expand172 scope.$digest();173 expect(elementH.attr('aria-expanded')).not.toBe('true');174 expect(elementH.width()).toBe(collapsedWidth);175 });176 });177 describe('collapsing callback returning a promise', function() {178 var defer, expandedWidth;179 beforeEach(function() {180 defer = $q.defer();181 scope.isCollapsed = false;182 scope.collapsing = function() {183 return defer.promise;184 };185 compileFnH(scope);186 scope.$digest();187 expandedWidth = elementH.width();188 // set flag to collapse ...189 scope.isCollapsed = true;190 scope.$digest();191 // ... but it shouldn't collapse yet ...192 expect(elementH.attr('aria-expanded')).not.toBe('false');193 expect(elementH.width()).toBe(expandedWidth);194 });195 it('should wait for it to resolve before animating', function() {196 defer.resolve();197 // should now collapse198 scope.$digest();199 $animate.flush();200 expect(elementH.attr('aria-expanded')).toBe('false');201 expect(elementH.width()).toBeLessThan(expandedWidth);202 });203 it('should not animate if it rejects', function() {204 defer.reject();205 // should NOT collapse206 scope.$digest();207 expect(elementH.attr('aria-expanded')).not.toBe('false');208 expect(elementH.width()).toBe(expandedWidth);209 });210 });...
SideMenuList.jsx
Source: SideMenuList.jsx
1import React from 'react'2import { Query } from 'react-apollo'3import { withRouter } from 'react-router-dom'4import ChatRoom from './ChatRoom'5import Constants from '../configs/constants'6import Person from './Person'7import Loader from './Loader'8import { GET_PERSONS, GET_PERSON_CLIENT } from '../graphql/queries/persons'9import { GET_CHATS_BY_PERSON } from '../graphql/queries/chat'10const SideMenuList = props => {11 props.setParams(props.match.params.id)12 switch (props.type) {13 default:14 case Constants.Menu.Conversations:15 return _renderConversationsMenu(props)16 case Constants.Menu.Persons:17 return _renderPersonsMenu(props)18 case Constants.Menu.Contexts:19 return _renderContextsMenu(props)20 case Constants.Menu.Search:21 return _renderSearchMenu(props)22 }23}24const _renderContextsMenu = props => (25 <div className={`side-menu-list ${props.isCollapsed ? 'iscollapsed' : ''}`}>26 <ChatRoom isCollapsed={props.isCollapsed} />27 <ChatRoom isCollapsed={props.isCollapsed} />28 <ChatRoom isCollapsed={props.isCollapsed} />29 <ChatRoom isCollapsed={props.isCollapsed} />30 <ChatRoom isCollapsed={props.isCollapsed} />31 <ChatRoom isCollapsed={props.isCollapsed} />32 <ChatRoom isCollapsed={props.isCollapsed} />33 <ChatRoom isCollapsed={props.isCollapsed} />34 <ChatRoom isCollapsed={props.isCollapsed} />35 <ChatRoom isCollapsed={props.isCollapsed} />36 <ChatRoom isCollapsed={props.isCollapsed} />37 <ChatRoom isCollapsed={props.isCollapsed} />38 <ChatRoom isCollapsed={props.isCollapsed} />39 <ChatRoom isCollapsed={props.isCollapsed} />40 <ChatRoom isCollapsed={props.isCollapsed} />41 <ChatRoom isCollapsed={props.isCollapsed} />42 <ChatRoom isCollapsed={props.isCollapsed} />43 <ChatRoom isCollapsed={props.isCollapsed} />44 <ChatRoom isCollapsed={props.isCollapsed} />45 <ChatRoom isCollapsed={props.isCollapsed} />46 <ChatRoom isCollapsed={props.isCollapsed} />47 <ChatRoom isCollapsed={props.isCollapsed} />48 <ChatRoom isCollapsed={props.isCollapsed} />49 <ChatRoom isCollapsed={props.isCollapsed} />50 <ChatRoom isCollapsed={props.isCollapsed} />51 <ChatRoom isCollapsed={props.isCollapsed} />52 <ChatRoom isCollapsed={props.isCollapsed} />53 <ChatRoom isCollapsed={props.isCollapsed} />54 <ChatRoom isCollapsed={props.isCollapsed} />55 <ChatRoom isCollapsed={props.isCollapsed} />56 <ChatRoom isCollapsed={props.isCollapsed} />57 <ChatRoom isCollapsed={props.isCollapsed} />58 <ChatRoom isCollapsed={props.isCollapsed} />59 <ChatRoom isCollapsed={props.isCollapsed} />60 <ChatRoom isCollapsed={props.isCollapsed} />61 <ChatRoom isCollapsed={props.isCollapsed} />62 <ChatRoom isCollapsed={props.isCollapsed} />63 <ChatRoom isCollapsed={props.isCollapsed} />64 <ChatRoom isCollapsed={props.isCollapsed} />65 <ChatRoom isCollapsed={props.isCollapsed} />66 <ChatRoom isCollapsed={props.isCollapsed} />67 <ChatRoom isCollapsed={props.isCollapsed} />68 <ChatRoom isCollapsed={props.isCollapsed} />69 <ChatRoom isCollapsed={props.isCollapsed} />70 </div>71)72const _renderPersonsMenu = props => (73 <div className={`side-menu-list ${props.isCollapsed ? 'iscollapsed' : ''}`}>74 <Query query={GET_PERSON_CLIENT}>75 {({ loading, error, data, client }) => {76 if (loading) return <Loader />;77 if (error) return <Loader />78 return (79 <Query query={GET_PERSONS} variables={{ id: data.user_logged.id }}>80 {({ loading, error, data }) => {81 if (loading) return <Loader />82 if (error) return `Error! ${error.message}`83 return data.allUsers.map(user => (84 <Person85 id={user.id}86 key={user.id}87 name={user.name}88 type={Constants.Person.MenuList}89 hideContent={props.isCollapsed}90 src={user.photo}91 size={40}92 alt={user.name}93 rooms={user.rooms}94 />95 ))96 }}97 </Query>98 )99 }}100 </Query>101 </div>102)103const _renderConversationsMenu = props => (104 <div className={`side-menu-list ${props.isCollapsed ? 'iscollapsed' : ''}`}>105 <Query query={GET_PERSON_CLIENT}>106 {({ loading, error, data, client }) => {107 if (loading) return <Loader />;108 if (error) return <Loader />109 return (110 <Query111 query={GET_CHATS_BY_PERSON}112 variables={{ id: data.user_logged.id }}113 >114 {({ loading, error, data }) => {115 if (loading) return <Loader />116 if (error) return `Error! ${error.message}`117 return data.allRooms.map(room => (118 <ChatRoom key={room.id} isCollapsed={props.isCollapsed} room={room} />119 ))120 }}121 </Query>122 )123 }}124 </Query>125 </div>126)127const _renderSearchMenu = props => (128 <div className={`side-menu-list ${props.isCollapsed ? 'iscollapsed' : ''}`}>129 <div className="search-input">130 <input placeholder="Search..." />131 </div>132 </div>133)...
collapse.spec.js
Source: collapse.spec.js
1describe('collapse directive', function () {2 var scope, $compile, $animate;3 var element;4 beforeEach(module('ui.bootstrap.collapse'));5 beforeEach(module('ngAnimateMock'));6 beforeEach(inject(function(_$rootScope_, _$compile_, _$animate_) {7 scope = _$rootScope_;8 $compile = _$compile_;9 $animate = _$animate_;10 }));11 beforeEach(function() {12 element = $compile('<div collapse="isCollapsed">Some Content</div>')(scope);13 angular.element(document.body).append(element);14 });15 afterEach(function() {16 element.remove();17 });18 it('should be hidden on initialization if isCollapsed = true without transition', function() {19 scope.isCollapsed = true;20 scope.$digest();21 $animate.triggerCallbacks();22 //No animation timeout here23 expect(element.height()).toBe(0);24 });25 it('should collapse if isCollapsed = true with animation on subsequent use', function() {26 scope.isCollapsed = false;27 scope.$digest();28 scope.isCollapsed = true;29 scope.$digest();30 $animate.triggerCallbacks();31 expect(element.height()).toBe(0);32 });33 it('should be shown on initialization if isCollapsed = false without transition', function() {34 scope.isCollapsed = false;35 scope.$digest();36 //No animation timeout here37 expect(element.height()).not.toBe(0);38 });39 it('should expand if isCollapsed = false with animation on subsequent use', function() {40 scope.isCollapsed = false;41 scope.$digest();42 scope.isCollapsed = true;43 scope.$digest();44 scope.isCollapsed = false;45 scope.$digest();46 $animate.triggerCallbacks();47 expect(element.height()).not.toBe(0);48 });49 it('should expand if isCollapsed = true with animation on subsequent uses', function() {50 scope.isCollapsed = false;51 scope.$digest();52 scope.isCollapsed = true;53 scope.$digest();54 scope.isCollapsed = false;55 scope.$digest();56 scope.isCollapsed = true;57 scope.$digest();58 $animate.triggerCallbacks();59 expect(element.height()).toBe(0);60 $animate.triggerCallbacks();61 expect(element.height()).toBe(0);62 });63 it('should change aria-expanded attribute', function() {64 scope.isCollapsed = false;65 scope.$digest();66 expect(element.attr('aria-expanded')).toBe('true');67 scope.isCollapsed = true;68 scope.$digest();69 expect(element.attr('aria-expanded')).toBe('false');70 });71 it('should change aria-hidden attribute', function() {72 scope.isCollapsed = false;73 scope.$digest();74 expect(element.attr('aria-hidden')).toBe('false');75 scope.isCollapsed = true;76 scope.$digest();77 expect(element.attr('aria-hidden')).toBe('true');78 });79 describe('dynamic content', function() {80 var element;81 beforeEach(function() {82 element = angular.element('<div collapse="isCollapsed"><p>Initial content</p><div ng-show="exp">Additional content</div></div>');83 $compile(element)(scope);84 angular.element(document.body).append(element);85 });86 afterEach(function() {87 element.remove();88 });89 it('should grow accordingly when content size inside collapse increases', function() {90 scope.exp = false;91 scope.isCollapsed = false;92 scope.$digest();93 $animate.triggerCallbacks();94 var collapseHeight = element.height();95 scope.exp = true;96 scope.$digest();97 expect(element.height()).toBeGreaterThan(collapseHeight);98 });99 it('should shrink accordingly when content size inside collapse decreases', function() {100 scope.exp = true;101 scope.isCollapsed = false;102 scope.$digest();103 $animate.triggerCallbacks();104 var collapseHeight = element.height();105 scope.exp = false;106 scope.$digest();107 expect(element.height()).toBeLessThan(collapseHeight);108 });109 });...
header.client.controller.tests.js
1'use strict';2(function () {3 describe('HeaderController', function () {4 // Initialize global variables5 var scope,6 HeaderController,7 $state,8 Authentication;9 // Load the main application module10 beforeEach(module(ApplicationConfiguration.applicationModuleName));11 beforeEach(inject(function ($controller, $rootScope, _$state_, _Authentication_) {12 scope = $rootScope.$new();13 $state = _$state_;14 Authentication = _Authentication_;15 HeaderController = $controller('HeaderController as vm', {16 $scope: scope17 });18 }));19 it('should expose the authentication service', function () {20 expect(scope.vm.authentication).toBe(Authentication);21 });22 it('should default menu to collapsed', function () {23 expect(scope.vm.isCollapsed).toBeFalsy();24 });25 describe('when toggleCollapsibleMenu', function () {26 var defaultCollapse;27 beforeEach(function () {28 defaultCollapse = scope.vm.isCollapsed;29 scope.vm.isCollapsed = !scope.vm.isCollapsed;30 });31 it('should toggle isCollapsed to non default value', function () {32 expect(scope.vm.isCollapsed).not.toBe(defaultCollapse);33 });34 it('should then toggle isCollapsed back to default value', function () {35 scope.vm.isCollapsed = !scope.vm.isCollapsed;36 expect(scope.vm.isCollapsed).toBe(defaultCollapse);37 });38 });39 describe('when view state changes', function () {40 beforeEach(function () {41 scope.vm.isCollapsed = true;42 scope.$broadcast('$stateChangeSuccess');43 });44 it('should set isCollapsed to false', function () {45 expect(scope.vm.isCollapsed).toBeFalsy();46 });47 });48 });...
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 await page.click('#orb-search-q');7 await page.type('#orb-search-q', 'coronavirus');8 await page.keyboard.press('Enter');9 await page.waitForSelector('text=Coronavirus: How are countries responding?');10 await page.click('text=Coronavirus: How are countries responding?');11 await page.waitForSelector('text=Coronavirus: How are countries responding?');12 await page.click('text=Coronavirus: How are countries responding?');13 await page.waitForSelector('text=Coronavirus: How are countries responding?');14 await page.click('text=Coronavirus: How are countries responding?');15 await page.waitForSelector('text=Coronavirus: How are countries responding?');16 await page.click('text=Coronavirus: How are countries responding?');17 await page.waitForSelector('text=Coronavirus: How are countries responding?');18 await page.click('text=Coronavirus: How are countries responding?');19 await page.waitForSelector('text=Coronavirus: How are countries responding?');20 await page.click('text=Coronavirus: How are countries responding?');21 await page.waitForSelector('text=Coronavirus: How are countries responding?');22 await page.click('text=Coronavirus: How are countries responding?');23 await page.waitForSelector('text=Coronavirus: How are countries responding?');24 await page.click('text=Coronavirus: How are countries responding?');25 await page.waitForSelector('text=Coronavirus: How are countries responding?');26 await page.click('text=Coronavirus: How are countries responding?');27 await page.waitForSelector('text=Coronavirus: How are countries responding?');28 await page.click('text=Coronavirus: How are countries responding?');29 await page.waitForSelector('text=Coronavirus: How are countries responding?');30 await page.click('text=Coronavirus: How are countries responding?');31 await page.waitForSelector('text=Coronavirus: How are countries responding?');32 await page.click('text=Coronavirus
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 await page.click('text="Get started"');7 await page.click('text="API Docs"');8 await page.click('text="Page"');9 await page.click('text="isCollapsed"');10 await page.click('text="Parameters"');11 await page.click('text="Returns"');12 await page.click('text="Examples"');13 await page.click('text="Example 1"');14 await page.click('text="Example 2"');15 await page.click('text="Example 3"');16 await page.click('text="Example 4"');17 await page.click('text="Example 5"');18 await page.click('text="Example 6"');19 await page.click('text="Example 7"');20 await page.click('text="Example 8"');21 await page.click('text="Example 9"');22 await page.click('text="Example 10"');23 await page.click('text="Example 11"');24 await page.click('text="Example 12"');25 await page.click('text="Example 13"');26 await page.click('text="Example 14"');27 await page.click('text="Example 15"');28 await page.click('text="Example 16"');29 await page.click('text="Example 17"');30 await page.click('text="Example 18"');31 await page.click('text="Example 19"');32 await page.click('text="Example 20"');33 await page.click('text="Example 21"');34 await page.click('text="Example 22"');35 await page.click('text="Example 23"');36 await page.click('text="Example 24"');37 await page.click('text="Example 25"');38 await page.click('text="Example 26"');39 await page.click('text="Example 27"');40 await page.click('text="Example 28"');41 await page.click('text="Example 29"');42 await page.click('text="Example 30"');43 await page.click('text="Example 31"');
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch({ headless: false });4 const context = await browser.newContext();5 const page = await context.newPage();6 const input = await page.$('input[name="q"]');7 await input.focus();8 await page.keyboard.type('Hello World!');9 await page.keyboard.press('Backspace');10 await page.keyboard.press('ArrowLeft');11 const selection = await input.evaluateHandle((input) => {12 return {13 };14 });15 const isCollapsed = await selection.evaluate((selection) => {16 return (17 );18 });19 console.log(isCollapsed);20 await browser.close();21})();22const { chromium } = require('playwright');23(async () => {24 const browser = await chromium.launch({ headless: false });25 const context = await browser.newContext();26 const page = await context.newPage();27 const input = await page.$('input[name="q"]');28 await input.focus();29 await page.keyboard.type('Hello World!');30 await page.keyboard.press('Backspace');31 await page.keyboard.press('ArrowLeft');32 const selection = await input.evaluateHandle((input) => {33 return {34 };35 });36 const isCollapsed = await selection.evaluate((selection) => {37 return (38 );39 });40 console.log(isCollapsed);41 await browser.close();42})();43const { chromium } = require('playwright');44(async () => {45 const browser = await chromium.launch({ headless: false });46 const context = await browser.newContext();47 const page = await context.newPage();
Using AI Code Generation
1const playwright = require("playwright");2(async () => {3 for (const browserType of BROWSER) {4 const browser = await playwright[browserType].launch();5 const context = await browser.newContext();6 const page = await context.newPage();7 await page.click("input[name='q']");8 await page.keyboard.type("Hello World!");9 console.log(await page.isCollapsed());10 await browser.close();11 }12})();
Using AI Code Generation
1const { isCollapsed } = 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 locator = await page.locator('text=Locator');8 console.log(await isCollapsed(locator));9 await browser.close();10})();11Locator.isIntersectingViewport()12const { isIntersectingViewport } = require('playwright/lib/server/dom.js');13const { chromium } = require('playwright');14(async () => {15 const browser = await chromium.launch();16 const context = await browser.newContext();17 const page = await context.newPage();18 const locator = await page.locator('text=Locator');19 console.log(await isIntersectingViewport(locator));20 await browser.close();21})();22Locator.isVisible()23const { isVisible } = require('playwright/lib/server/dom.js');24const { chromium } = require('playwright');25(async () => {26 const browser = await chromium.launch();27 const context = await browser.newContext();28 const page = await context.newPage();29 const locator = await page.locator('text=Locator');30 console.log(await isVisible(locator));31 await browser.close();32})();33Locator.isEditable()
Using AI Code Generation
1const { isCollapsed } = require('playwright/lib/page');2const { chromium } = require('playwright');3(async () => {4 const browser = await chromium.launch();5 const page = await browser.newPage();6 await page.click('input[name="q"]');7 await page.type('input[name="q"]', 'Hello World');8 const isCollapsed = await page.evaluate(() => {9 const selection = window.getSelection();10 return selection.isCollapsed;11 });12 console.log('isCollapsed: ', isCollapsed);13 await browser.close();14})();15const { isCollapsed } = require('playwright/lib/page');16const { chromium } = require('playwright');17(async () => {18 const browser = await chromium.launch();19 const page = await browser.newPage();20 await page.click('input[name="q"]');21 await page.type('input[name="q"]', 'Hello World');22 const isCollapsed = await page.evaluate(() => {23 const selection = window.getSelection();24 return selection.isCollapsed;25 });26 console.log('isCollapsed: ', isCollapsed);27 await browser.close();28})();29const { isCollapsed } = require('playwright/lib/page');30const { chromium } = require('playwright');31(async () => {32 const browser = await chromium.launch();33 const page = await browser.newPage();34 await page.click('input[name="q"]');35 await page.type('input[name="q"]', 'Hello World');36 const isCollapsed = await page.evaluate(() => {37 const selection = window.getSelection();38 return selection.isCollapsed;39 });40 console.log('isCollapsed: ', isCollapsed);41 await browser.close();42})();43const { isCollapsed } = require('playwright/lib/page');44const { chromium } = require('playwright');45(async () => {46 const browser = await chromium.launch();47 const page = await browser.newPage();48 await page.click('input[name="q"]');
Using AI Code Generation
1const { isCollapsed } = require('playwright/lib/internal/selection');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('input[name="q"]');8 await page.type('input[name="q"]', 'Playwright');9 const selection = await page.evaluate(() => window.getSelection());10 await page.click('input[name="q"]');11 const newSelection = await page.evaluate(() => window.getSelection());12 await browser.close();13})();
Using AI Code Generation
1const { isCollapsed } = require('playwright/lib/server/dom.js');2const { chromium } = require('playwright');3(async () => {4 const browser = await chromium.launch();5 const page = await browser.newPage();6 const element = await page.$('text=Get started');7 const isCollapsed = await page.evaluate((element) => element.isCollapsed, element);8 console.log(isCollapsed);9 await browser.close();10})();
Using AI Code Generation
1const { isCollapsed } = require('playwright/lib/webkit/webkit');2const { webkit } = require('playwright');3(async () => {4 const browser = await webkit.launch();5 const context = await browser.newContext();6 const page = await context.newPage();7 await page.type('input[name="q"]', 'Hello World');8 const selection = await page.evaluate(() => window.getSelection());9 console.log(isCollapsed(selection));10 await browser.close();11})();12await page.evaluate(() => {13 const selection = window.getSelection();14 return selection.getRangeAt(0).collapsed;15});
Using AI Code Generation
1const { isCollapsed } = require('playwright/lib/internal/selection');2(async () => {3 const browser = await webkit.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.type('input', 'Hello World!');7 const selection = await page.evaluate(() => {8 const input = document.querySelector('input');9 input.select();10 return window.getSelection();11 });12 await browser.close();13})();
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!!