How to use handleProperty method in Puppeteer

Best JavaScript code snippet using puppeteer

Run Puppeteer automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

destructure.js

Source: destructure.js Github

copy
1import { findIndex } from './array.js';
2
3const handlers = {
4	Identifier: destructureIdentifier,
5	AssignmentPattern: destructureAssignmentPattern,
6	ArrayPattern: destructureArrayPattern,
7	ObjectPattern: destructureObjectPattern
8};
9
10export default function destructure ( code, scope, node, ref, inline, statementGenerators ) {
11	handlers[ node.type ]( code, scope, node, ref, inline, statementGenerators );
12}
13
14function destructureIdentifier ( code, scope, node, ref, inline, statementGenerators ) {
15	statementGenerators.push( ( start, prefix, suffix ) => {
16		code.insertRight( node.start, inline ? prefix : `${prefix}var ` );
17		code.insertLeft( node.end, ` = ${ref}${suffix}` );
18		code.move( node.start, node.end, start );
19	});
20}
21
22function destructureAssignmentPattern ( code, scope, node, ref, inline, statementGenerators ) {
23	const isIdentifier = node.left.type === 'Identifier';
24	const name = isIdentifier ? node.left.name : ref;
25
26	if ( !inline ) {
27		statementGenerators.push( ( start, prefix, suffix ) => {
28			code.insertRight( node.left.end, `${prefix}if ( ${name} === void 0 ) ${name}` );
29			code.move( node.left.end, node.right.end, start );
30			code.insertLeft( node.right.end, suffix );
31		});
32	}
33
34	if ( !isIdentifier ) {
35		destructure( code, scope, node.left, ref, inline, statementGenerators );
36	}
37}
38
39function destructureArrayPattern ( code, scope, node, ref, inline, statementGenerators ) {
40	let c = node.start;
41
42	node.elements.forEach( ( element, i ) => {
43		if ( !element ) return;
44
45		if ( element.type === 'RestElement' ) {
46			handleProperty( code, scope, c, element.argument, `${ref}.slice(${i})`, inline, statementGenerators );
47		} else {
48			handleProperty( code, scope, c, element, `${ref}[${i}]`, inline, statementGenerators );
49		}
50		c = element.end;
51	});
52
53	code.remove( c, node.end );
54}
55
56function destructureObjectPattern ( code, scope, node, ref, inline, statementGenerators ) {
57	let c = node.start;
58
59	node.properties.forEach( prop => {
60		let value = prop.computed || prop.key.type !== 'Identifier' ? `${ref}[${code.slice(prop.key.start, prop.key.end)}]` : `${ref}.${prop.key.name}`;
61		handleProperty( code, scope, c, prop.value, value, inline, statementGenerators );
62		c = prop.end;
63	});
64
65	code.remove( c, node.end );
66}
67
68function handleProperty ( code, scope, c, node, value, inline, statementGenerators ) {
69	switch ( node.type ) {
70		case 'Identifier': {
71			code.remove( c, node.start );
72			destructureIdentifier( code, scope, node, value, inline, statementGenerators );
73			break;
74		}
75
76		case 'AssignmentPattern': {
77			let name;
78
79			const isIdentifier = node.left.type === 'Identifier';
80
81			if ( isIdentifier ) {
82				name = node.left.name;
83				const declaration = scope.findDeclaration( name );
84				if ( declaration ) name = declaration.name;
85			} else {
86				name = scope.createIdentifier( value );
87			}
88
89			statementGenerators.push( ( start, prefix, suffix ) => {
90				if ( inline ) {
91					code.insertRight( node.right.start, `${name} = ${value} === undefined ? ` );
92					code.insertLeft( node.right.end, ` : ${value}` );
93				} else {
94					code.insertRight( node.right.start, `${prefix}var ${name} = ${value}; if ( ${name} === void 0 ) ${name} = ` );
95					code.insertLeft( node.right.end, suffix );
96				}
97
98				code.move( node.right.start, node.right.end, start );
99			});
100
101			if ( isIdentifier ) {
102				code.remove( c, node.right.start );
103			} else {
104				code.remove( c, node.left.start );
105				code.remove( node.left.end, node.right.start );
106				handleProperty( code, scope, c, node.left, name, inline, statementGenerators );
107			}
108
109			break;
110		}
111
112		case 'ObjectPattern': {
113			code.remove( c, c = node.start );
114
115			if ( node.properties.length > 1 ) {
116				const ref = scope.createIdentifier( value );
117
118				statementGenerators.push( ( start, prefix, suffix ) => {
119					// this feels a tiny bit hacky, but we can't do a
120					// straightforward insertLeft and keep correct order...
121					code.insertRight( node.start, `${prefix}var ${ref} = ` );
122					code.overwrite( node.start, c = node.start + 1, value );
123					code.insertLeft( c, suffix );
124
125					code.move( node.start, c, start );
126				});
127
128				node.properties.forEach( prop => {
129					const value = prop.computed || prop.key.type !== 'Identifier' ? `${ref}[${code.slice(prop.key.start, prop.key.end)}]` : `${ref}.${prop.key.name}`;
130					handleProperty( code, scope, c, prop.value, value, inline, statementGenerators );
131					c = prop.end;
132				});
133			} else {
134				const prop = node.properties[0];
135				const value_suffix = prop.computed || prop.key.type !== 'Identifier' ? `[${code.slice(prop.key.start, prop.key.end)}]` : `.${prop.key.name}`;
136				handleProperty( code, scope, c, prop.value, `${value}${value_suffix}`, inline, statementGenerators );
137				c = prop.end;
138			}
139
140			code.remove( c, node.end );
141			break;
142		}
143
144		case 'ArrayPattern': {
145			code.remove( c, c = node.start );
146
147			if ( node.elements.filter( Boolean ).length > 1 ) {
148				const ref = scope.createIdentifier( value );
149
150				statementGenerators.push( ( start, prefix, suffix ) => {
151					code.insertRight( node.start, `${prefix}var ${ref} = ` );
152					code.overwrite( node.start, c = node.start + 1, value );
153					code.insertLeft( c, suffix );
154
155					code.move( node.start, c, start );
156				});
157
158				node.elements.forEach( ( element, i ) => {
159					if ( !element ) return;
160
161					if ( element.type === 'RestElement' ) {
162						handleProperty( code, scope, c, element.argument, `${ref}.slice(${i})`, inline, statementGenerators );
163					} else {
164						handleProperty( code, scope, c, element, `${ref}[${i}]`, inline, statementGenerators );
165					}
166					c = element.end;
167				});
168			} else {
169				const index = findIndex( node.elements, Boolean );
170				const element = node.elements[ index ];
171				if ( element.type === 'RestElement' ) {
172					handleProperty( code, scope, c, element.argument, `${value}.slice(${index})`, inline, statementGenerators );
173				} else {
174					handleProperty( code, scope, c, element, `${value}[${index}]`, inline, statementGenerators );
175				}
176				c = element.end;
177			}
178
179			code.remove( c, node.end );
180			break;
181		}
182
183		default: {
184			throw new Error( `Unexpected node type in destructuring (${node.type})` );
185		}
186	}
187}
188
Full Screen

modelproperty.js

Source: modelproperty.js Github

copy
1import React, {useState, useEffect} from "react";
2import Button from "submodule/components/CustomButtons/Button";
3import { makeStyles } from "@material-ui/core/styles";
4import {request} from "/submodule/networks/request";
5import Prompt from "/submodule/components/Prompt/Prompt";
6import List from '@material-ui/core/List';
7import ListItem from '@material-ui/core/ListItem';
8import ListItemText from '@material-ui/core/ListItemText';
9import ConfirmationDialogRaw from "../oncoming/addCut"
10import Card from "submodule/components/Card/Card";
11import CardHeader from "submodule/components/Card/CardHeader";
12import CardBody from "submodule/components/Card/CardBody";
13import CardFooter from "submodule/components/Card/CardFooter";
14import ImageCut from "./imageCut"
15import VideoCut from "./videoCut"
16import AudioCut from "./audioCut"
17import TextCut from "./textCut"
18import IntCut from "./intCut"
19import FloatCut from "./floatCut"
20
21const styles = {
22    btn: {
23        marginTop: 20,
24        display: 'flex',
25        justifyContent: 'space-between'
26    },
27    root: {
28        width: '100%',
29        maxWidth: 360,
30    },
31    paper: {
32        width: '80%',
33        maxHeight: 435,
34    },
35};
36
37const useStyles = makeStyles(styles);
38
39
40export default function modelproperty(props) {
41    const classes = useStyles();
42
43    const [hint, setHint] = useState({ open: false, severity: 'success', message: '提示信息!' });//弹窗状态
44	function hintOpen(message, severity) {//弹窗
45	    setHint({ open: true, severity, message });
46	}
47
48    const { handleproperty, imports, pro, type } = props;
49    const { titleText, amendButtons } = imports;
50    const [open, setOpen] = useState(false);//选择属性类型弹窗的状态
51    const [value, setValue] = useState('');//选择属性类型的值
52    const [ property, setproperty ] = useState(pro ? pro : []);//传入的属性数据
53    const [ amend, setamend ] = useState(type ? false : true);//提交按钮状态
54
55
56    const DetailsButtons = ()=>{
57        return amendButtons.map((btn, index) => {
58            return <Button color={btn.color ? btn.color : 'primary'} key={index} onClick={btn.func}>{btn.name}</Button>
59        })
60    }
61
62
63    const handleClickListItem = () => {
64        setOpen(true);
65    };
66    // 关闭弹窗的回调
67    const handleClose = (newValue,newproperty) => {
68        setOpen(false);
69        if (newValue) {
70            setValue(newValue);
71        }
72        if(newproperty){
73            setproperty(newproperty)
74        }
75    };
76
77
78    // 更改属性名和值时修改property
79    const handleProperty = (newproperty) => {
80        if(newproperty){
81            property.map((item,index) => {
82                if(item.id){
83                    if(item.id == newproperty.id){
84                        setproperty((prop) => {
85                            prop.splice(index,1,newproperty)
86                            return prop
87                        })
88                        return
89                    }
90                }
91                if(item.uuid){
92                    if(item.uuid == newproperty.uuid){
93                        setproperty((prop) => {
94                            prop.splice(index,1,newproperty)
95                            return prop
96                        })
97                        return
98                    }
99                }
100            })
101        }
102    }
103    // 删除属性
104    const handleDelete = (id) => {
105        property.map((item,index) => {
106            if(item.id){
107                if(item.id == id){
108                    setproperty((prop) => {
109                        prop.splice(index,1)
110                        return prop
111                    })
112                    return
113                }
114            }
115            if(item.uuid){
116                if(item.uuid == id){
117                    setproperty((prop) => {
118                        prop.splice(index,1)
119                        return prop
120                    })
121                    return
122                }
123            }
124        })
125        setproperty([...property])
126    }
127
128    // 上传文件
129    async function upload (){
130        if(!type){
131            if(amend){ setamend(false); return }
132        }
133        let arr = [];
134        let arr1 = [];
135        property.map((item) => {
136            switch(item.type){
137                case "图片":
138                    arr.push({name: item.name, type: 'image', value: item.value});
139                    break; 
140                case "视频":
141                    arr.push({name: item.name, type: 'video', value: item.value});
142                    break; 
143                case "音频":
144                    arr.push({name: item.name, type: 'audio', value: item.value});
145                    break; 
146                case "文本":
147                    arr.push({name: item.name, type: 'text', value: item.value});
148                    break; 
149                case "整数":
150                    arr.push({name: item.name, type: 'int', value: item.value});
151                    break; 
152                case "小数":
153                    arr.push({name: item.name, type: 'float', value: item.value});
154                    break; 
155                default:
156                    arr1.push(item);
157                    break; 
158            }
159        })
160        
161        const [res,err] = await request.post('/uploading',arr).req_result()
162        if(err){
163			hintOpen('保存失败', 'error')
164			return
165		}
166		let _arr = res.map((item) => {
167			return {
168				name: item.name,
169                type: item.type,
170                uuid: item.uuid,
171                value: item.value,
172			}
173		})
174        handleproperty(_arr.concat(arr1));
175        hintOpen("保存成功", 'success')
176    }
177
178
179    // 动态加载属性组件
180    const PropertyModel = () =>{
181        let arr = [];
182        property.map((item,index) => {
183            switch(item.type){
184                    case "图片":
185                        arr.push(<ImageCut key={index} cut={item} handleProperty={handleProperty} handleDelete={handleDelete} amend={amend}></ImageCut>)
186                        break;
187                    case "视频":
188                        arr.push(<VideoCut key={index} cut={item} handleProperty={handleProperty} handleDelete={handleDelete} amend={amend}></VideoCut>)
189                        break;
190                    case "音频":
191                        arr.push(<AudioCut key={index} cut={item} handleProperty={handleProperty} handleDelete={handleDelete} amend={amend}></AudioCut>)
192                        break;
193                    case "文本":
194                        arr.push(<TextCut key={index} cut={item} handleProperty={handleProperty} handleDelete={handleDelete} amend={amend}></TextCut>)
195                        break;
196                    case "整数":
197                        arr.push(<IntCut key={index} cut={item} handleProperty={handleProperty} handleDelete={handleDelete} amend={amend}></IntCut>)
198                        break;
199                    case "小数":
200                        arr.push(<FloatCut key={index} cut={item} handleProperty={handleProperty} handleDelete={handleDelete} amend={amend}></FloatCut>)
201                        break;
202                    case "image":
203                        arr.push(<ImageCut key={index} cut={item} handleProperty={handleProperty} handleDelete={handleDelete} amend={amend}></ImageCut>)
204                        break;
205                    case "video":
206                        arr.push(<VideoCut key={index} cut={item} handleProperty={handleProperty} handleDelete={handleDelete} amend={amend}></VideoCut>)
207                        break;
208                    case "audio":
209                        arr.push(<AudioCut key={index} cut={item} handleProperty={handleProperty} handleDelete={handleDelete} amend={amend}></AudioCut>)
210                        break;
211                    case "text":
212                        arr.push(<TextCut key={index} cut={item} handleProperty={handleProperty} handleDelete={handleDelete} amend={amend}></TextCut>)
213                        break;
214                    case "int":
215                        arr.push(<IntCut key={index} cut={item} handleProperty={handleProperty} handleDelete={handleDelete} amend={amend}></IntCut>)
216                        break;
217                    case "float":
218                        arr.push(<FloatCut key={index} cut={item} handleProperty={handleProperty} handleDelete={handleDelete} amend={amend}></FloatCut>)
219                        break;
220                }
221            })
222            return arr
223    }
224
225    return (
226        <>
227            <Card>
228                <CardHeader color="primary">
229                    <h4 style={{ margin: '0 auto' }}>{ titleText }</h4>
230                </CardHeader>
231                <CardBody style={{ margin: '0' }}>
232                    <div className={classes.root} style={{ display: amend ? 'none' : 'block' }}>
233                        <List component="div" role="list">
234                            <ListItem
235                                button
236                                divider
237                                aria-haspopup="true"
238                                aria-controls="ringtone-menu"
239                                aria-label="phone ringtone"
240                                onClick={handleClickListItem}
241                                role="listitem"
242                            >
243                                <ListItemText primary="添加属性" />
244                            </ListItem>
245                            <ConfirmationDialogRaw
246                                classes={{
247                                    paper: classes.paper,
248                                }}
249                                id="ringtone-menu"
250                                keepMounted
251                                open={open}
252                                onClose={handleClose}
253                                value={value}
254                                proper={property}
255                            />
256                        </List>
257                    </div>
258                    {/* { PropertyModel() } */}
259                    <PropertyModel/>
260                </CardBody>
261                <CardFooter>
262                    <Button variant="contained" color={ type ? 'primary' : amend ? 'danger' : 'primary' }
263                        onClick={ upload }>{ type ? '保存' : amend ? '修改' : '保存' }</Button>
264                    { DetailsButtons() }
265                </CardFooter>
266            </Card>
267            <Prompt
268                handleClose={() => {
269                    setHint({
270                        open: false,
271                        severity: hint.severity,
272                        message: hint.message,
273                    });
274                }}
275            {...hint}/>
276        </>
277    )
278}
279
Full Screen

Accelerate Your Automation Test Cycles With LambdaTest

Leverage LambdaTest’s cloud-based platform to execute your automation tests in parallel and trim down your test execution time significantly. Your first 100 automation testing minutes are on us.

Try LambdaTest

Run JavaScript Tests on LambdaTest Cloud Grid

Execute automation tests with Puppeteer on a cloud-based Grid of 3000+ real browsers and operating systems for both web and mobile applications.

Test now for Free
LambdaTestX

We use cookies to give you the best experience. Cookies help to provide a more personalized experience and relevant advertising for you, and web analytics for us. Learn More in our Cookies policy, Privacy & Terms of service

Allow Cookie
Sarah

I hope you find the best code examples for your project.

If you want to accelerate automated browser testing, try LambdaTest. Your first 100 automation testing minutes are FREE.

Sarah Elson (Product & Growth Lead)