How to use reactive method in Playwright Internal

Best JavaScript code snippet using playwright-internal

reactive-var.js

Source:reactive-var.js

1//////////////////////////////////////////////////////////////////////////2//                                                                      //3// This is a generated file. You can view the original                  //4// source in your browser if your browser supports source maps.         //5// Source maps are supported by all recent versions of Chrome, Safari,  //6// and Firefox, and by Internet Explorer 11.                            //7//                                                                      //8//////////////////////////////////////////////////////////////////////////9(function () {10/* Imports */11var Meteor = Package.meteor.Meteor;12var global = Package.meteor.global;13var meteorEnv = Package.meteor.meteorEnv;14var Tracker = Package.tracker.Tracker;15var Deps = Package.tracker.Deps;16/* Package-scope variables */17var ReactiveVar;18(function(){19//////////////////////////////////////////////////////////////////////////////////////////////////////////////////20//                                                                                                              //21// packages/reactive-var/reactive-var.js                                                                        //22//                                                                                                              //23//////////////////////////////////////////////////////////////////////////////////////////////////////////////////24                                                                                                                //25/*                                                                                                              // 126 * ## [new] ReactiveVar(initialValue, [equalsFunc])                                                             // 227 *                                                                                                              // 328 * A ReactiveVar holds a single value that can be get and set,                                                  // 429 * such that calling `set` will invalidate any Computations that                                                // 530 * called `get`, according to the usual contract for reactive                                                   // 631 * data sources.                                                                                                // 732 *                                                                                                              // 833 * A ReactiveVar is much like a Session variable -- compare `foo.get()`                                         // 934 * to `Session.get("foo")` -- but it doesn't have a global name and isn't                                       // 1035 * automatically migrated across hot code pushes.  Also, while Session                                          // 1136 * variables can only hold JSON or EJSON, ReactiveVars can hold any value.                                      // 1237 *                                                                                                              // 1338 * An important property of ReactiveVars, which is sometimes the reason                                         // 1439 * to use one, is that setting the value to the same value as before has                                        // 1540 * no effect, meaning ReactiveVars can be used to absorb extra                                                  // 1641 * invalidations that wouldn't serve a purpose.  However, by default,                                           // 1742 * ReactiveVars are extremely conservative about what changes they                                              // 1843 * absorb.  Calling `set` with an object argument will *always* trigger                                         // 1944 * invalidations, because even if the new value is `===` the old value,                                         // 2045 * the object may have been mutated.  You can change the default behavior                                       // 2146 * by passing a function of two arguments, `oldValue` and `newValue`,                                           // 2247 * to the constructor as `equalsFunc`.                                                                          // 2348 *                                                                                                              // 2449 * This class is extremely basic right now, but the idea is to evolve                                           // 2550 * it into the ReactiveVar of Geoff's Lickable Forms proposal.                                                  // 2651 */                                                                                                             // 2752                                                                                                                // 2853/**                                                                                                             // 2954 * @class                                                                                                       // 3055 * @instanceName reactiveVar                                                                                    // 3156 * @summary Constructor for a ReactiveVar, which represents a single reactive variable.                         // 3257 * @locus Client                                                                                                // 3358 * @param {Any} initialValue The initial value to set.  `equalsFunc` is ignored when setting the initial value.59 * @param {Function} [equalsFunc] Optional.  A function of two arguments, called on the old value and the new value whenever the ReactiveVar is set.  If it returns true, no set is performed.  If omitted, the default `equalsFunc` returns true if its arguments are `===` and are of type number, boolean, string, undefined, or null.60 */                                                                                                             // 3661ReactiveVar = function (initialValue, equalsFunc) {                                                             // 3762  if (! (this instanceof ReactiveVar))                                                                          // 3863    // called without `new`                                                                                     // 3964    return new ReactiveVar(initialValue, equalsFunc);                                                           // 4065                                                                                                                // 4166  this.curValue = initialValue;                                                                                 // 4267  this.equalsFunc = equalsFunc;                                                                                 // 4368  this.dep = new Tracker.Dependency;                                                                            // 4469};                                                                                                              // 4570                                                                                                                // 4671ReactiveVar._isEqual = function (oldValue, newValue) {                                                          // 4772  var a = oldValue, b = newValue;                                                                               // 4873  // Two values are "equal" here if they are `===` and are                                                      // 4974  // number, boolean, string, undefined, or null.                                                               // 5075  if (a !== b)                                                                                                  // 5176    return false;                                                                                               // 5277  else                                                                                                          // 5378    return ((!a) || (typeof a === 'number') || (typeof a === 'boolean') ||                                      // 5479            (typeof a === 'string'));                                                                           // 5580};                                                                                                              // 5681                                                                                                                // 5782/**                                                                                                             // 5883 * @summary Returns the current value of the ReactiveVar, establishing a reactive dependency.                   // 5984 * @locus Client                                                                                                // 6085 */                                                                                                             // 6186ReactiveVar.prototype.get = function () {                                                                       // 6287  if (Tracker.active)                                                                                           // 6388    this.dep.depend();                                                                                          // 6489                                                                                                                // 6590  return this.curValue;                                                                                         // 6691};                                                                                                              // 6792                                                                                                                // 6893/**                                                                                                             // 6994 * @summary Sets the current value of the ReactiveVar, invalidating the Computations that called `get` if `newValue` is different from the old value.95 * @locus Client                                                                                                // 7196 * @param {Any} newValue                                                                                        // 7297 */                                                                                                             // 7398ReactiveVar.prototype.set = function (newValue) {                                                               // 7499  var oldValue = this.curValue;                                                                                 // 75100                                                                                                                // 76101  if ((this.equalsFunc || ReactiveVar._isEqual)(oldValue, newValue))                                            // 77102    // value is same as last time                                                                               // 78103    return;                                                                                                     // 79104                                                                                                                // 80105  this.curValue = newValue;                                                                                     // 81106  this.dep.changed();                                                                                           // 82107};                                                                                                              // 83108                                                                                                                // 84109ReactiveVar.prototype.toString = function () {                                                                  // 85110  return 'ReactiveVar{' + this.get() + '}';                                                                     // 86111};                                                                                                              // 87112                                                                                                                // 88113ReactiveVar.prototype._numListeners = function() {                                                              // 89114  // Tests want to know.                                                                                        // 90115  // Accesses a private field of Tracker.Dependency.                                                            // 91116  var count = 0;                                                                                                // 92117  for (var id in this.dep._dependentsById)                                                                      // 93118    count++;                                                                                                    // 94119  return count;                                                                                                 // 95120};                                                                                                              // 96121                                                                                                                // 97122//////////////////////////////////////////////////////////////////////////////////////////////////////////////////123}).call(this);124/* Exports */125if (typeof Package === 'undefined') Package = {};126(function (pkg, symbols) {127  for (var s in symbols)128    (s in pkg) || (pkg[s] = symbols[s]);129})(Package['reactive-var'] = {}, {130  ReactiveVar: ReactiveVar131});...

debug.js

Source:debug.js

1// This file is part of Moodle - http://moodle.org/2//3// Moodle is free software: you can redistribute it and/or modify4// it under the terms of the GNU General Public License as published by5// the Free Software Foundation, either version 3 of the License, or6// (at your option) any later version.7//8// Moodle is distributed in the hope that it will be useful,9// but WITHOUT ANY WARRANTY; without even the implied warranty of10// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the11// GNU General Public License for more details.12//13// You should have received a copy of the GNU General Public License14// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.15/**16 * Reactive module debug tools.17 *18 * @module     core/reactive/local/reactive/debug19 * @copyright  2021 Ferran Recio <ferran@moodle.com>20 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later21 */22import Reactive from 'core/local/reactive/reactive';23import log from 'core/log';24// The list of reactives instances.25const reactiveInstances = {};26// The reactive debugging objects.27const reactiveDebuggers = {};28/**29 * Reactive module debug tools.30 *31 * If debug is enabled, this reactive module will spy all the reactive instances and keep a record32 * of the changes and components they have.33 *34 * It is important to note that the Debug class is also a Reactive module. The debug instance keeps35 * the reactive instances data as its own state. This way it is possible to implement development tools36 * that whatches this data.37 *38 * @class      core/reactive/local/reactive/debug/Debug39 * @copyright  2021 Ferran Recio <ferran@moodle.com>40 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later41 */42class Debug extends Reactive {43    /**44     * Set the initial state.45     *46     * @param {object} stateData the initial state data.47     */48    setInitialState(stateData) {49        super.setInitialState(stateData);50        log.debug(`Debug module "M.reactive" loaded.`);51    }52    /**53     * List the currents page reactives instances.54     */55    get list() {56        return JSON.parse(JSON.stringify(this.state.reactives));57    }58    /**59     * Register a new Reactive instance.60     *61     * This method is called every time a "new Reactive" is executed.62     *63     * @param {Reactive} instance the reactive instance64     */65    registerNewInstance(instance) {66        // Generate a valid variable name for that instance.67        let name = instance.name ?? `instance${this.state.reactives.length}`;68        name = name.replace(/\W/g, '');69        log.debug(`Registering new reactive instance "M.reactive.${name}"`);70        reactiveInstances[name] = instance;71        reactiveDebuggers[name] = new DebugInstance(reactiveInstances[name]);72        // Register also in the state.73        this.dispatch('putInstance', name, instance);74        // Add debug watchers to instance.75        const refreshMethod = () => {76            this.dispatch('putInstance', name, instance);77        };78        instance.target.addEventListener('readmode:on', refreshMethod);79        instance.target.addEventListener('readmode:off', refreshMethod);80        instance.target.addEventListener('registerComponent:success', refreshMethod);81        instance.target.addEventListener('transaction:end', refreshMethod);82        // We store the last transaction into the state.83        const storeTransaction = ({detail}) => {84            const changes = detail?.changes;85            this.dispatch('lastTransaction', name, changes);86        };87        instance.target.addEventListener('transaction:start', storeTransaction);88    }89    /**90     * Returns a debugging object for a specific Reactive instance.91     *92     * A debugging object is a class that wraps a Reactive instance to quick access some of the93     * reactive methods using the browser JS console.94     *95     * @param {string} name the Reactive instance name96     * @returns {DebugInstance} a debug object wrapping the Reactive instance97     */98    debug(name) {99        return reactiveDebuggers[name];100    }101}102/**103 * The debug state mutations class.104 *105 * @class core/reactive/local/reactive/debug/Mutations106 */107class Mutations {108    /**109     * Insert or update a new instance into the debug state.110     *111     * @param {StateManager} stateManager the debug state manager112     * @param {string} name the instance name113     * @param {Reactive} instance the reactive instance114     */115    putInstance(stateManager, name, instance) {116        const state = stateManager.state;117        stateManager.setReadOnly(false);118        if (state.reactives.has(name)) {119            state.reactives.get(name).countcomponents = instance.components.length;120            state.reactives.get(name).readOnly = instance.stateManager.readonly;121            state.reactives.get(name).modified = new Date().getTime();122        } else {123            state.reactives.add({124                id: name,125                countcomponents: instance.components.length,126                readOnly: instance.stateManager.readonly,127                lastChanges: [],128                modified: new Date().getTime(),129            });130        }131        stateManager.setReadOnly(true);132    }133    /**134     * Update the lastChanges attribute with a list of changes135     *136     * @param {StateManager} stateManager the debug reactive state137     * @param {string} name tje instance name138     * @param {array} changes the list of changes139     */140    lastTransaction(stateManager, name, changes) {141        if (!changes || changes.length === 0) {142            return;143        }144        const state = stateManager.state;145        const lastChanges = ['transaction:start'];146        changes.forEach(change => {147            lastChanges.push(change.eventName);148        });149        lastChanges.push('transaction:end');150        stateManager.setReadOnly(false);151        state.reactives.get(name).lastChanges = lastChanges;152        stateManager.setReadOnly(true);153    }154}155/**156 * Class used to debug a specific instance and manipulate the state from the JS console.157 *158 * @class      core/reactive/local/reactive/debug/DebugInstance159 * @copyright  2021 Ferran Recio <ferran@moodle.com>160 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later161 */162class DebugInstance {163    /**164     * Constructor.165     *166     * @param {Reactive} instance the reactive instance167     */168    constructor(instance) {169        this.instance = instance;170        // Add some debug data directly into the instance. This way we avoid having attributes171        // that will confuse the console aoutocomplete.172        if (instance._reactiveDebugData === undefined) {173            instance._reactiveDebugData = {174                highlighted: false,175            };176        }177    }178    /**179     * Set the read only mode.180     *181     * Quick access to the instance setReadOnly method.182     *183     * @param {bool} value the new read only value184     */185    set readOnly(value) {186        this.instance.stateManager.setReadOnly(value);187    }188    /**189     * Get the read only value190     *191     * @returns {bool}192     */193    get readOnly() {194        return this.instance.stateManager.readonly;195    }196    /**197     * Return the current state object.198     *199     * @returns {object}200     */201    get state() {202        return this.instance.state;203    }204    /**205     * Tooggle the reactive HTML element highlight registered in this reactive instance.206     *207     * @param {bool} value the highlight value208     */209    set highlight(value) {210        this.instance._reactiveDebugData.highlighted = value;211        this.instance.components.forEach(({element}) => {212            const border = (value) ? `thick solid #0000FF` : '';213            element.style.border = border;214        });215    }216    /**217     * Get the current highligh value.218     *219     * @returns {bool}220     */221    get highlight() {222        return this.instance._reactiveDebugData.highlighted;223    }224    /**225     * List all the components registered in this instance.226     *227     * @returns {array}228     */229    get components() {230        return [...this.instance.components];231    }232    /**233     * List all the state changes evenet pending to dispatch.234     *235     * @returns {array}236     */237    get changes() {238        const result = [];239        this.instance.stateManager.eventsToPublish.forEach(240            (element) => {241                result.push(element.eventName);242            }243        );244        return result;245    }246    /**247     * Dispatch a change in the state.248     *249     * Usually reactive modules throw an error directly to the components when something250     * goes wrong. However, course editor can directly display a notification.251     *252     * @method dispatch253     * @param {*} args254     */255    async dispatch(...args) {256        this.instance.dispatch(...args);257    }258    /**259     * Return all the HTML elements registered in the instance components.260     *261     * @returns {array}262     */263    get elements() {264        const result = [];265        this.instance.components.forEach(({element}) => {266            result.push(element);267        });268        return result;269    }270    /**271     * Return a plain copy of the state data.272     *273     * @returns {object}274     */275    get stateData() {276        return JSON.parse(JSON.stringify(this.state));277    }278    /**279     * Process an update state array.280     *281     * @param {array} updates an array of update state messages282     */283    processUpdates(updates) {284        this.instance.stateManager.processUpdates(updates);285    }286}287const stateChangedEventName = 'core_reactive_debug:stateChanged';288/**289 * Internal state changed event.290 *291 * @method dispatchStateChangedEvent292 * @param {object} detail the full state293 * @param {object} target the custom event target (document if none provided)294 */295function dispatchStateChangedEvent(detail, target) {296    if (target === undefined) {297        target = document;298    }299    target.dispatchEvent(300        new CustomEvent(301            stateChangedEventName,302            {303                bubbles: true,304                detail: detail,305            }306        )307    );308}309/**310 * The main init method to initialize the reactive debug.311 * @returns {object}312 */313export const initDebug = () => {314    const debug = new Debug({315        name: 'CoreReactiveDebug',316        eventName: stateChangedEventName,317        eventDispatch: dispatchStateChangedEvent,318        mutations: new Mutations(),319        state: {320            reactives: [],321        },322    });323    // The reactiveDebuggers will be used as a way of access the debug instances but also to register every new324    // instance. To ensure this will update the reactive debug state we add the registerNewInstance method to it.325    reactiveDebuggers.registerNewInstance = debug.registerNewInstance.bind(debug);326    return {327        debug,328        debuggers: reactiveDebuggers,329    };...

index.js

Source:index.js

1let prefix = "$reactiveDaoPath_"2const reactiveMixin = dao => ({3  beforeCreate() {4    if(!this.$options.reactive) return; // Avoid distributed fat5    if (!this.$options.computed) this.$options.computed = {}6    for(let key in this.$options.reactive) {7      let path = this.$options.reactive[key]8      if(typeof path == 'function'){9        this.$options.computed[prefix + key] = path10      } else if(typeof path == 'string') {11      } else if(path.length !== undefined) {12      } else throw new Error("unknown reactive path "+path)13    }14    const optionData = this.$options.data15    this.$options.data = function vueReactiveDaoInjectedDataFn () {16      const data = (17          (typeof optionData === 'function')18              ? optionData.call(this)19              : optionData20      ) || {}21      for (let key in this.$options.reactive) {22        data[key] = undefined23        data[key+"Error"] = undefined24      }25      return data26    }27  },28  created() {29    if(!this.$options.reactive) return; // Avoid distributed fat30    this.reactiveObservables = {}31    let reactiveObservables = this.reactiveObservables32    for(let key in this.$options.reactive) {33      let path = this.$options.reactive[key]34      if(typeof path == 'function'){35        let p = this[prefix + key]36        if(p) {37          reactiveObservables[key] = dao.observable(p)38          reactiveObservables[key].bindProperty(this, key)39          reactiveObservables[key].bindErrorProperty(this, key+"Error")40        }41        let oldPathJson42        this.$watch(prefix + key, newPath => {43          const json = JSON.stringify(newPath)44          const match = JSON.stringify(newPath) == oldPathJson45          oldPathJson = json46          if(match) return47          if(reactiveObservables[key]) {48            this[key] = undefined49            this[key+"Error"] = undefined50            reactiveObservables[key].unbindProperty(this, key)51            reactiveObservables[key].unbindErrorProperty(this, key+"Error")52          }53          delete reactiveObservables[key]54          if(newPath) {55            reactiveObservables[key] = dao.observable(newPath)56            reactiveObservables[key].bindProperty(this, key)57            reactiveObservables[key].bindErrorProperty(this, key+"Error")58          } else {59            this[key] = undefined60          }61        })62      } else if(typeof path == 'string') {63        reactiveObservables[key] = dao.observable(path)64        reactiveObservables[key].bindProperty(this, key)65        reactiveObservables[key].bindErrorProperty(this, key+"Error")66      } else if(path.length !== undefined) {67        reactiveObservables[key] = dao.observable(path)68        reactiveObservables[key].bindProperty(this, key)69        reactiveObservables[key].bindErrorProperty(this, key+"Error")70      } else throw new Error("unknown reactive path "+path)71    }72  },73  beforeDestroy() {74    if(!this.$options.reactive) return; // Avoid distributed fat75    let reactiveObservables = this.reactiveObservables76    for(let key in reactiveObservables) {77      reactiveObservables[key].unbindProperty(this, key)78      reactiveObservables[key].unbindErrorProperty(this, key+"Error")79    }80  }81})82const reactivePrefetchMixin = dao => ({83  beforeCreate() {84    if(typeof window == 'undefined') return; // NO REACTIVE PREFETCH ON SERVER85    if(!this.$options.reactivePreFetch) return;86    if (!this.$options.computed) this.$options.computed = {}87    this.$options.computed[prefix+"_reactivePreFetch"] = function() {88      return this.$options.reactivePreFetch(this.$route, this.$router)89    }90    const optionData = this.$options.data91    this.$options.data = function vueReactiveDaoInjectedDataFn () {92      const data = (93          (typeof optionData === 'function')94              ? optionData.call(this)95              : optionData96      ) || {}97      data.reactivePreFetchedPaths = []98      data.reactivePreFetchError = null99      return data100    }101  },102  created() {103    if(typeof window == 'undefined') return; // NO REACTIVE PREFETCH ON SERVER104    if(!this.$options.reactivePreFetch) return105    let paths = this[prefix+"_reactivePreFetch"]106    if(paths) {107      this.reactivePreFetchObservable = dao.observable({ paths })108      this.reactivePreFetchObservable.bindProperty(this, "reactivePreFetchedPaths")109      this.reactivePreFetchObservable.bindErrorProperty(this, "reactivePreFetchError")110    }111    this.$watch(prefix+"_reactivePreFetch", paths => {112      if(this.reactivePreFetchObservable) {113        this.reactivePreFetchObservable.unbindProperty(this, "reactivePreFetchedPaths")114        this.reactivePreFetchObservable.unbindErrorProperty(this, "reactivePreFetchError")115      }116      delete this.reactivePreFetchObservable117      if(paths) {118        this.reactivePreFetchObservable = dao.observable({ paths })119        this.reactivePreFetchObservable.bindProperty(this, "reactivePreFetchedPaths")120        this.reactivePreFetchObservable.bindErrorProperty(this, "reactivePreFetchError")121      }122    })123  },124  beforeDestroy() {125    if(typeof window == 'undefined') return; // NO REACTIVE PREFETCH ON SERVER126    if(!this.$options.reactivePreFetch) return; // Avoid distributed fat127    if(this.reactivePreFetchObservable) {128      this.reactivePreFetchObservable.unbindProperty(this, "reactivePreFetchedPaths")129      this.reactivePreFetchObservable.unbindErrorProperty(this, "reactivePreFetchError")130    }131  }132})133const reactiveComponent = dao => ({134  name: "Reactive",135  props: {136    what: {137      type: Object138    }139  },140  data() {141    let values = {}, errors = {}142    for(const key in this.what) {143      values[key] = undefined144      values[key + 'Error'] = undefined145    }146    return {147      values148    }149  },150  created() {151    this.observables = {}152    for(const name in this.what) {153      const what = this.what[key]154      const observable = dao.observable(what)155      this.observables[name] = observable156      observable.bindProperty(this.values[name])157      observable.bindErrorProperty(this.values[name+'Error'])158    }159  },160  beforeDestroy() {161    for(const name in this.observables) {162      const observable = this.observables[name]163      observable.unbindProperty(this, "reactivePreFetchedPaths")164      observable.unbindErrorProperty(this, "reactivePreFetchError")165    }166  },167  render(createElement) {168    return this.$scopedSlots.default(this.values)[0]169  }170})171const ReactiveDaoVue = {172  install(Vue, options) {173    if(!options || !options.dao) throw new Error("dao option required")174    const dao = options.dao175    Vue.mixin(reactiveMixin(dao))176    Vue.mixin(reactivePrefetchMixin(dao))177    Vue.component('reactive', reactiveComponent(dao))178  }179}180export { ReactiveDaoVue, reactiveMixin, reactivePrefetchMixin, reactiveComponent }...

expected.js

Source:expected.js

1/* generated by Svelte vX.Y.Z */2import {3	SvelteComponent,4	component_subscribe,5	detach,6	element,7	init,8	insert,9	noop,10	safe_not_equal,11	space,12	subscribe,13	toggle_class14} from "svelte/internal";15import { reactiveStoreVal, unreactiveExport } from './store';16function create_fragment(ctx) {17	let div0;18	let t0;19	let div1;20	let t1;21	let div2;22	let t2;23	let div3;24	let t3;25	let div4;26	let t4;27	let div5;28	let t5;29	let div6;30	let t6;31	let div7;32	let t7;33	let div8;34	return {35		c() {36			div0 = element("div");37			t0 = space();38			div1 = element("div");39			t1 = space();40			div2 = element("div");41			t2 = space();42			div3 = element("div");43			t3 = space();44			div4 = element("div");45			t4 = space();46			div5 = element("div");47			t5 = space();48			div6 = element("div");49			t6 = space();50			div7 = element("div");51			t7 = space();52			div8 = element("div");53			toggle_class(div0, "update1", reactiveModuleVar);54			toggle_class(div1, "update2", /*reactiveConst*/ ctx[0].x);55			toggle_class(div2, "update3", nonReactiveGlobal && /*reactiveConst*/ ctx[0].x);56			toggle_class(div3, "update4", /*$reactiveStoreVal*/ ctx[2]);57			toggle_class(div4, "update5", /*$reactiveDeclaration*/ ctx[3]);58			toggle_class(div5, "static1", nonReactiveModuleVar);59			toggle_class(div6, "static2", nonReactiveGlobal);60			toggle_class(div7, "static3", nonReactiveModuleVar && nonReactiveGlobal);61			toggle_class(div8, "static4", unreactiveExport);62		},63		m(target, anchor) {64			insert(target, div0, anchor);65			insert(target, t0, anchor);66			insert(target, div1, anchor);67			insert(target, t1, anchor);68			insert(target, div2, anchor);69			insert(target, t2, anchor);70			insert(target, div3, anchor);71			insert(target, t3, anchor);72			insert(target, div4, anchor);73			insert(target, t4, anchor);74			insert(target, div5, anchor);75			insert(target, t5, anchor);76			insert(target, div6, anchor);77			insert(target, t6, anchor);78			insert(target, div7, anchor);79			insert(target, t7, anchor);80			insert(target, div8, anchor);81		},82		p(ctx, [dirty]) {83			if (dirty & /*reactiveModuleVar*/ 0) {84				toggle_class(div0, "update1", reactiveModuleVar);85			}86			if (dirty & /*reactiveConst*/ 1) {87				toggle_class(div1, "update2", /*reactiveConst*/ ctx[0].x);88			}89			if (dirty & /*nonReactiveGlobal, reactiveConst*/ 1) {90				toggle_class(div2, "update3", nonReactiveGlobal && /*reactiveConst*/ ctx[0].x);91			}92			if (dirty & /*$reactiveStoreVal*/ 4) {93				toggle_class(div3, "update4", /*$reactiveStoreVal*/ ctx[2]);94			}95			if (dirty & /*$reactiveDeclaration*/ 8) {96				toggle_class(div4, "update5", /*$reactiveDeclaration*/ ctx[3]);97			}98		},99		i: noop,100		o: noop,101		d(detaching) {102			if (detaching) detach(div0);103			if (detaching) detach(t0);104			if (detaching) detach(div1);105			if (detaching) detach(t1);106			if (detaching) detach(div2);107			if (detaching) detach(t2);108			if (detaching) detach(div3);109			if (detaching) detach(t3);110			if (detaching) detach(div4);111			if (detaching) detach(t4);112			if (detaching) detach(div5);113			if (detaching) detach(t5);114			if (detaching) detach(div6);115			if (detaching) detach(t6);116			if (detaching) detach(div7);117			if (detaching) detach(t7);118			if (detaching) detach(div8);119		}120	};121}122let nonReactiveModuleVar = Math.random();123let reactiveModuleVar = Math.random();124function instance($$self, $$props, $$invalidate) {125	let reactiveDeclaration;126	let $reactiveStoreVal;127	let $reactiveDeclaration,128		$$unsubscribe_reactiveDeclaration = noop,129		$$subscribe_reactiveDeclaration = () => ($$unsubscribe_reactiveDeclaration(), $$unsubscribe_reactiveDeclaration = subscribe(reactiveDeclaration, $$value => $$invalidate(3, $reactiveDeclaration = $$value)), reactiveDeclaration);130	component_subscribe($$self, reactiveStoreVal, $$value => $$invalidate(2, $reactiveStoreVal = $$value));131	$$self.$$.on_destroy.push(() => $$unsubscribe_reactiveDeclaration());132	nonReactiveGlobal = Math.random();133	const reactiveConst = { x: Math.random() };134	reactiveModuleVar += 1;135	if (Math.random()) {136		reactiveConst.x += 1;137	}138	$: $$subscribe_reactiveDeclaration($$invalidate(1, reactiveDeclaration = reactiveModuleVar * 2));139	return [reactiveConst, reactiveDeclaration, $reactiveStoreVal, $reactiveDeclaration];140}141class Component extends SvelteComponent {142	constructor(options) {143		super();144		init(this, options, instance, create_fragment, safe_not_equal, {});145	}146}...

or-we-516.js

Source:or-we-516.js

1// ORNO OR-WE-516 - 3-phase energy meter with RS-485, 80A, MID, 3 modules, DIN TH-35mm2// https://orno.pl/en/product/1086/3-phase-energy-meter-with-rs-485-80a-mid-3-modules-din-th-35mm3//4// Defaults: address=1 baudRate=9600 dataBits=8 parity=odd stopBits=15const ieee754 = require('ieee754')6const r = (val, offset) => ieee754.read(val.buffer, offset << 1, false, 23, 4)7async function read (client) {8  const val = await client.readHoldingRegisters(0, 60)9  const serialNumber = val.data[0]10  const address = val.data[2]11  const baudRate = val.data[3]12  const softwareVersion = r(val, 4)13  const hardwareVersion = r(val, 6)14  const ctRate = val.data[8]15  const s0OutputRate = r(val, 9)16  const a3 = val.data[11]17  const cycleTime = val.data[13]18  const av = r(val, 14)19  const bv = r(val, 16)20  const cv = r(val, 18)21  const gridFrequency = r(val, 20)22  const ac = r(val, 22)23  const bc = r(val, 24)24  const cc = r(val, 26)25  const totalActivePower = r(val, 28)26  const ap = r(val, 30)27  const bp = r(val, 32)28  const cp = r(val, 34)29  const totalReactivePower = r(val, 36)30  const arp = r(val, 38)31  const brp = r(val, 40)32  const crp = r(val, 42)33  const totalApparentPower = r(val, 44)34  const aap = r(val, 46)35  const bap = r(val, 48)36  const cap = r(val, 50)37  const totalPowerFactor = r(val, 52)38  const apf = r(val, 54)39  const bpf = r(val, 56)40  const cpf = r(val, 58)41  const val2 = await client.readHoldingRegisters(0x100, 48)42  const totalActiveEnergy = r(val2, 0)43  const aTotalActiveEnergy = r(val2, 2)44  const bTotalActiveEnergy = r(val2, 4)45  const cTotalActiveEnergy = r(val2, 6)46  const forwardActiveEnergy = r(val2, 8)47  const aForwardActiveEnergy = r(val2, 10)48  const bForwardActiveEnergy = r(val2, 12)49  const cForwardActiveEnergy = r(val2, 14)50  const reverseActiveEnergy = r(val2, 16)51  const aReverseActiveEnergy = r(val2, 18)52  const bReverseActiveEnergy = r(val2, 20)53  const cReverseActiveEnergy = r(val2, 22)54  const totalReactiveEnergy = r(val2, 24)55  const aTotalReactiveEnergy = r(val2, 26)56  const bTotalReactiveEnergy = r(val2, 28)57  const cTotalReactiveEnergy = r(val2, 30)58  const forwardReactiveEnergy = r(val2, 32)59  const aForwardReactiveEnergy = r(val2, 34)60  const bForwardReactiveEnergy = r(val2, 36)61  const cForwardReactiveEnergy = r(val2, 38)62  const reverseReactiveEnergy = r(val2, 40)63  const aReverseReactiveEnergy = r(val2, 42)64  const bReverseReactiveEnergy = r(val2, 44)65  const cReverseReactiveEnergy = r(val2, 46)66  return {67    serialNumber,68    address,69    baudRate,70    softwareVersion,71    hardwareVersion,72    ctRate,73    s0OutputRate,74    a3,75    cycleTime,76    av, bv, cv,77    gridFrequency,78    ac, bc, cc,79    totalActivePower,80    ap, bp, cp,81    totalReactivePower,82    arp, brp, crp,83    totalApparentPower,84    aap, bap, cap,85    totalPowerFactor,86    apf, bpf, cpf,87    totalActiveEnergy,88    aTotalActiveEnergy,89    bTotalActiveEnergy,90    cTotalActiveEnergy,91    forwardActiveEnergy,92    aForwardActiveEnergy,93    bForwardActiveEnergy,94    cForwardActiveEnergy,95    reverseActiveEnergy,96    aReverseActiveEnergy,97    bReverseActiveEnergy,98    cReverseActiveEnergy,99    totalReactiveEnergy,100    aTotalReactiveEnergy,101    bTotalReactiveEnergy,102    cTotalReactiveEnergy,103    forwardReactiveEnergy,104    aForwardReactiveEnergy,105    bForwardReactiveEnergy,106    cForwardReactiveEnergy,107    reverseReactiveEnergy,108    aReverseReactiveEnergy,109    bReverseReactiveEnergy,110    cReverseReactiveEnergy,111  }112}113module.exports = {114  read,115  setup: async function (client, config) {116    const report = {}117    if (config.address) {118      report.address = await client.writeRegister(2, config.address)119    }120    if (config.baudRate) {121      report.address = await client.writeRegister(3, config.baudRate)122    }123    return report124  }...

pixelate.js

Source:pixelate.js

1const Shaders = require('Shaders'),2      Reactive = require('Reactive'),3      utils = require('./utils');4const mul = (segmentationTexture, uv) => Reactive.val(1).sub(5  utils.texture2D(segmentationTexture, uv).w.smoothStep(0.5, 0.5)6);7module.exports = (textures, amount) => {8  const uv = Shaders.functionVec2();9  const pixelSize = amount.add(0.1).mul(100);10  const tileSizeX = Reactive.div(pixelSize, utils.RESOLUTION.x);11  const tileSizeY = Reactive.div(pixelSize, utils.RESOLUTION.y);12  const uvCenter = Reactive.pack2(13    tileSizeX.mul(Reactive.floor(Reactive.div(uv.x, tileSizeX)).add(0.5)),14    tileSizeY.mul(Reactive.floor(Reactive.div(uv.y, tileSizeY)).add(0.5))15  );16  const uvTopLeft = Reactive.pack2(17    tileSizeX.mul(Reactive.floor(Reactive.div(uv.x, tileSizeX))),18    tileSizeY.mul(Reactive.floor(Reactive.div(uv.y, tileSizeY)))19  );20  const uvTopRight = Reactive.pack2(21    tileSizeX.mul(Reactive.ceil(Reactive.div(uv.x, tileSizeX))),22    tileSizeY.mul(Reactive.floor(Reactive.div(uv.y, tileSizeY)))23  );24  const uvBottomLeft = Reactive.pack2(25    tileSizeX.mul(Reactive.floor(Reactive.div(uv.x, tileSizeX))),26    tileSizeY.mul(Reactive.ceil(Reactive.div(uv.y, tileSizeY)))27  );28  const uvBottomRight = Reactive.pack2(29    tileSizeX.mul(Reactive.ceil(Reactive.div(uv.x, tileSizeX))),30    tileSizeY.mul(Reactive.ceil(Reactive.div(uv.y, tileSizeY)))31  );32  let colorCenter = utils.texture2D(textures.camera, uvCenter);33  let colorTopLeft = utils.texture2D(textures.camera, uvTopLeft);34  let colorTopRight = utils.texture2D(textures.camera, uvTopRight);35  let colorBottomLeft = utils.texture2D(textures.camera, uvBottomLeft);36  let colorBottomRight = utils.texture2D(textures.camera, uvBottomRight);37  let mulCenter = mul(textures.segmentation, uvCenter);38  let mulTopLeft = mul(textures.segmentation, uvTopLeft);39  let mulTopRight = mul(textures.segmentation, uvTopRight);40  let mulBottomLeft = mul(textures.segmentation, uvBottomLeft);41  let mulBottomRight = mul(textures.segmentation, uvBottomRight);42  return colorCenter.mul(mulCenter)43    .add(44      colorTopLeft45        .mul(mulTopLeft)46        .mul(Reactive.val(1).sub(mulCenter))47    )48    .add(49      colorTopRight50        .mul(mulTopRight)51        .mul(Reactive.val(1).sub(mulCenter))52        .mul(Reactive.val(1).sub(mulTopLeft))53    )54    .add(55      colorBottomLeft56        .mul(mulBottomLeft)57        .mul(Reactive.val(1).sub(mulCenter))58        .mul(Reactive.val(1).sub(mulTopLeft))59        .mul(Reactive.val(1).sub(mulTopRight))60    )61    .add(62      colorBottomRight63        .mul(mulBottomRight)64        .mul(Reactive.val(1).sub(mulCenter))65        .mul(Reactive.val(1).sub(mulTopLeft))66        .mul(Reactive.val(1).sub(mulTopRight))67        .mul(Reactive.val(1).sub(mulBottomLeft))68    )69    .add(70      colorCenter71        .mul(Reactive.val(1).sub(mulCenter))72        .mul(Reactive.val(1).sub(mulTopLeft))73        .mul(Reactive.val(1).sub(mulTopRight))74        .mul(Reactive.val(1).sub(mulBottomLeft))75        .mul(Reactive.val(1).sub(mulBottomRight))76    )77  ;...

reactive_system_g_u_i_8h.js

Source:reactive_system_g_u_i_8h.js

1var reactive_system_g_u_i_8h =2[3    [ "ReactiveSystemGUIThread", "class_reactive_system_g_u_i_thread.html", "class_reactive_system_g_u_i_thread" ],4    [ "ReactiveSystemGUI", "class_reactive_system_g_u_i.html", "class_reactive_system_g_u_i" ],5    [ "AFFECTIVE", "reactive_system_g_u_i_8h.html#a96804a5f150f4159abc1a7a9c00c0df5", null ],6    [ "AGGRESIVE", "reactive_system_g_u_i_8h.html#a2c0773e5b4f20ff32567500d26fad913", null ],7    [ "ANGRY", "reactive_system_g_u_i_8h.html#a64e97e66a3d71639452832c041efc7de", null ],8    [ "BEHAVIOUR_DISPLAY_HEIGHT", "reactive_system_g_u_i_8h.html#a5d28a1b7876127b9f763efb2db7f8806", null ],9    [ "BEHAVIOUR_DISPLAY_WIDTH", "reactive_system_g_u_i_8h.html#ae5b156abb2add75a8578a38873af4b70", null ],10    [ "FEARFUL", "reactive_system_g_u_i_8h.html#a68c52ceef554c8736c0c90116626f0f8", null ],11    [ "HAPPY", "reactive_system_g_u_i_8h.html#aecba94fc0f3303d053841d336e05b64e", null ],12    [ "LEFT_HAND", "reactive_system_g_u_i_8h.html#a2eff09387fb5d20d8af4fa186ae37c4d", null ],13    [ "NONE", "reactive_system_g_u_i_8h.html#a655c84af1b0034986ff56e12e84f983d", null ],14    [ "NUMBER_OF_CHILD_BEHAVIOURAL_STATES", "reactive_system_g_u_i_8h.html#a104e93af361588c686f7bf40050b34f9", null ],15    [ "RIGHT_HAND", "reactive_system_g_u_i_8h.html#a5d1d275cfec76197e014fe4d58f2e569", null ],16    [ "ROLL_AXIS", "reactive_system_g_u_i_8h.html#a527c335c53a45520f12e8b3d12a15dc9", null ],17    [ "SAD", "reactive_system_g_u_i_8h.html#ad98b7336344da79b1a78d405699b0826", null ],18    [ "STRINGLENGTH", "reactive_system_g_u_i_8h.html#a9af5bd0ac4c6a22d2a37ff2799a41118", null ],19    [ "X_AXIS", "reactive_system_g_u_i_8h.html#a096f6d223bb5d11bebd9ce7535508fa2", null ],20    [ "Y_AXIS", "reactive_system_g_u_i_8h.html#ab9e30cc0a88c208dc662906171bb8265", null ],21    [ "Z_AXIS", "reactive_system_g_u_i_8h.html#a702b4b323c595211ec77a5995d9ee155", null ],22    [ "affective_cb", "reactive_system_g_u_i_8h.html#aca7beba81c8b94dde6486f39eff95e95", null ],23    [ "aggresive_cb", "reactive_system_g_u_i_8h.html#ae283e7b6f1a156d2a3e620f13fe1e635", null ],24    [ "angry_cb", "reactive_system_g_u_i_8h.html#a3d751f8806f6a6ec51c6923ed3476af3", null ],25    [ "fearful_cb", "reactive_system_g_u_i_8h.html#a102a1f993c2044891c60bd48b2a031d5", null ],26    [ "get_input_cb", "reactive_system_g_u_i_8h.html#a88b327aa4f9d8f98ff719bb89e385203", null ],27    [ "happy_cb", "reactive_system_g_u_i_8h.html#ae5a4e6d82fd01464ad337238c1e64a35", null ],28    [ "none_cb", "reactive_system_g_u_i_8h.html#a910d3784ebd2b2ea8a6daa777d66ae9b", null ],29    [ "pause", "reactive_system_g_u_i_8h.html#a80fcdc6cca8c24d2d0d59a885c1181d4", null ],30    [ "sad_cb", "reactive_system_g_u_i_8h.html#a1f8922fa471be9dedbacc3d3de78d190", null ]...

reactivePrac.js

Source:reactivePrac.js

1// const rawToReactive = new WeakMap();2// function getter(target, key, receiver) {3//   let res = Reflect.get(target, key, receiver);4//   return isObject(res) ? reactive(res) : res;5// }6// function setter(target, key, value, reciever) {7//   let hasKey = hasOwn(target, key);8//   let oldValue = target[key];9//   let res = Reflect.set(target, key, value, reciever);10//   if (!hasKey) {11//     console.log('trigger by add :>> ', 'trigger by add');12//   } else if (oldValue !== value) {13//     console.log('trigger by change :>> ', 'trigger by change');14//   }15//   return res;16// }17// function isObject(obj) {18//   return typeof obj === 'object';19// }20// function hasOwn(obj, key) {21//   let hasOwnProperty = Object.prototype.hasOwnProperty;22//   return hasOwnProperty.call(obj, key);23// }24// const handler = { get: getter, set: setter };25// function reactive(obj) {26//   return createReactiveObject(obj, handler, rawToReactive);27// }28// function createReactiveObject(target, handler, rawToReactive) {29//   let observed = rawToReactive.get(target);30//   if (observed) {31//     return observed;32//   }33//   observed = new Proxy(target, handler);34//   rawToReactive.set(target, observed);35//   return observed;36// }37// let data = { foo: 'foo', ary: [1, 2] }38// let r = reactive(data)39// r.ary.push(3)40const rawToReactive = new WeakMap()41const reactiveToRaw = new WeakMap()42function reactive(data) {43  return createReactiveObj(data, baseHandler, rawToReactive, reactiveToRaw)44}45function createReactiveObj(obj, handler, rawToReactive, reactiveToRaw) {46  const target = rawToReactive.get(obj)47  if (target) {48    return target49  }50  if (reactiveToRaw.has(obj)) {51    return obj52  }53  const proxy = new Proxy(obj, handler)54  rawToReactive.set(obj, proxy)55  reactiveToRaw.set(proxy, obj)56  return proxy57}58const baseHandler = {59  set: setter,60  get: getter,61}62function getter(target, key, receiver) {63  const value = Reflect.get(target, key, receiver)64  return isObject(value) ? reactive(value) : value65}66function setter(target, key, value, receiver) {67  const haskey = hasOwn(target, key)68  let oldValue = target[key]69  const res = Reflect.set(target, key, value, receiver)70  if (!haskey) {71    console.log('trigger by new prop key')72  } else if (oldValue !== value) {73    console.log('trigger by value change')74  }75  return res76}77function isObject(value) {78  return typeof value === 'object'79}80function hasOwn(obj, key) {81  const hasOwnProperty = Object.prototype.hasOwnProperty82  return hasOwnProperty.call(obj, key)83}84let obj = {name: 'li', age: '12'}85let proxy = reactive(obj)...

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  await page.type('#tsf > div:nth-child(2) > div > div.RNNXgb > div > div.a4bIc > input', 'Hello World');7  await page.screenshot({ path: `example.png` });8  await browser.close();9})();10const { chromium } = require('playwright');11(async () => {12  const browser = await chromium.launch({ headless: false });13  const context = await browser.newContext();14  const page = await context.newPage();15  await page.type('#tsf > div:nth-child(2) > div > div.RNNXgb > div > div.a4bIc > input', 'Hello World');16  await page.screenshot({ path: `example.png` });17  await browser.close();18})();19const { chromium } = require('playwright');20(async () => {21  const browser = await chromium.launch({ headless: false });22  const context = await browser.newContext();23  const page = await context.newPage();24  await page.type('#tsf > div:nth-child(2) > div > div.RNNXgb > div > div.a4bIc > input', 'Hello World');25  await page.screenshot({ path: `example.png` });26  await browser.close();27})();28const { chromium } = require('playwright');29(async () => {30  const browser = await chromium.launch({ headless: false });31  const context = await browser.newContext();32  const page = await context.newPage();33  await page.type('#tsf > div:nth-child(2) > div > div.RNNXgb > div > div.a4bIc > input', 'Hello World');34  await page.screenshot({ path: `example.png

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=I agree');7  await page.type('input[aria-label="Search"]', 'Playwright');8  await page.click('input[value="Google Search"]');9  await page.waitForLoadState('load');10  await page.screenshot({ path: `example.png` });11  await browser.close();12})();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  await page.click('text=I agree');19  await page.type('input[aria-label="Search"]', 'Playwright');20  await page.click('input[value="Google Search"]');21  await page.waitForLoadState('load');22  await page.screenshot({ path: `example.png` });23  await browser.close();24})();25const { chromium } = require('playwright');26(async () => {27  const browser = await chromium.launch();28  const context = await browser.newContext();29  const page = await context.newPage();30  await page.click('text=I agree');31  await page.type('input[aria-label="Search"]', 'Playwright');32  await page.click('input[value="Google Search"]');33  await page.waitForLoadState('load');34  await page.screenshot({ path: `example.png` });35  await browser.close();36})();37const { chromium } = require('playwright');38(async () => {39  const browser = await chromium.launch();40  const context = await browser.newContext();41  const page = await context.newPage();42  await page.click('text=I agree');43  await page.type('input[aria-label="Search"]', 'Playwright');44  await page.click('input[value="Google Search"]');45  await page.waitForLoadState('load');46  await page.screenshot({

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  await page.screenshot({ path: 'google.png' });7  await browser.close();8})();9const { chromium } = require('playwright');10(async () => {11  const browser = await chromium.launch({ headless: false });12  const context = await browser.newContext();13  const page = await context.newPage();14  await page.screenshot({ path: 'google.png' });15  await browser.close();16})();17const { chromium } = require('playwright');18(async () => {19  const browser = await chromium.launch({ headless: false });20  const context = await browser.newContext();21  const page = await context.newPage();22  await page.screenshot({ path: 'google.png' });23  await browser.close();24})();25const { chromium } = require('playwright');26(async () => {27  const browser = await chromium.launch({ headless: false });28  const context = await browser.newContext();29  const page = await context.newPage();30  await page.screenshot({ path: 'google.png' });31  await browser.close();32})();33const { chromium } = require('playwright');34(async () => {35  const browser = await chromium.launch({ headless: false });36  const context = await browser.newContext();37  const page = await context.newPage();38  await page.screenshot({ path: 'google.png' });39  await browser.close();40})();41const { chromium } = require('playwright');42(async () => {43  const browser = await chromium.launch({ headless: false });

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.screenshot({ path: 'example.png' });7  await browser.close();8})();9const {chromium} = require('playwright');10(async () => {11  const browser = await chromium.launch();12  const context = await browser.newContext();13  const page = await context.newPage();14  await page.screenshot({ path: 'example.png' });15  await browser.close();16})();17const {chromium} = require('playwright');18(async () => {19  const browser = await chromium.launch();20  const context = await browser.newContext();21  const page = await context.newPage();22  await page.screenshot({ path: 'example.png' });23  await browser.close();24})();25const {chromium} = require('playwright');26(async () => {27  const browser = await chromium.launch();28  const context = await browser.newContext();29  const page = await context.newPage();30  await page.screenshot({ path: 'example.png' });31  await browser.close();32})();33const {chromium} = require('playwright');34(async () => {35  const browser = await chromium.launch();36  const context = await browser.newContext();37  const page = await context.newPage();38  await page.screenshot({ path: 'example.png' });39  await browser.close();40})();41const {chromium} = require('playwright');42(async () => {43  const browser = await chromium.launch();44  const context = await browser.newContext();45  const page = await context.newPage();

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 userAgent = await page.evaluate(() => navigator.userAgent);7  console.log(userAgent);8  await browser.close();9})();10const { chromium } = require('playwright');11(async () => {12  const browser = await chromium.launch();13  const context = await browser.newContext();14  const page = await context.newPage();15  const userAgent = await page.evaluate(() => navigator.userAgent);16  console.log(userAgent);17  await browser.close();18})();19const { chromium } = require('playwright');20(async () => {21  const browser = await chromium.launch();22  const context = await browser.newContext();23  const page = await context.newPage();24  const userAgent = await page.evaluate(() => navigator.userAgent);25  console.log(userAgent);26  await browser.close();27})();28const { chromium } = require('playwright');29(async () => {30  const browser = await chromium.launch();31  const context = await browser.newContext();32  const page = await context.newPage();33  const userAgent = await page.evaluate(() => navigator.userAgent);34  console.log(userAgent);35  await browser.close();36})();37const { chromium } = require('playwright');38(async () => {39  const browser = await chromium.launch();40  const context = await browser.newContext();41  const page = await context.newPage();42  const userAgent = await page.evaluate(() => navigator.userAgent);43  console.log(userAgent);44  await browser.close();45})();46const {

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.screenshot({ path: `example.png` });7  await browser.close();8})();9const { chromium } = require('playwright');10(async () => {11  const browser = await chromium.launch();12  const context = await browser.newContext();13  const page = await context.newPage();14  await page.screenshot({ path: `example.png` });15  await browser.close();16})();17const { chromium } = require('playwright');18(async () => {19  const browser = await chromium.launch();20  const context = await browser.newContext();21  const page = await context.newPage();22  await page.screenshot({ path: `example.png` });23  await browser.close();24})();25const { chromium } = require('playwright');26(async () => {27  const browser = await chromium.launch();28  const context = await browser.newContext();29  const page = await context.newPage();30  await page.screenshot({ path: `example.png` });31  await browser.close();32})();33const puppeteer = require('puppeteer');34(async () => {35  const browser = await puppeteer.launch();36  const page = await browser.newPage();37  await page.screenshot({ path: `example.png` });38  await browser.close();39})();40const puppeteer = require('puppeteer');41(async () => {42  const browser = await puppeteer.launch();43  const page = await browser.newPage();44  await page.screenshot({ path: `example.png` });

Using AI Code Generation

1const playwright = require('playwright');2(async () => {3  const browser = await playwright.chromium.launch({ headless: false });4  const context = await browser.newContext();5  const page = await context.newPage();6  const text = await page.evaluate(() => {7    return document.querySelector('.navbar__inner').innerText;8  });9  console.log(text);10  await browser.close();11})();12const playwright = require('playwright');13(async () => {14  const browser = await playwright.chromium.launch({ headless: false });15  const context = await browser.newContext();16  const page = await context.newPage();17  const text = await page.evaluate(() => {18    return document.querySelector('.navbar__inner').innerText;19  });20  console.log(text);21  await browser.close();22})();23const playwright = require('playwright');24(async () => {25  const browser = await playwright.chromium.launch({ headless: false });26  const context = await browser.newContext();27  const page = await context.newPage();28  const text = await page.evaluate(() => {29    return document.querySelector('.navbar__inner').innerText;30  });31  console.log(text);32  await browser.close();33})();34const playwright = require('playwright');35(async () => {36  const browser = await playwright.chromium.launch({ headless: false });37  const context = await browser.newContext();38  const page = await context.newPage();39  const text = await page.evaluate(() => {40    return document.querySelector('.navbar__inner').innerText;41  });42  console.log(text);43  await browser.close();44})();45const playwright = require('playwright');46(async () => {47  const browser = await playwright.chromium.launch({ headless: false });48  const context = await browser.newContext();49  const page = await context.newPage();50  const text = await page.evaluate(() => {51    return document.querySelector('.navbar__inner').innerText;52  });

Using AI Code Generation

1const {chromium, webkit, firefox} = require('playwright');2(async () => {3  const browser = await chromium.launch();4  const page = await browser.newPage();5  const selector = 'text=Get started';6  await page.waitForSelector(selector);7  await page.click(selector);8  await page.waitForSelector('text=Installation');9  await browser.close();10})();11const {chromium, webkit, firefox} = require('playwright');12(async () => {13  const browser = await chromium.launch();14  const page = await browser.newPage();15  const selector = 'text=Get started';16  await page.waitForSelector(selector);17  await page.click(selector);18  await page.waitForSelector('text=Installation');19  await browser.close();20})();21const {chromium, webkit, firefox} = require('playwright');22(async () => {23  const browser = await chromium.launch();24  const page = await browser.newPage();25  const selector = 'text=Get started';26  await page.waitForSelector(selector);27  await page.click(selector);28  await page.waitForSelector('text=Installation');29  await browser.close();30})();31const {chromium, webkit, firefox} = require('playwright');32(async () => {33  const browser = await chromium.launch();34  const page = await browser.newPage();35  const selector = 'text=Get started';36  await page.waitForSelector(selector);37  await page.click(selector);38  await page.waitForSelector('text=Installation');39  await browser.close();40})();41const {chromium, webkit, firefox} = require('playwright');42(async () => {43  const browser = await chromium.launch();44  const page = await browser.newPage();45  const selector = 'text=Get started';46  await page.waitForSelector(selector);47  await page.click(selector);48  await page.waitForSelector('

Using AI Code Generation

1const { chromium } = require('playwright');2(async () => {3  const browser = await chromium.launch({headless: false});4  const page = await browser.newPage();5  const value = await page.$eval('input[type="search"]', el => el.value);6  console.log(value);7  await browser.close();8})();9const { chromium } = require('playwright');10(async () => {11  const browser = await chromium.launch({headless: false});12  const page = await browser.newPage();13  const value = await page.$eval('input[type="search"]', el => el.value);14  console.log(value);15  await page.type('input[type="search"]', 'playwright');16  const value2 = await page.$eval('input[type="search"]', el => el.value);17  console.log(value2);18  await browser.close();19})();

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.