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

ModelViewer.js

Source: ModelViewer.js Github

copy
1import {useEffect, useRef} from "react";
2import * as THREE from "three";
3import {GLTFLoader} from "three/examples/jsm/loaders/GLTFLoader";
4import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";
5
6const style = {
7	height: 50 + "vh",
8	display: "block",
9	backgroundColor: "#cccccc"
10};
11
12const ModelViewer = ({fileUrl, gltfCheck}) => {
13	let scene;
14	let camera;
15	let controls;
16	let renderer;
17	let requestID;
18	let mountRef = useRef(null);
19
20	const sceneSetup = () => {
21		const width = mountRef.current.clientWidth;
22		const height = mountRef.current.clientHeight;
23
24		scene = new THREE.Scene();
25		camera = new THREE.PerspectiveCamera(
26			75,
27			width / height,
28			0.1,
29			1000
30		);
31		camera.position.z = 4;
32		controls = new OrbitControls(camera, mountRef.current);
33		renderer = new THREE.WebGLRenderer({alpha: true});
34		renderer.setSize(width, height);
35		renderer.outputEncoding = THREE.sRGBEncoding;
36		mountRef.current.appendChild(renderer.domElement);
37	};
38
39	const addCustomSceneObjects = () => {
40		const loader = new GLTFLoader();
41		loader.load(fileUrl, (gltf) => {
42			gltfCheck(true);
43			scene.add(gltf.scene);
44		}, undefined, function (error) {
45			gltfCheck(false);
46			console.error(error);
47		});
48		const lights = [];
49		lights[0] = new THREE.PointLight(0xffffff, 1, 0);
50		lights[1] = new THREE.PointLight(0xffffff, 1, 0);
51		lights[2] = new THREE.PointLight(0xffffff, 1, 0);
52		lights[0].position.set(0, 200, 0);
53		lights[1].position.set(100, 200, 100);
54		lights[2].position.set(-100, -200, -100);
55
56		scene.add(lights[0]);
57		scene.add(lights[1]);
58		scene.add(lights[2]);
59	};
60
61	const startAnimationLoop = () => {
62		renderer.render(scene, camera);
63		requestID = window.requestAnimationFrame(startAnimationLoop);
64	};
65
66	const handleWindowResize = () => {
67		const width = mountRef.current.clientWidth;
68		const height = mountRef.current.clientHeight;
69
70		renderer.setSize(width, height);
71		camera.aspect = width / height;
72
73		camera.updateProjectionMatrix();
74	};
75
76	useEffect(() => {
77		let tempRef = mountRef.current;
78		if (mountRef.current) {
79			sceneSetup();
80			addCustomSceneObjects();
81			startAnimationLoop();
82			window.addEventListener('resize', handleWindowResize);
83			tempRef = mountRef.current;
84		}
85		return () => {
86			if (tempRef) {
87				tempRef.removeChild(renderer.domElement);
88				window.cancelAnimationFrame(requestID);
89				controls.dispose()
90			}
91		};
92	});
93
94	return (
95		<div ref={mountRef} style={style}/>
96	);
97}
98
99export default ModelViewer;
Full Screen

Search.js

Source: Search.js Github

copy
1import React, { useEffect, useRef, useState } from 'react';
2import { Link } from 'react-router-dom';
3import PromotionList from '../List/List';
4import useApi from '../../ultis/useApi';
5import './Search.css';
6
7const PromotionSearch = () => {
8  const mountRef = useRef(null);
9  const [search, setSearch] = useState('');
10  const [load, loadInfo] = useApi({
11    debounceDelay: 300,
12    url: '/promotions',
13    method: 'get',
14    credentials: 'include',
15    params: {
16      _embed: 'comments',
17      _order: 'desc',
18      _sort: 'id',
19      title_like: search || undefined,
20    },
21  });
22
23  useEffect(() => {
24    load({
25      debounced: mountRef.current,
26    });
27    if (!mountRef.current) mountRef.current = true;
28    // eslint-disable-next-line react-hooks/exhaustive-deps
29  }, [search]);
30
31  return (
32    <div>
33      <section className="promotion-search">
34        <div className="promotion-search__input">
35          <input
36            type="text"
37            placeholder="Pesquisar Promoções"
38            value={search}
39            onChange={({ target }) => setSearch(target.value)}
40          />
41        </div>
42        <Link className="promotion-search__link" to="/create">
43          Criar Alerta
44        </Link>
45      </section>
46      <PromotionList
47        promotions={loadInfo.data}
48        loading={loadInfo.loading}
49        error={loadInfo.error}
50      />
51    </div>
52  );
53};
54
55export default PromotionSearch;
56
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)