How to use watchEffect 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.

03_reactive_vue2实现.js

Source: 03_reactive_vue2实现.js Github

copy
1class Dep {
2  constructor() {
3    this.subscribers = new Set();
4  }
5
6  depend() {
7    if (activeEffect) {
8      this.subscribers.add(activeEffect);
9    }
10  }
11
12  notify() {
13    this.subscribers.forEach(effect => {
14      effect();
15    })
16  }
17}
18
19let activeEffect = null;
20function watchEffect(effect) {
21  activeEffect = effect;
22  effect();
23  activeEffect = null;
24}
25
26
27// Map({key: value}): key是一个字符串
28// WeakMap({key(对象): value}): key是一个对象, 弱引用
29const targetMap = new WeakMap();
30function getDep(target, key) {
31  // 1.根据对象(target)取出对应的Map对象
32  let depsMap = targetMap.get(target);
33  if (!depsMap) {
34    depsMap = new Map();
35    targetMap.set(target, depsMap);
36  }
37
38  // 2.取出具体的dep对象
39  let dep = depsMap.get(key);
40  if (!dep) {
41    dep = new Dep();
42    depsMap.set(key, dep);
43  }
44  return dep;
45}
46
47
48// vue2对raw进行数据劫持
49function reactive(raw) {
50  Object.keys(raw).forEach(key => {
51    const dep = getDep(raw, key);
52    let value = raw[key];
53
54    Object.defineProperty(raw, key, {
55      get() {
56        dep.depend();
57        return value;
58      },
59      set(newValue) {
60        if (value !== newValue) {
61          value = newValue;
62          dep.notify();
63        }
64      }
65    })
66  })
67
68  return raw;
69}
70
71
72// 测试代码
73const info = reactive({counter: 100, name: "why"});
74const foo = reactive({height: 1.88});
75
76// watchEffect1
77watchEffect(function () {
78  console.log("effect1:", info.counter * 2, info.name);
79})
80
81// watchEffect2
82watchEffect(function () {
83  console.log("effect2:", info.counter * info.counter);
84})
85
86// watchEffect3
87watchEffect(function () {
88  console.log("effect3:", info.counter + 10, info.name);
89})
90
91watchEffect(function () {
92  console.log("effect4:", foo.height);
93})
94
95// info.counter++;
96info.name = "why";
97
98// foo.height = 2;
99
Full Screen

reactive.js

Source: reactive.js Github

copy
1class Dep {
2  constructor() {
3    this.subscribers = new Set();
4  }
5
6  depend() {
7    if (activeEffect) {
8      this.subscribers.add(activeEffect);
9    }
10  }
11
12  notify() {
13    this.subscribers.forEach(effect => {
14      effect();
15    })
16  }
17}
18
19let activeEffect = null;
20function watchEffect(effect) {
21  activeEffect = effect;
22  effect();
23  activeEffect = null;
24}
25
26
27// Map({key: value}): key是一个字符串
28// WeakMap({key(对象): value}): key是一个对象, 弱引用
29const targetMap = new WeakMap();
30function getDep(target, key) {
31  // 1.根据对象(target)取出对应的Map对象
32  let depsMap = targetMap.get(target);
33  if (!depsMap) {
34    depsMap = new Map();
35    targetMap.set(target, depsMap);
36  }
37
38  // 2.取出具体的dep对象
39  let dep = depsMap.get(key);
40  if (!dep) {
41    dep = new Dep();
42    depsMap.set(key, dep);
43  }
44  return dep;
45}
46
47
48// vue3对raw进行数据劫持
49function reactive(raw) {
50  return new Proxy(raw, {
51    get(target, key) {
52      const dep = getDep(target, key);
53      dep.depend();
54      return target[key];
55    },
56    set(target, key, newValue) {
57      const dep = getDep(target, key);
58      target[key] = newValue;
59      dep.notify();
60    }
61  })
62}
63
64// const proxy = reactive({name: "123"})
65// proxy.name = "321";
66
67
68// // 测试代码
69// const info = reactive({counter: 100, name: "why"});
70// const foo = reactive({height: 1.88});
71
72// // watchEffect1
73// watchEffect(function () {
74//   console.log("effect1:", info.counter * 2, info.name);
75// })
76
77// // watchEffect2
78// watchEffect(function () {
79//   console.log("effect2:", info.counter * info.counter);
80// })
81
82// // watchEffect3
83// watchEffect(function () {
84//   console.log("effect3:", info.counter + 10, info.name);
85// })
86
87// watchEffect(function () {
88//   console.log("effect4:", foo.height);
89// })
90
91// info.counter++;
92// info.name = "why";
93
94// foo.height = 2;
95
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)