How to use runOnChange method in Playwright Internal

Best JavaScript code snippet using playwright-internal

Run Playwright Internal automation tests on LambdaTest cloud grid

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

app.js

Source: app.js Github

copy
1define([
2	"widgetjs",
3	"./editorWidget",
4	"./outputWidget"
5], function(widgetjs, editorWidget, outputWidget) {
6
7	var counterCode = "function counterWidget(spec, my) {\n\tspec = spec || {};\n\tmy = my || {};\n\n\tvar that = widgetjs.widget(spec, my);\n\n\tvar count = 0;\n\n\tthat.renderContentOn = function(html) {\n\t\thtml.h1(count.toString());\n\t\thtml.button(\"+\").click(function() { count++; that.update();});\n\t\thtml.button(\"-\").click(function() { count--; that.update();});\n\t};\n\n\treturn that;\n};\n\nreturn counterWidget();";
8
9	/**
10	 * JSFiddle like playground for trying out WIDGET-JS
11	 *
12	 * @return {playgroundApp}
13	 */
14	function playgroundApp(spec, my) {
15		spec = spec || {};
16		my = my || {};
17
18		var that = widgetjs.widget(spec, my);
19
20		var runOnChange = true;
21
22		my.code = outputWidget();
23		my.editor = editorWidget({code: counterCode});
24		my.editor.onChange(function() {
25			if(runOnChange) {
26				my.run();
27			}
28		});
29		my.code.evaluateCode(my.editor.getCode());
30
31		//
32		// Render
33		//
34
35		that.renderContentOn = function(html) {
36			my.renderNavOn(html);
37			my.renderEditorOn(html);
38		};
39
40		my.renderNavOn = function(html) {
41			html.div({klass: "navbar navbar-inverse navbar-static-top"},
42				html.div({klass: "container-fluid"},
43					html.div({klass: "navbar-header"},
44						html.a({klass: "navbar-brand", href: "#"}, "Playground")
45					),
46
47					html.form({klass: "navbar-form navbar-right"},
48						my.renderOptionsOn
49					)
50				)
51			);
52		};
53
54		my.renderOptionsOn = function(html) {
55			html.div({klass: "btn checkbox navbar-btn"},
56				html.label({klass: "navbar-link", for: "run-on-change"},
57					// Toggle run on change
58					html.input({
59						id: "run-on-change",
60						type: "checkbox",
61						checked: runOnChange ? "checked" : html.omit(),
62						click: function() { runOnChange = !runOnChange; }
63					}),
64					" run code on change "
65				)
66			);
67
68			// Run manually
69			html.a({klass: "btn btn-success", click: my.run}, "Run");
70		};
71
72		my.renderEditorOn = function(html) {
73			html.div({klass: "container-fluid"},
74				html.div({klass: "row"},
75					html.div({klass: "col-md-6"},
76						// Editor
77						html.div({klass: "editor code_panel"},
78							html.div(my.editor),
79							html.span({klass: "panel_label"}, "Code")
80						)
81					),
82					html.div({class: "col-md-6"},
83						// Output
84						html.div({klass: "output code_panel"},
85							html.div(my.code),
86							html.span({ klass: "panel_label"}, "Output")
87						)
88					)
89				)
90			);
91		};
92
93		//
94		// Protected
95		//
96
97		my.run = function() {
98			my.code.evaluateCode(my.editor.getCode());
99		};
100
101
102		return that;
103	}
104
105	return playgroundApp;
106});
107
Full Screen

watcher.js

Source: watcher.js Github

copy
1const logError = err => {
2  if (err) {
3    console.error(err);
4  }
5};
6
7process.on('uncaughtException', logError);
8process.on('unhandledRejection', logError);
9
10const watcher = async (filepath, files, flags) => {
11  let i = 0;
12  const options = {
13    skipReload: flags.includes('--skip-reload')
14  };
15
16  const run = async () => {
17    //    console.clear();
18    i += 1;
19    console.log('[RUN]', i, filepath, options);
20    try {
21      if (filepath in require.cache) {
22        delete require.cache[filepath];
23      }
24      const newRunner = require(filepath);
25      await newRunner(require('./assert').assert, options);
26      console.log('[DONE]');
27    } catch (err) {
28      console.error(err);
29    }
30  };
31
32  const runOnChange = eventName => eventName === 'change' && run().catch(e => console.error(e));
33  const {watch} = require('fs');
34  files.concat([filepath]).forEach(file => watch(file, runOnChange));
35  run().catch(e => console.error(e));
36};
37
38module.exports = {
39  watcher
40};
41
Full Screen

Model.js

Source: Model.js Github

copy
1import React from 'react';
2import {connect} from 'dva';
3import {Icon,Input,Checkbox,Modal,message,Tooltip} from 'antd';
4import {Button} from '@/components/Form';
5import HotspotRings from '@/components/Upload/HotspotRings';
6import {Model3dView,Help} from '@/components/';
7import {getImgWH} from '@/utils/utils';
8import {Obj} from 'yjtec-support';
9import styles from './ringsStyle.less';
10import {formatUrl} from '@/utils/utils';
11import {mediaImgConfig} from '@/utils/oss.config'
12
13import Media from '@/components/MediaModal';
14import {helpShow} from '@/utils/help';
15
16@connect(({ loading,model3d }) => ({
17  loading:loading,
18  model3d:model3d
19}))
20export default class Model extends React.Component {
21  state = {
22    title:'',
23    describe:'',
24    jumpUrlTitle:'',
25    jumpUrl:'',
26    jumpType:1,
27    userMediaVisible: false,
28    model_id:'',
29    model_thumb:'',
30    modelData: ''
31  }
32
33  componentDidMount(){
34    let {data} = this.props;
35    if (data) {
36      this.setState({
37        ...data
38      })
39    }
40    if (data && data.model_id) {
41      this.getModel3dInfo(data.model_id);
42    }
43  }
44
45  componentDidUpdate(prevProps) {
46    if(!Obj.isEqual(prevProps.data,this.props.data)){
47      let {data} = this.props;
48      if (data) {
49        this.setState({
50          ...data
51        })
52        if (data.model_id) {
53          this.getModel3dInfo(data.model_id);
54        }
55      }
56    }
57  }
58
59  //获取模型数据
60  getModel3dInfo = id => {
61    const {dispatch} = this.props;
62    dispatch({
63      type:'model3d/getInfo',
64      payload:{
65        id:id
66      },
67      callback:(res)=>{
68        this.setState({
69          modelData:res 
70        });
71      }
72    })
73  }
74
75  //打开选择素材
76  openMediaModal = () => {  //选择用户的素材
77    this.setState({
78      userMediaVisible: true
79    })
80  }
81  //选择素材
82  selectModel = (arr) => {
83    this.setState({
84      model_id:arr[0].id,
85      model_thumb:arr[0].thumb.path
86    },()=>{
87      this.runOnChange();
88      this.getModel3dInfo(arr[0].id);
89    })
90    this.closeMediaModal();
91  }
92  //关闭素材选择
93  closeMediaModal = () => {
94    this.setState({
95      userMediaVisible:false
96    })
97  }
98
99  delimg = () => {
100    this.setState({
101      model_id:'',
102      model_thumb:''
103    },()=>{
104      this.runOnChange();
105    })
106  }
107
108  editTitle = (e) => {
109    this.setState({
110      title: e.target.value
111    },()=>{
112      this.runOnChange()
113    })
114  }
115
116  editDesc = (e) => {
117    this.setState({
118      describe: e.target.value
119    },()=>{
120      this.runOnChange()
121    })
122  }
123
124  setJumpType = (e) => {
125    this.setState({
126      jumpType: e.target.checked == true ? 1 : 0
127    },()=>{
128      this.runOnChange()
129    })
130  }
131
132  setJumpUrlTitle = (e) => {
133    this.setState({
134      jumpUrlTitle: e.target.value
135    },()=>{
136      this.runOnChange()
137    })
138  }
139
140  setJumpUrl = (e) => {
141    let value = e.target.value;
142    this.setState({
143      jumpUrl:value
144    },()=>{
145      this.runOnChange()
146    })
147  }
148  formatJumpUrl = (e) => {
149    let value = formatUrl(e.target.value);
150    this.setState({
151      jumpUrl:value
152    },()=>{
153      this.runOnChange()
154    })
155  }
156
157  runOnChange = () => {
158    const {title,describe,jumpUrlTitle,jumpUrl,jumpType,model_id,model_thumb} = this.state;
159    let data = {
160      title:title,
161      describe:describe,
162      jumpUrlTitle:jumpUrlTitle,
163      jumpUrl:jumpUrl,
164      jumpType:jumpType,
165      model_id:model_id,
166      model_thumb:model_thumb
167    }
168    this.props.onChange(data);
169  }
170
171  render() {
172    const {imgUrl,imgType,imgNumber,title,describe,jumpType,jumpUrlTitle,jumpUrl,userMediaVisible,model_id,model_thumb,modelData} = this.state;
173    const text = (
174      <div className={styles.tips}>
175        上传要求:仅支持zip压缩包,压缩包需小于30MB;<br/>
176        模型格式:仅支持obj、fbx模型格式,面数控制在50w以下;<br/>
177        贴图要求:支持jpg、png贴图,数量小于16张,请尽量控制分辨率在2048以下;<br/>
178        封面要求:文件中需包含thumb.jpg或thumb.png文件。
179      </div>
180    )
181    return (
182      <div>
183        <div className={styles.ringsTitle}>
184          <div className={styles.uploadButton}>
185            <Button type="primary" size="small" title='选择模型' onClick={()=>this.openMediaModal()} />
186          </div>
187          
188          <span style={{float:'left'}}>
189            模型文件
190          </span>
191          {helpShow && 
192            (
193              <Tooltip placement="topRight" title={text}>
194                <div style={{ width:'16px', height:'16px', position:'relative',float:'left',margin:'4px 0 0 4px',cursor:'pointer'}}>
195                  <Icon type="question-circle" style={{fontSize:'16px',color:'#999999',float:'left'}} />
196                </div>
197              </Tooltip>
198            )
199          }
200          <div style={{clear:'both'}}></div>
201        </div>
202        
203        {
204          modelData.files && JSON.stringify(modelData.files) !== '[]' && modelData.files.length > 0
205          &&
206          <div className={styles.ringsC} style={{height:'200px'}}>
207            <Model3dView data={modelData} />
208          </div>
209        }
210        
211        <div className={styles.title} style={{marginTop:10}}>
212          模型标题
213        </div>
214        <div className={styles.ringsDesc}>
215          <Input maxLength={20} value={title} placeholder='模型标题' onChange={this.editTitle} style={{borderRadius:3}} />
216        </div>
217        <div className={styles.title} style={{marginTop:10}}>
218          描述内容
219        </div>
220        <div className={styles.ringsDesc}>
221          <Input.TextArea autosize={{minRows:3,maxRows:4}} maxLength={150} value={describe} placeholder='描述内容' onChange={this.editDesc} style={{borderRadius:3}} />
222        </div>
223        <div className={styles.title} style={{marginTop:10}}>
224          <span className={styles.checkboxC}>
225            <Checkbox checked={jumpType == 1 ? true : false} onChange={this.setJumpType} className={styles.checkbox}>新窗口打开</Checkbox>
226          </span>
227          更多内容
228        </div>
229        <div className={styles.ringsJumpUrl}>
230          <Input placeholder='按钮标题' value={jumpUrlTitle} onChange={this.setJumpUrlTitle} style={{marginBottom:'5px'}}/>
231          <Input placeholder='填写链接地址' value={jumpUrl} onBlur={this.formatJumpUrl}  onChange={this.setJumpUrl} />
232        </div>
233
234        <Media
235          title='3D模型素材库'
236          mediaType={5}
237          tabType={1}
238          multipleChoices={false}
239          width='900px'
240          visible={userMediaVisible}
241          onChange={this.selectModel}
242          onCancel={this.closeMediaModal}
243        />
244      </div>
245    );
246  }
247}
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 Playwright Internal 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)