KaneAI - World’s First E2E Software Testing Agent.Signup for Private Beta 
How to use ref method in Playwright Internal
Best JavaScript code snippet using playwright-internal
forwardRef-test.js
Source:forwardRef-test.js 
1/**2 * Copyright (c) Facebook, Inc. and its affiliates.3 *4 * This source code is licensed under the MIT license found in the5 * LICENSE file in the root directory of this source tree.6 *7 * @emails react-core8 */9'use strict';10describe('forwardRef', () => {11 let PropTypes;12 let React;13 let ReactNoop;14 beforeEach(() => {15 jest.resetModules();16 PropTypes = require('prop-types');17 React = require('react');18 ReactNoop = require('react-noop-renderer');19 });20 it('should update refs when switching between children', () => {21 function FunctionComponent({forwardedRef, setRefOnDiv}) {22 return (23 <section>24 <div ref={setRefOnDiv ? forwardedRef : null}>First</div>25 <span ref={setRefOnDiv ? null : forwardedRef}>Second</span>26 </section>27 );28 }29 const RefForwardingComponent = React.forwardRef((props, ref) => (30 <FunctionComponent {...props} forwardedRef={ref} />31 ));32 const ref = React.createRef();33 ReactNoop.render(<RefForwardingComponent ref={ref} setRefOnDiv={true} />);34 ReactNoop.flush();35 expect(ref.current.type).toBe('div');36 ReactNoop.render(<RefForwardingComponent ref={ref} setRefOnDiv={false} />);37 ReactNoop.flush();38 expect(ref.current.type).toBe('span');39 });40 it('should support rendering null', () => {41 const RefForwardingComponent = React.forwardRef((props, ref) => null);42 const ref = React.createRef();43 ReactNoop.render(<RefForwardingComponent ref={ref} />);44 ReactNoop.flush();45 expect(ref.current).toBe(null);46 });47 it('should support rendering null for multiple children', () => {48 const RefForwardingComponent = React.forwardRef((props, ref) => null);49 const ref = React.createRef();50 ReactNoop.render(51 <div>52 <div />53 <RefForwardingComponent ref={ref} />54 <div />55 </div>,56 );57 ReactNoop.flush();58 expect(ref.current).toBe(null);59 });60 it('should support propTypes and defaultProps', () => {61 function FunctionComponent({forwardedRef, optional, required}) {62 return (63 <div ref={forwardedRef}>64 {optional}65 {required}66 </div>67 );68 }69 const RefForwardingComponent = React.forwardRef(function NamedFunction(70 props,71 ref,72 ) {73 return <FunctionComponent {...props} forwardedRef={ref} />;74 });75 RefForwardingComponent.propTypes = {76 optional: PropTypes.string,77 required: PropTypes.string.isRequired,78 };79 RefForwardingComponent.defaultProps = {80 optional: 'default',81 };82 const ref = React.createRef();83 ReactNoop.render(84 <RefForwardingComponent ref={ref} optional="foo" required="bar" />,85 );86 ReactNoop.flush();87 expect(ref.current.children).toEqual([88 {text: 'foo', hidden: false},89 {text: 'bar', hidden: false},90 ]);91 ReactNoop.render(<RefForwardingComponent ref={ref} required="foo" />);92 ReactNoop.flush();93 expect(ref.current.children).toEqual([94 {text: 'default', hidden: false},95 {text: 'foo', hidden: false},96 ]);97 expect(() =>98 ReactNoop.render(<RefForwardingComponent ref={ref} optional="foo" />),99 ).toWarnDev(100 'Warning: Failed prop type: The prop `required` is marked as required in ' +101 '`ForwardRef(NamedFunction)`, but its value is `undefined`.\n' +102 ' in ForwardRef(NamedFunction) (at **)',103 );104 });105 it('should warn if not provided a callback during creation', () => {106 expect(() => React.forwardRef(undefined)).toWarnDev(107 'forwardRef requires a render function but was given undefined.',108 {withoutStack: true},109 );110 expect(() => React.forwardRef(null)).toWarnDev(111 'forwardRef requires a render function but was given null.',112 {withoutStack: true},113 );114 expect(() => React.forwardRef('foo')).toWarnDev(115 'forwardRef requires a render function but was given string.',116 {withoutStack: true},117 );118 });119 it('should warn if no render function is provided', () => {120 expect(React.forwardRef).toWarnDev(121 'forwardRef requires a render function but was given undefined.',122 {withoutStack: true},123 );124 });125 it('should warn if the render function provided has propTypes or defaultProps attributes', () => {126 function renderWithPropTypes(props, ref) {127 return null;128 }129 renderWithPropTypes.propTypes = {};130 function renderWithDefaultProps(props, ref) {131 return null;132 }133 renderWithDefaultProps.defaultProps = {};134 expect(() => React.forwardRef(renderWithPropTypes)).toWarnDev(135 'forwardRef render functions do not support propTypes or defaultProps. ' +136 'Did you accidentally pass a React component?',137 {withoutStack: true},138 );139 expect(() => React.forwardRef(renderWithDefaultProps)).toWarnDev(140 'forwardRef render functions do not support propTypes or defaultProps. ' +141 'Did you accidentally pass a React component?',142 {withoutStack: true},143 );144 });145 it('should not warn if the render function provided does not use any parameter', () => {146 const arityOfZero = () => <div ref={arguments[1]} />;147 React.forwardRef(arityOfZero);148 });149 it('should warn if the render function provided does not use the forwarded ref parameter', () => {150 const arityOfOne = props => <div {...props} />;151 expect(() => React.forwardRef(arityOfOne)).toWarnDev(152 'forwardRef render functions accept exactly two parameters: props and ref. ' +153 'Did you forget to use the ref parameter?',154 {withoutStack: true},155 );156 });157 it('should not warn if the render function provided use exactly two parameters', () => {158 const arityOfTwo = (props, ref) => <div {...props} ref={ref} />;159 React.forwardRef(arityOfTwo);160 });161 it('should warn if the render function provided expects to use more than two parameters', () => {162 const arityOfThree = (props, ref, x) => <div {...props} ref={ref} x={x} />;163 expect(() => React.forwardRef(arityOfThree)).toWarnDev(164 'forwardRef render functions accept exactly two parameters: props and ref. ' +165 'Any additional parameter will be undefined.',166 {withoutStack: true},167 );168 });169 it('should honor a displayName if set on the forwardRef wrapper in warnings', () => {170 const Component = props => <div {...props} />;171 const RefForwardingComponent = React.forwardRef((props, ref) => (172 <Component {...props} forwardedRef={ref} />173 ));174 RefForwardingComponent.displayName = 'Foo';175 RefForwardingComponent.propTypes = {176 optional: PropTypes.string,177 required: PropTypes.string.isRequired,178 };179 RefForwardingComponent.defaultProps = {180 optional: 'default',181 };182 const ref = React.createRef();183 expect(() =>184 ReactNoop.render(<RefForwardingComponent ref={ref} optional="foo" />),185 ).toWarnDev(186 'Warning: Failed prop type: The prop `required` is marked as required in ' +187 '`Foo`, but its value is `undefined`.\n' +188 ' in Foo (at **)',189 );190 });191 it('should not bailout if forwardRef is not wrapped in memo', () => {192 const Component = props => <div {...props} />;193 let renderCount = 0;194 const RefForwardingComponent = React.forwardRef((props, ref) => {195 renderCount++;196 return <Component {...props} forwardedRef={ref} />;197 });198 const ref = React.createRef();199 ReactNoop.render(<RefForwardingComponent ref={ref} optional="foo" />);200 ReactNoop.flush();201 expect(renderCount).toBe(1);202 ReactNoop.render(<RefForwardingComponent ref={ref} optional="foo" />);203 ReactNoop.flush();204 expect(renderCount).toBe(2);205 });206 it('should bailout if forwardRef is wrapped in memo', () => {207 const Component = props => <div ref={props.forwardedRef} />;208 let renderCount = 0;209 const RefForwardingComponent = React.memo(210 React.forwardRef((props, ref) => {211 renderCount++;212 return <Component {...props} forwardedRef={ref} />;213 }),214 );215 const ref = React.createRef();216 ReactNoop.render(<RefForwardingComponent ref={ref} optional="foo" />);217 ReactNoop.flush();218 expect(renderCount).toBe(1);219 expect(ref.current.type).toBe('div');220 ReactNoop.render(<RefForwardingComponent ref={ref} optional="foo" />);221 ReactNoop.flush();222 expect(renderCount).toBe(1);223 const differentRef = React.createRef();224 ReactNoop.render(225 <RefForwardingComponent ref={differentRef} optional="foo" />,226 );227 ReactNoop.flush();228 expect(renderCount).toBe(2);229 expect(ref.current).toBe(null);230 expect(differentRef.current.type).toBe('div');231 ReactNoop.render(<RefForwardingComponent ref={ref} optional="bar" />);232 ReactNoop.flush();233 expect(renderCount).toBe(3);234 });235 it('should custom memo comparisons to compose', () => {236 const Component = props => <div ref={props.forwardedRef} />;237 let renderCount = 0;238 const RefForwardingComponent = React.memo(239 React.forwardRef((props, ref) => {240 renderCount++;241 return <Component {...props} forwardedRef={ref} />;242 }),243 (o, p) => o.a === p.a && o.b === p.b,244 );245 const ref = React.createRef();246 ReactNoop.render(<RefForwardingComponent ref={ref} a="0" b="0" c="1" />);247 ReactNoop.flush();248 expect(renderCount).toBe(1);249 expect(ref.current.type).toBe('div');250 // Changing either a or b rerenders251 ReactNoop.render(<RefForwardingComponent ref={ref} a="0" b="1" c="1" />);252 ReactNoop.flush();253 expect(renderCount).toBe(2);254 // Changing c doesn't rerender255 ReactNoop.render(<RefForwardingComponent ref={ref} a="0" b="1" c="2" />);256 ReactNoop.flush();257 expect(renderCount).toBe(2);258 const ComposedMemo = React.memo(259 RefForwardingComponent,260 (o, p) => o.a === p.a && o.c === p.c,261 );262 ReactNoop.render(<ComposedMemo ref={ref} a="0" b="0" c="0" />);263 ReactNoop.flush();264 expect(renderCount).toBe(3);265 // Changing just b no longer updates266 ReactNoop.render(<ComposedMemo ref={ref} a="0" b="1" c="0" />);267 ReactNoop.flush();268 expect(renderCount).toBe(3);269 // Changing just a and c updates270 ReactNoop.render(<ComposedMemo ref={ref} a="2" b="2" c="2" />);271 ReactNoop.flush();272 expect(renderCount).toBe(4);273 // Changing just c does not update274 ReactNoop.render(<ComposedMemo ref={ref} a="2" b="2" c="3" />);275 ReactNoop.flush();276 expect(renderCount).toBe(4);277 // Changing ref still rerenders278 const differentRef = React.createRef();279 ReactNoop.render(<ComposedMemo ref={differentRef} a="2" b="2" c="3" />);280 ReactNoop.flush();281 expect(renderCount).toBe(5);282 expect(ref.current).toBe(null);283 expect(differentRef.current.type).toBe('div');284 });285 it('warns on forwardRef(memo(...))', () => {286 expect(() => {287 React.forwardRef(288 React.memo((props, ref) => {289 return null;290 }),291 );292 }).toWarnDev(293 [294 'Warning: forwardRef requires a render function but received a `memo` ' +295 'component. Instead of forwardRef(memo(...)), use ' +296 'memo(forwardRef(...)).',297 ],298 {withoutStack: true},299 );300 });...
index.js
Source:index.js
1'use strict';2var resolve = require('./resolve')3 , util = require('./util')4 , errorClasses = require('./error_classes')5 , stableStringify = require('fast-json-stable-stringify');6var validateGenerator = require('../dotjs/validate');7/**8 * Functions below are used inside compiled validations function9 */10var ucs2length = util.ucs2length;11var equal = require('fast-deep-equal');12// this error is thrown by async schemas to return validation errors via exception13var ValidationError = errorClasses.Validation;14module.exports = compile;15/**16 * Compiles schema to validation function17 * @this Ajv18 * @param {Object} schema schema object19 * @param {Object} root object with information about the root schema for this schema20 * @param {Object} localRefs the hash of local references inside the schema (created by resolve.id), used for inline resolution21 * @param {String} baseId base ID for IDs in the schema22 * @return {Function} validation function23 */24function compile(schema, root, localRefs, baseId) {25 /* jshint validthis: true, evil: true */26 /* eslint no-shadow: 0 */27 var self = this28 , opts = this._opts29 , refVal = [ undefined ]30 , refs = {}31 , patterns = []32 , patternsHash = {}33 , defaults = []34 , defaultsHash = {}35 , customRules = [];36 root = root || { schema: schema, refVal: refVal, refs: refs };37 var c = checkCompiling.call(this, schema, root, baseId);38 var compilation = this._compilations[c.index];39 if (c.compiling) return (compilation.callValidate = callValidate);40 var formats = this._formats;41 var RULES = this.RULES;42 try {43 var v = localCompile(schema, root, localRefs, baseId);44 compilation.validate = v;45 var cv = compilation.callValidate;46 if (cv) {47 cv.schema = v.schema;48 cv.errors = null;49 cv.refs = v.refs;50 cv.refVal = v.refVal;51 cv.root = v.root;52 cv.$async = v.$async;53 if (opts.sourceCode) cv.source = v.source;54 }55 return v;56 } finally {57 endCompiling.call(this, schema, root, baseId);58 }59 /* @this {*} - custom context, see passContext option */60 function callValidate() {61 /* jshint validthis: true */62 var validate = compilation.validate;63 var result = validate.apply(this, arguments);64 callValidate.errors = validate.errors;65 return result;66 }67 function localCompile(_schema, _root, localRefs, baseId) {68 var isRoot = !_root || (_root && _root.schema == _schema);69 if (_root.schema != root.schema)70 return compile.call(self, _schema, _root, localRefs, baseId);71 var $async = _schema.$async === true;72 var sourceCode = validateGenerator({73 isTop: true,74 schema: _schema,75 isRoot: isRoot,76 baseId: baseId,77 root: _root,78 schemaPath: '',79 errSchemaPath: '#',80 errorPath: '""',81 MissingRefError: errorClasses.MissingRef,82 RULES: RULES,83 validate: validateGenerator,84 util: util,85 resolve: resolve,86 resolveRef: resolveRef,87 usePattern: usePattern,88 useDefault: useDefault,89 useCustomRule: useCustomRule,90 opts: opts,91 formats: formats,92 logger: self.logger,93 self: self94 });95 sourceCode = vars(refVal, refValCode) + vars(patterns, patternCode)96 + vars(defaults, defaultCode) + vars(customRules, customRuleCode)97 + sourceCode;98 if (opts.processCode) sourceCode = opts.processCode(sourceCode, _schema);99 // console.log('\n\n\n *** \n', JSON.stringify(sourceCode));100 var validate;101 try {102 var makeValidate = new Function(103 'self',104 'RULES',105 'formats',106 'root',107 'refVal',108 'defaults',109 'customRules',110 'equal',111 'ucs2length',112 'ValidationError',113 sourceCode114 );115 validate = makeValidate(116 self,117 RULES,118 formats,119 root,120 refVal,121 defaults,122 customRules,123 equal,124 ucs2length,125 ValidationError126 );127 refVal[0] = validate;128 } catch(e) {129 self.logger.error('Error compiling schema, function code:', sourceCode);130 throw e;131 }132 validate.schema = _schema;133 validate.errors = null;134 validate.refs = refs;135 validate.refVal = refVal;136 validate.root = isRoot ? validate : _root;137 if ($async) validate.$async = true;138 if (opts.sourceCode === true) {139 validate.source = {140 code: sourceCode,141 patterns: patterns,142 defaults: defaults143 };144 }145 return validate;146 }147 function resolveRef(baseId, ref, isRoot) {148 ref = resolve.url(baseId, ref);149 var refIndex = refs[ref];150 var _refVal, refCode;151 if (refIndex !== undefined) {152 _refVal = refVal[refIndex];153 refCode = 'refVal[' + refIndex + ']';154 return resolvedRef(_refVal, refCode);155 }156 if (!isRoot && root.refs) {157 var rootRefId = root.refs[ref];158 if (rootRefId !== undefined) {159 _refVal = root.refVal[rootRefId];160 refCode = addLocalRef(ref, _refVal);161 return resolvedRef(_refVal, refCode);162 }163 }164 refCode = addLocalRef(ref);165 var v = resolve.call(self, localCompile, root, ref);166 if (v === undefined) {167 var localSchema = localRefs && localRefs[ref];168 if (localSchema) {169 v = resolve.inlineRef(localSchema, opts.inlineRefs)170 ? localSchema171 : compile.call(self, localSchema, root, localRefs, baseId);172 }173 }174 if (v === undefined) {175 removeLocalRef(ref);176 } else {177 replaceLocalRef(ref, v);178 return resolvedRef(v, refCode);179 }180 }181 function addLocalRef(ref, v) {182 var refId = refVal.length;183 refVal[refId] = v;184 refs[ref] = refId;185 return 'refVal' + refId;186 }187 function removeLocalRef(ref) {188 delete refs[ref];189 }190 function replaceLocalRef(ref, v) {191 var refId = refs[ref];192 refVal[refId] = v;193 }194 function resolvedRef(refVal, code) {195 return typeof refVal == 'object' || typeof refVal == 'boolean'196 ? { code: code, schema: refVal, inline: true }197 : { code: code, $async: refVal && !!refVal.$async };198 }199 function usePattern(regexStr) {200 var index = patternsHash[regexStr];201 if (index === undefined) {202 index = patternsHash[regexStr] = patterns.length;203 patterns[index] = regexStr;204 }205 return 'pattern' + index;206 }207 function useDefault(value) {208 switch (typeof value) {209 case 'boolean':210 case 'number':211 return '' + value;212 case 'string':213 return util.toQuotedString(value);214 case 'object':215 if (value === null) return 'null';216 var valueStr = stableStringify(value);217 var index = defaultsHash[valueStr];218 if (index === undefined) {219 index = defaultsHash[valueStr] = defaults.length;220 defaults[index] = value;221 }222 return 'default' + index;223 }224 }225 function useCustomRule(rule, schema, parentSchema, it) {226 if (self._opts.validateSchema !== false) {227 var deps = rule.definition.dependencies;228 if (deps && !deps.every(function(keyword) {229 return Object.prototype.hasOwnProperty.call(parentSchema, keyword);230 }))231 throw new Error('parent schema must have all required keywords: ' + deps.join(','));232 var validateSchema = rule.definition.validateSchema;233 if (validateSchema) {234 var valid = validateSchema(schema);235 if (!valid) {236 var message = 'keyword schema is invalid: ' + self.errorsText(validateSchema.errors);237 if (self._opts.validateSchema == 'log') self.logger.error(message);238 else throw new Error(message);239 }240 }241 }242 var compile = rule.definition.compile243 , inline = rule.definition.inline244 , macro = rule.definition.macro;245 var validate;246 if (compile) {247 validate = compile.call(self, schema, parentSchema, it);248 } else if (macro) {249 validate = macro.call(self, schema, parentSchema, it);250 if (opts.validateSchema !== false) self.validateSchema(validate, true);251 } else if (inline) {252 validate = inline.call(self, it, rule.keyword, schema, parentSchema);253 } else {254 validate = rule.definition.validate;255 if (!validate) return;256 }257 if (validate === undefined)258 throw new Error('custom keyword "' + rule.keyword + '"failed to compile');259 var index = customRules.length;260 customRules[index] = validate;261 return {262 code: 'customRule' + index,263 validate: validate264 };265 }266}267/**268 * Checks if the schema is currently compiled269 * @this Ajv270 * @param {Object} schema schema to compile271 * @param {Object} root root object272 * @param {String} baseId base schema ID273 * @return {Object} object with properties "index" (compilation index) and "compiling" (boolean)274 */275function checkCompiling(schema, root, baseId) {276 /* jshint validthis: true */277 var index = compIndex.call(this, schema, root, baseId);278 if (index >= 0) return { index: index, compiling: true };279 index = this._compilations.length;280 this._compilations[index] = {281 schema: schema,282 root: root,283 baseId: baseId284 };285 return { index: index, compiling: false };286}287/**288 * Removes the schema from the currently compiled list289 * @this Ajv290 * @param {Object} schema schema to compile291 * @param {Object} root root object292 * @param {String} baseId base schema ID293 */294function endCompiling(schema, root, baseId) {295 /* jshint validthis: true */296 var i = compIndex.call(this, schema, root, baseId);297 if (i >= 0) this._compilations.splice(i, 1);298}299/**300 * Index of schema compilation in the currently compiled list301 * @this Ajv302 * @param {Object} schema schema to compile303 * @param {Object} root root object304 * @param {String} baseId base schema ID305 * @return {Integer} compilation index306 */307function compIndex(schema, root, baseId) {308 /* jshint validthis: true */309 for (var i=0; i<this._compilations.length; i++) {310 var c = this._compilations[i];311 if (c.schema == schema && c.root == root && c.baseId == baseId) return i;312 }313 return -1;314}315function patternCode(i, patterns) {316 return 'var pattern' + i + ' = new RegExp(' + util.toQuotedString(patterns[i]) + ');';317}318function defaultCode(i) {319 return 'var default' + i + ' = defaults[' + i + '];';320}321function refValCode(i, refVal) {322 return refVal[i] === undefined ? '' : 'var refVal' + i + ' = refVal[' + i + '];';323}324function customRuleCode(i) {325 return 'var customRule' + i + ' = customRules[' + i + '];';326}327function vars(arr, statement) {328 if (!arr.length) return '';329 var code = '';330 for (var i=0; i<arr.length; i++)331 code += statement(i, arr);332 return code;...
forwardRef-test.internal.js
Source:forwardRef-test.internal.js
1/**2 * Copyright (c) Facebook, Inc. and its affiliates.3 *4 * This source code is licensed under the MIT license found in the5 * LICENSE file in the root directory of this source tree.6 *7 * @emails react-core8 */9'use strict';10describe('forwardRef', () => {11 let React;12 let ReactFeatureFlags;13 let ReactNoop;14 beforeEach(() => {15 jest.resetModules();16 ReactFeatureFlags = require('shared/ReactFeatureFlags');17 ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;18 ReactFeatureFlags.replayFailedUnitOfWorkWithInvokeGuardedCallback = false;19 React = require('react');20 ReactNoop = require('react-noop-renderer');21 });22 it('should work without a ref to be forwarded', () => {23 class Child extends React.Component {24 render() {25 ReactNoop.yield(this.props.value);26 return null;27 }28 }29 function Wrapper(props) {30 return <Child {...props} ref={props.forwardedRef} />;31 }32 const RefForwardingComponent = React.forwardRef((props, ref) => (33 <Wrapper {...props} forwardedRef={ref} />34 ));35 ReactNoop.render(<RefForwardingComponent value={123} />);36 expect(ReactNoop.flush()).toEqual([123]);37 });38 it('should forward a ref for a single child', () => {39 class Child extends React.Component {40 render() {41 ReactNoop.yield(this.props.value);42 return null;43 }44 }45 function Wrapper(props) {46 return <Child {...props} ref={props.forwardedRef} />;47 }48 const RefForwardingComponent = React.forwardRef((props, ref) => (49 <Wrapper {...props} forwardedRef={ref} />50 ));51 const ref = React.createRef();52 ReactNoop.render(<RefForwardingComponent ref={ref} value={123} />);53 expect(ReactNoop.flush()).toEqual([123]);54 expect(ref.current instanceof Child).toBe(true);55 });56 it('should forward a ref for multiple children', () => {57 class Child extends React.Component {58 render() {59 ReactNoop.yield(this.props.value);60 return null;61 }62 }63 function Wrapper(props) {64 return <Child {...props} ref={props.forwardedRef} />;65 }66 const RefForwardingComponent = React.forwardRef((props, ref) => (67 <Wrapper {...props} forwardedRef={ref} />68 ));69 const ref = React.createRef();70 ReactNoop.render(71 <div>72 <div />73 <RefForwardingComponent ref={ref} value={123} />74 <div />75 </div>,76 );77 expect(ReactNoop.flush()).toEqual([123]);78 expect(ref.current instanceof Child).toBe(true);79 });80 it('should maintain child instance and ref through updates', () => {81 class Child extends React.Component {82 constructor(props) {83 super(props);84 }85 render() {86 ReactNoop.yield(this.props.value);87 return null;88 }89 }90 function Wrapper(props) {91 return <Child {...props} ref={props.forwardedRef} />;92 }93 const RefForwardingComponent = React.forwardRef((props, ref) => (94 <Wrapper {...props} forwardedRef={ref} />95 ));96 let setRefCount = 0;97 let ref;98 const setRef = r => {99 setRefCount++;100 ref = r;101 };102 ReactNoop.render(<RefForwardingComponent ref={setRef} value={123} />);103 expect(ReactNoop.flush()).toEqual([123]);104 expect(ref instanceof Child).toBe(true);105 expect(setRefCount).toBe(1);106 ReactNoop.render(<RefForwardingComponent ref={setRef} value={456} />);107 expect(ReactNoop.flush()).toEqual([456]);108 expect(ref instanceof Child).toBe(true);109 expect(setRefCount).toBe(1);110 });111 it('should not break lifecycle error handling', () => {112 class ErrorBoundary extends React.Component {113 state = {error: null};114 componentDidCatch(error) {115 ReactNoop.yield('ErrorBoundary.componentDidCatch');116 this.setState({error});117 }118 render() {119 if (this.state.error) {120 ReactNoop.yield('ErrorBoundary.render: catch');121 return null;122 }123 ReactNoop.yield('ErrorBoundary.render: try');124 return this.props.children;125 }126 }127 class BadRender extends React.Component {128 render() {129 ReactNoop.yield('BadRender throw');130 throw new Error('oops!');131 }132 }133 function Wrapper(props) {134 ReactNoop.yield('Wrapper');135 return <BadRender {...props} ref={props.forwardedRef} />;136 }137 const RefForwardingComponent = React.forwardRef((props, ref) => (138 <Wrapper {...props} forwardedRef={ref} />139 ));140 const ref = React.createRef();141 ReactNoop.render(142 <ErrorBoundary>143 <RefForwardingComponent ref={ref} />144 </ErrorBoundary>,145 );146 expect(ReactNoop.flush()).toEqual([147 'ErrorBoundary.render: try',148 'Wrapper',149 'BadRender throw',150 // React retries one more time151 'ErrorBoundary.render: try',152 'Wrapper',153 'BadRender throw',154 // Errored again on retry. Now handle it.155 'ErrorBoundary.componentDidCatch',156 'ErrorBoundary.render: catch',157 ]);158 expect(ref.current).toBe(null);159 });160 it('should not re-run the render callback on a deep setState', () => {161 let inst;162 class Inner extends React.Component {163 render() {164 ReactNoop.yield('Inner');165 inst = this;166 return <div ref={this.props.forwardedRef} />;167 }168 }169 function Middle(props) {170 ReactNoop.yield('Middle');171 return <Inner {...props} />;172 }173 const Forward = React.forwardRef((props, ref) => {174 ReactNoop.yield('Forward');175 return <Middle {...props} forwardedRef={ref} />;176 });177 function App() {178 ReactNoop.yield('App');179 return <Forward />;180 }181 ReactNoop.render(<App />);182 expect(ReactNoop.flush()).toEqual(['App', 'Forward', 'Middle', 'Inner']);183 inst.setState({});184 expect(ReactNoop.flush()).toEqual(['Inner']);185 });...
AddressForm.js
Source:AddressForm.js
1import axios from 'axios';2import React, { useRef, useContext } from 'react';3import { AuthContext } from '../context/AuthContext';4import { Button, Card, Col, Form, Row } from 'react-bootstrap';5const AddressForm = ({ getNewAddress }) => {6 const { user } = useContext(AuthContext);7 const cityRef = useRef();8 const commentRef = useRef();9 const countryRef = useRef();10 const lastNameRef = useRef();11 const postCodeRef = useRef();12 const extensionRef = useRef();13 const firstNameRef = useRef();14 const streetNameRef = useRef();15 const buildingNumberRef = useRef();16 const addToLocalStorage = (id) => {17 const userData = JSON.parse(localStorage.user);18 userData.addresses.push(id);19 localStorage.setItem('user', JSON.stringify(userData));20 };21 const handleClick = async (e) => {22 e.preventDefault();23 const newAddress = {24 user: user._id,25 city: cityRef.current.value || null,26 last_name: lastNameRef.current.value,27 extension: extensionRef.current.value,28 first_name: firstNameRef.current.value,29 comment: commentRef.current.value || '',30 country: countryRef.current.value || null,31 post_code: postCodeRef.current.value || null,32 street_name: streetNameRef.current.value || null,33 building_number: buildingNumberRef.current.value || null,34 };35 const isValid = () => {36 for (const key in newAddress) if (newAddress[key] === null) return false;37 return true;38 };39 if (isValid()) {40 const response = await axios.post(41 `${process.env.REACT_APP_API_URL}/addresses/create`,42 newAddress,43 );44 getNewAddress(response.data.address);45 addToLocalStorage(response.data.address._id);46 }47 };48 return (49 <>50 <Card style={cardStyles}>51 <Card.Header>Shipping Address</Card.Header>52 <Card.Body>53 <Row>54 <Col md={6}>55 <Form.Control56 type="text"57 ref={firstNameRef}58 style={inputStyles}59 placeholder="First Name"60 />61 </Col>62 <Col md={6}>63 <Form.Control64 type="text"65 ref={lastNameRef}66 style={inputStyles}67 placeholder="Last Name"68 />69 </Col>70 </Row>71 <Row>72 <Col md={6}>73 <Form.Control74 type="text"75 style={inputStyles}76 ref={streetNameRef}77 placeholder="Street Name *"78 />79 </Col>80 <Col md={4}>81 <Form.Control82 type="text"83 style={inputStyles}84 ref={buildingNumberRef}85 placeholder="Building Number *"86 />87 </Col>88 <Col md={2}>89 <Form.Control90 type="text"91 ref={extensionRef}92 style={inputStyles}93 placeholder="Ext. (Optional)"94 />95 </Col>96 </Row>97 <Row>98 <Col md={4}>99 <Form.Control100 type="text"101 ref={postCodeRef}102 style={inputStyles}103 placeholder="Post Code *"104 />105 </Col>106 <Col md={4}>107 <Form.Control type="text" ref={cityRef} placeholder="City *" style={inputStyles} />108 </Col>109 <Col md={4}>110 <Form.Control111 type="text"112 ref={countryRef}113 style={inputStyles}114 placeholder="Country *"115 />116 </Col>117 </Row>118 <Row>119 <Col>120 <Form.Control121 type="text"122 ref={commentRef}123 style={inputStyles}124 placeholder="Comment (Optional)"125 />126 </Col>127 </Row>128 <Row>129 <Col md={12}>130 <Button131 value="Add"132 type="submit"133 style={btnStyles}134 onClick={handleClick}135 className="btn btn-primary"136 >137 Add138 </Button>139 </Col>140 </Row>141 </Card.Body>142 </Card>143 <br />144 <br />145 </>146 );147};148const cardStyles = {149 marginBottom: '10px',150 borderColor: 'var(--color-main)',151};152const inputStyles = {153 width: '100%',154 marginBottom: '10px',155};156const btnStyles = {157 marginTop: '10px',158 background: 'var(--color-main)',159};...
setAndForwardRef-test.js
Source:setAndForwardRef-test.js
1/**2 * Copyright (c) Facebook, Inc. and its affiliates.3 *4 * This source code is licensed under the MIT license found in the5 * LICENSE file in the root directory of this source tree.6 *7 * @flow8 * @format9 * @emails oncall+react_native10 */11'use strict';12const React = require('react');13const ReactTestRenderer = require('react-test-renderer');14const setAndForwardRef = require('../setAndForwardRef');15describe('setAndForwardRef', () => {16 let innerFuncCalled = false;17 let outerFuncCalled = false;18 class ForwardedComponent extends React.Component<{||}> {19 testFunc() {20 innerFuncCalled = true;21 return true;22 }23 render() {24 return null;25 }26 }27 type Props = $ReadOnly<{|28 callFunc?: ?boolean,29 forwardedRef: React.Ref<typeof ForwardedComponent>,30 |}>;31 class TestComponent extends React.Component<Props> {32 _nativeRef: ?React.ElementRef<typeof ForwardedComponent> = null;33 _setNativeRef = setAndForwardRef({34 getForwardedRef: () => this.props.forwardedRef,35 setLocalRef: ref => {36 this._nativeRef = ref;37 },38 });39 componentDidMount() {40 if (this.props.callFunc) {41 outerFuncCalled = this._nativeRef && this._nativeRef.testFunc();42 }43 }44 render() {45 return <ForwardedComponent ref={this._setNativeRef} />;46 }47 }48 const TestComponentWithRef = React.forwardRef((props, ref) => (49 <TestComponent {...props} forwardedRef={ref} />50 ));51 beforeEach(() => {52 innerFuncCalled = false;53 outerFuncCalled = false;54 });55 it('should forward refs (function-based)', () => {56 let testRef: ?React.ElementRef<typeof ForwardedComponent> = null;57 ReactTestRenderer.create(58 <TestComponentWithRef59 ref={ref => {60 testRef = ref;61 }}62 />,63 );64 const val = testRef && testRef.testFunc();65 expect(innerFuncCalled).toBe(true);66 expect(val).toBe(true);67 });68 it('should forward refs (createRef-based)', () => {69 const createdRef = React.createRef<typeof ForwardedComponent>();70 /* $FlowFixMe(>=0.89.0 site=react_native_fb) This comment suppresses an71 * error found when Flow v0.89 was deployed. To see the error, delete this72 * comment and run Flow. */73 ReactTestRenderer.create(<TestComponentWithRef ref={createdRef} />);74 /* $FlowFixMe(>=0.87.0 site=react_native_fb) This comment suppresses an75 * error found when Flow v0.87 was deployed. To see the error, delete this76 * comment and run Flow. */77 const val = createdRef.current && createdRef.current.testFunc();78 expect(innerFuncCalled).toBe(true);79 expect(val).toBe(true);80 });81 it('should forward refs (string-based)', () => {82 class Test extends React.Component<{||}> {83 refs: $ReadOnly<{|84 stringRef?: ?React.ElementRef<typeof ForwardedComponent>,85 |}>;86 componentDidMount() {87 /* eslint-disable react/no-string-refs */88 this.refs.stringRef && this.refs.stringRef.testFunc();89 /* eslint-enable react/no-string-refs */90 }91 render() {92 /**93 * Can't directly pass the test component to `ReactTestRenderer.create`,94 * otherwise it will throw. See:95 * https://reactjs.org/warnings/refs-must-have-owner.html#strings-refs-outside-the-render-method96 */97 /* eslint-disable react/no-string-refs */98 return <TestComponentWithRef ref="stringRef" />;99 /* eslint-enable react/no-string-refs */100 }101 }102 ReactTestRenderer.create(<Test />);103 expect(innerFuncCalled).toBe(true);104 });105 it('should be able to use the ref from inside of the forwarding class', () => {106 expect(() =>107 ReactTestRenderer.create(<TestComponentWithRef callFunc={true} />),108 ).not.toThrow();109 expect(innerFuncCalled).toBe(true);110 expect(outerFuncCalled).toBe(true);111 });...
RootRef.js
Source:RootRef.js
1import * as React from 'react';2import * as ReactDOM from 'react-dom';3import PropTypes from 'prop-types';4import { exactProp, refType } from '@material-ui/utils';5import setRef from '../utils/setRef';6let warnedOnce = false;7/**8 * â ï¸â ï¸â ï¸9 * If you want the DOM element of a Material-UI component check out10 * [FAQ: How can I access the DOM element?](/getting-started/faq/#how-can-i-access-the-dom-element)11 * first.12 *13 * This component uses `findDOMNode` which is deprecated in React.StrictMode.14 *15 * Helper component to allow attaching a ref to a16 * wrapped element to access the underlying DOM element.17 *18 * It's highly inspired by https://github.com/facebook/react/issues/11401#issuecomment-340543801.19 * For example:20 * ```jsx21 * import React from 'react';22 * import RootRef from '@material-ui/core/RootRef';23 *24 * function MyComponent() {25 * const domRef = React.useRef();26 *27 * React.useEffect(() => {28 * console.log(domRef.current); // DOM node29 * }, []);30 *31 * return (32 * <RootRef rootRef={domRef}>33 * <SomeChildComponent />34 * </RootRef>35 * );36 * }37 * ```38 *39 * @deprecated40 */41class RootRef extends React.Component {42 componentDidMount() {43 this.ref = ReactDOM.findDOMNode(this);44 setRef(this.props.rootRef, this.ref);45 }46 componentDidUpdate(prevProps) {47 const ref = ReactDOM.findDOMNode(this);48 if (prevProps.rootRef !== this.props.rootRef || this.ref !== ref) {49 if (prevProps.rootRef !== this.props.rootRef) {50 setRef(prevProps.rootRef, null);51 }52 this.ref = ref;53 setRef(this.props.rootRef, this.ref);54 }55 }56 componentWillUnmount() {57 this.ref = null;58 setRef(this.props.rootRef, null);59 }60 render() {61 if (process.env.NODE_ENV !== 'production') {62 if (!warnedOnce) {63 warnedOnce = true;64 console.warn(['Material-UI: The RootRef component is deprecated.', 'The component relies on the ReactDOM.findDOMNode API which is deprecated in React.StrictMode.', 'Instead, you can get a reference to the underlying DOM node of the components via the `ref` prop.'].join('/n'));65 }66 }67 return this.props.children;68 }69}70process.env.NODE_ENV !== "production" ? RootRef.propTypes = {71 /**72 * The wrapped element.73 */74 children: PropTypes.element.isRequired,75 /**76 * A ref that points to the first DOM node of the wrapped element.77 */78 rootRef: refType.isRequired79} : void 0;80if (process.env.NODE_ENV !== 'production') {81 process.env.NODE_ENV !== "production" ? RootRef.propTypes = exactProp(RootRef.propTypes) : void 0;82}...
ReactRef.js
Source:ReactRef.js
...10var ReactOwner = require('./ReactOwner');11var ReactRef = {};12function attachRef(ref, component, owner) {13 if (typeof ref === 'function') {14 ref(component.getPublicInstance());15 } else {16 // Legacy ref17 ReactOwner.addComponentAsRefTo(component, ref, owner);18 }19}20function detachRef(ref, component, owner) {21 if (typeof ref === 'function') {22 ref(null);23 } else {24 // Legacy ref25 ReactOwner.removeComponentAsRefFrom(component, ref, owner);26 }27}28ReactRef.attachRefs = function (instance, element) {29 if (element === null || typeof element !== 'object') {30 return;31 }32 var ref = element.ref;33 if (ref != null) {34 attachRef(ref, instance, element._owner);35 }36};...
setAndForwardRef.js
Source:setAndForwardRef.js
1/**2 * Copyright (c) Facebook, Inc. and its affiliates.3 *4 * This source code is licensed under the MIT license found in the5 * LICENSE file in the root directory of this source tree.6 *7 * @format8 * @flow9 */10'use strict';11import type {ElementRef, Ref} from 'react';12type Args = $ReadOnly<{|13 getForwardedRef: () => ?Ref<any>,14 setLocalRef: (ref: ElementRef<any>) => mixed,15|}>;16/**17 * This is a helper function for when a component needs to be able to forward a ref18 * to a child component, but still needs to have access to that component as part of19 * its implementation.20 *21 * Its main use case is in wrappers for native components.22 *23 * Usage:24 *25 * class MyView extends React.Component {26 * _nativeRef = null;27 *28 * _setNativeRef = setAndForwardRef({29 * getForwardedRef: () => this.props.forwardedRef,30 * setLocalRef: ref => {31 * this._nativeRef = ref;32 * },33 * });34 *35 * render() {36 * return <View ref={this._setNativeRef} />;37 * }38 * }39 *40 * const MyViewWithRef = React.forwardRef((props, ref) => (41 * <MyView {...props} forwardedRef={ref} />42 * ));43 *44 * module.exports = MyViewWithRef;45 */46function setAndForwardRef({47 getForwardedRef,48 setLocalRef,49}: Args): (ref: ElementRef<any>) => void {50 return function forwardRef(ref: ElementRef<any>) {51 const forwardedRef = getForwardedRef();52 setLocalRef(ref);53 // Forward to user ref prop (if one has been specified)54 if (typeof forwardedRef === 'function') {55 // Handle function-based refs. String-based refs are handled as functions.56 forwardedRef(ref);57 } else if (typeof forwardedRef === 'object' && forwardedRef != null) {58 // Handle createRef-based refs59 forwardedRef.current = ref;60 }61 };62}...
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: 'screenshot.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 const element = await page.$('h1');15 await element.screenshot({ path: 'screenshot.png' });16 await browser.close();17})();18const { chromium } = require('playwright');19(async () => {20 const browser = await chromium.launch();21 const context = await browser.newContext();22 const page = await context.newPage();23 await page.screenshot({24 clip: {25 }26 });27 await browser.close();28})();
Using AI Code Generation
1(async () => {2 const browser = await chromium.launch();3 const context = await browser.newContext();4 const page = await context.newPage();5 const dimensions = await page.evaluate(() => {6 return {7 };8 });9 console.log('Dimensions:', dimensions);10 await browser.close();11})();12(async () => {13 const browser = await chromium.launch();14 const context = await browser.newContext();15 const page = await context.newPage();16 const dimensions = await page.evaluate(() => {17 return {18 };19 });20 console.log('Dimensions:', dimensions);21 await browser.close();22})();23(async () => {24 const browser = await chromium.launch();25 const context = await browser.newContext();26 const page = await context.newPage();27 const dimensions = await page.evaluate(() => {28 return {29 };30 });31 console.log('Dimensions:', dimensions);32 await browser.close();33})();34(async () => {35 const browser = await chromium.launch();36 const context = await browser.newContext();
Using AI Code Generation
1const { webkit, devices } = require('playwright');2const iPhone = devices['iPhone 6'];3(async () => {4 const browser = await webkit.launch({5 });6 const context = await browser.newContext({7 geolocation: { longitude: 12.492507, latitude: 41.889938 },8 });9 const page = await context.newPage();10 await page.waitForSelector('text="Your location"');11 await page.click('text="Your location"');12 await page.waitForSelector('text="Use precise location"');13 await page.click('text="Use precise location"');14 await page.waitForSelector('text="Always allow"');15 await page.click('text="Always allow"');16 await page.waitForSelector('text="Your location"');17 await page.click('text="Your location"');18 await page.waitForSelector('text="Share location"');19 await page.click('text="Share location"');20 await page.waitForSelector('text="Share once"');21 await page.click('text="Share once"');22 await page.waitForSelector('text="Your location"');23 await page.click('text="Your location"');24 await page.waitForSelector('text="Share location"');25 await page.click('text="Share location"');26 await page.waitForSelector('text="Share once"');27 await page.click('text="Share once"');28 await page.waitForSelector('text="Your location"');29 await page.click('text="Your location"');30 await page.waitForSelector('text="Share location"');31 await page.click('text="Share location"');32 await page.waitForSelector('text="Share once"');33 await page.click('text="Share once"');34 await page.waitForSelector('text="Your location"');35 await page.click('text="Your location"');36 await page.waitForSelector('text="Share location"');37 await page.click('text="Share location"');38 await page.waitForSelector('text="Share once"');39 await page.click('text="Share once"');40 await page.waitForSelector('text="Your location"');41 await page.click('text="Your location"');42 await page.waitForSelector('text="Share location"');43 await page.click('text="Share location
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const page = await browser.newPage();5 await page.fill('input[name="q"]', 'Playwright');6 await page.keyboard.press('Enter');7 await page.waitForNavigation();8 await page.screenshot({ path: 'google.png' });9 await browser.close();10})();11const { chromium } = require('playwright');12(async () => {13 const browser = await chromium.launch();14 const page = await browser.newPage();15 await page.fill('input[name="q"]', 'Playwright');16 await page.keyboard.press('Enter');17 await page.waitForNavigation();18 await page.screenshot({ path: 'google.png' });19 await browser.close();20})();21const { chromium } = require('playwright');22(async () => {23 const browser = await chromium.launch();24 const page = await browser.newPage();25 await page.fill('input[name="q"]', 'Playwright');26 await page.keyboard.press('Enter');27 await page.waitForNavigation();28 await page.screenshot({ path: 'google.png' });29 await browser.close();30})();31const { chromium } = require('playwright');32(async () => {33 const browser = await chromium.launch();34 const page = await browser.newPage();35 await page.fill('input[name="q"]', 'Playwright');36 await page.keyboard.press('Enter');37 await page.waitForNavigation();38 await page.screenshot({ path: 'google.png' });39 await browser.close();40})();41const { chromium } = require('playwright');42(async () => {43 const browser = await chromium.launch();44 const page = await browser.newPage();45 await page.fill('input[name="q"]', 'Playwright');46 await page.keyboard.press('Enter');47 await page.waitForNavigation();48 await page.screenshot({ path: 'google.png' });49 await browser.close();50})();
Using AI Code Generation
1const playwright = require('playwright');2(async () => {3 const browser = await playwright['chromium'].launch();4 const page = await browser.newPage();5 await page.screenshot({ path: 'example.png' });6 await browser.close();7})();8const playwright = require('playwright');9(async () => {10 const browser = await playwright['firefox'].launch();11 const page = await browser.newPage();12 await page.screenshot({ path: 'example.png' });13 await browser.close();14})();15const playwright = require('playwright');16(async () => {17 const browser = await playwright['webkit'].launch();18 const page = await browser.newPage();19 await page.screenshot({ path: 'example.png' });20 await browser.close();21})();22const playwright = require('playwright');23(async () => {24 const browser = await playwright['chromium'].launch();25 const context = await browser.newContext();26 const page = await context.newPage();27 await page.screenshot({ path: 'example.png' });28 await browser.close();29})();30const playwright = require('playwright');31(async () => {32 const browser = await playwright['firefox'].launch();33 const context = await browser.newContext();34 const page = await context.newPage();35 await page.screenshot({ path: 'example.png' });36 await browser.close();37})();38const playwright = require('playwright');39(async () => {40 const browser = await playwright['webkit'].launch();41 const context = await browser.newContext();42 const page = await context.newPage();43 await page.screenshot({ path: 'example.png' });44 await browser.close();45})();
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const page = await browser.newPage();5 const el = await page.$('text=Docs');6 const rect = await el.boundingBox();7 console.log(rect);8 await browser.close();9})();10const { chromium } = require('playwright');11(async () => {12 const browser = await chromium.launch();13 const page = await browser.newPage();14 const el = await page.$('text=Docs');15 const rect = await el.boundingBox();16 console.log(rect);17 await browser.close();18})();19const { chromium } = require('playwright');20(async () => {21 const browser = await chromium.launch();22 const page = await browser.newPage();23 const el = await page.$('text=Docs');24 const rect = await el.boundingBox();25 console.log(rect);26 await browser.close();27})();28const { chromium } = require('playwright');29(async () => {30 const browser = await chromium.launch();31 const page = await browser.newPage();32 const el = await page.$('text=Docs');33 const rect = await el.boundingBox();34 console.log(rect);35 await browser.close();36})();37const { chromium } = require('playwright');38(async () => {39 const browser = await chromium.launch();40 const page = await browser.newPage();41 const el = await page.$('text=Docs');42 const rect = await el.boundingBox();43 console.log(rect);44 await browser.close();45})();46const { chromium } = require('playwright');47(async () => {48 const browser = await chromium.launch();49 const page = await browser.newPage();50 const el = await page.$('text=Docs');51 const rect = await el.boundingBox();52 console.log(rect
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 const elementHandle = await page.$('input[name="q"]');7 const box = await elementHandle.boundingBox();8 console.log(box);9 await browser.close();10})();11const { chromium } = require('playwright');12(async () => {13 const browser = await chromium.launch();14 const context = await browser.newContext();15 const page = await context.newPage();16 const elementHandle = await page.$('input[name="q"]');17 const box = await elementHandle.boundingBox();18 console.log(box);19 await browser.close();20})();21const { chromium } = require('playwright');22(async () => {23 const browser = await chromium.launch();24 const context = await browser.newContext();25 const page = await context.newPage();26 const elementHandle = await page.$('input[name="q"]');27 const box = await elementHandle.boundingBox();28 console.log(box);29 await browser.close();30})();31const { chromium } = require('playwright');32(async () => {33 const browser = await chromium.launch();34 const context = await browser.newContext();35 const page = await context.newPage();36 const elementHandle = await page.$('input[name="q"]');37 const box = await elementHandle.boundingBox();38 console.log(box);39 await browser.close();40})();41const { chromium } = require('playwright');42(async () => {43 const browser = await chromium.launch();44 const context = await browser.newContext();
Using AI Code Generation
1const { test, expect } = require('@playwright/test');2const { ref } = require('@playwright/test/lib/server/frames');3test('test', async ({ page }) => {4 page.on('console', (msg) => console.log(msg.text()));5 const refElement = await page.$('text=Get Started');6 const refId = refElement._ref;7 await page.evaluate((refId) => {8 const refElement = ref(refId);9 console.log(refElement);10 }, refId);11});12{ _ref: 'element-1' }13const { test, expect } = require('@playwright/test');14const { ref } = require('@playwright/test/lib/server/frames');15test('test', async ({ page }) => {16 page.on('console', (msg) => console.log(msg.text()));17 const refElement = await page.$('text=Get Started');18 const refId = refElement._ref;19 await page.evaluate((refId) => {20 const refElement = ref(refId);21 console.log(refElement);22 }, refId);23});24{ _ref: 'element-1' }25const { test, expect } = require('@playwright/test');26const { ref } = require('@playwright/test/lib/server/frames');27test('test', async ({ page }) => {28 page.on('console', (msg) => console.log(msg.text()));29 const refElement = await page.$('text=Get Started');30 const refId = refElement._ref;31 await page.evaluate((refId) => {32 const refElement = ref(refId);33 console.log(refElement);34 }, refId);35});36{ _ref: 'element-1' }
Using AI Code Generation
1const { test, expect } = require('@playwright/test');2test('my test', async ({ page }) => {3 const button = page.locator('button');4 const buttonRef = await button.ref();5 await buttonRef.click();6});7const { test, expect } = require('@playwright/test');8test('my test', async ({ page }) => {9 const button = page.locator('button');10 const buttonRef = await button.ref();11 await buttonRef.click();12});13import { test, expect } from '@playwright/test';14test('my test', async ({ page }) => {15 const button = page.locator('button');16 const buttonRef = await button.ref();17 await buttonRef.click();18});19import { test, expect } from '@playwright/test';20test('my test', async ({ page }) => {21 const button = page.locator('button');22 const buttonRef = await button.ref();23 await buttonRef.click();24});25import { test, expect } from '@playwright/test';26test('my test', async ({ page }) => {27 const button = page.locator('button');28 const buttonRef = await button.ref();29 await buttonRef.click();30});31import { test, expect } from '@playwright/test';32test('my test', async ({ page }) => {33 const button = page.locator('button');34 const buttonRef = await button.ref();35 await buttonRef.click();36});37import { test
Playwright tutorial
LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.
Chapters:
- What is Playwright : Playwright is comparatively new but has gained good popularity. Get to know some history of the Playwright with some interesting facts connected with it.
- How To Install Playwright : Learn in detail about what basic configuration and dependencies are required for installing Playwright and run a test. Get a step-by-step direction for installing the Playwright automation framework.
- Playwright Futuristic Features: Launched in 2020, Playwright gained huge popularity quickly because of some obliging features such as Playwright Test Generator and Inspector, Playwright Reporter, Playwright auto-waiting mechanism and etc. Read up on those features to master Playwright testing.
- What is Component Testing: Component testing in Playwright is a unique feature that allows a tester to test a single component of a web application without integrating them with other elements. Learn how to perform Component testing on the Playwright automation framework.
- Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
- Functions and Selectors in Playwright: Learn how to launch the Chromium browser with Playwright. Also, gain a better understanding of some important functions like “BrowserContext,” which allows you to run multiple browser sessions, and “newPage” which interacts with a page.
- Handling Alerts and Dropdowns in Playwright : Playwright interact with different types of alerts and pop-ups, such as simple, confirmation, and prompt, and different types of dropdowns, such as single selector and multi-selector get your hands-on with handling alerts and dropdown in Playright testing.
- Playwright vs Puppeteer: Get to know about the difference between two testing frameworks and how they are different than one another, which browsers they support, and what features they provide.
- Run Playwright Tests on LambdaTest: Playwright testing with LambdaTest leverages test performance to the utmost. You can run multiple Playwright tests in Parallel with the LammbdaTest test cloud. Get a step-by-step guide to run your Playwright test on the LambdaTest platform.
- Playwright Python Tutorial: Playwright automation framework support all major languages such as Python, JavaScript, TypeScript, .NET and etc. However, there are various advantages to Python end-to-end testing with Playwright because of its versatile utility. Get the hang of Playwright python testing with this chapter.
- Playwright End To End Testing Tutorial: Get your hands on with Playwright end-to-end testing and learn to use some exciting features such as TraceViewer, Debugging, Networking, Component testing, Visual testing, and many more.
- Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.
Run Playwright Internal automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
