Join the 1-day Testing & QA Summit featuring 15+ Expert Speakers.Register for FREE! 
How to use mountRef method in Playwright Internal
Best JavaScript code snippet using playwright-internal
index.js
Source:index.js 
1import React, {2 useRef,3 useEffect,4 createContext,5 useContext,6 forwardRef,7 useCallback,8} from "react";9import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";10import FocusLock from "react-focus-lock/dist/cjs";11import { wrapEvent, useForkRef, getFocusables } from "../utils";12import Box from "../Box";13import Portal from "../Portal";14import CloseButton from "../CloseButton";15import { hideOthers } from "aria-hidden";16import { useId } from "@reach/auto-id";17import { useColorMode } from "../ColorModeProvider";18import exenv from "exenv";19////////////////////////////////////////////////////////////////////////20const { canUseDOM } = exenv;21const ModalContext = createContext({});22const useModalContext = () => useContext(ModalContext);23////////////////////////////////////////////////////////////////////////24function useAriaHider({25 isOpen,26 id,27 enableInert,28 container = canUseDOM ? document.body : null,29}) {30 const mountRef = useRef(31 canUseDOM32 ? document.getElementById(id) || document.createElement("div")33 : null,34 );35 useEffect(() => {36 let undoAriaHidden = null;37 let mountNode = mountRef.current;38 if (isOpen && canUseDOM) {39 mountRef.current.id = id;40 container.appendChild(mountRef.current);41 if (enableInert) {42 undoAriaHidden = hideOthers(mountNode);43 }44 }45 return () => {46 if (enableInert && undoAriaHidden != null) {47 undoAriaHidden();48 }49 if (mountNode.parentElement) {50 mountNode.parentElement.removeChild(mountNode);51 }52 };53 }, [isOpen, id, enableInert, container]);54 return mountRef;55}56////////////////////////////////////////////////////////////////////////57const Modal = ({58 isOpen,59 initialFocusRef,60 finalFocusRef,61 onClose,62 blockScrollOnMount = true,63 closeOnEsc = true,64 closeOnOverlayClick = true,65 useInert = true,66 scrollBehavior = "outside",67 isCentered,68 addAriaLabels = true,69 preserveScrollBarGap,70 formatIds = id => ({71 content: `modal-${id}`,72 header: `modal-${id}-header`,73 body: `modal-${id}-body`,74 }),75 container,76 returnFocusOnClose = true,77 children,78 id,79 size = "md",80}) => {81 const contentRef = useRef(null);82 const uuid = useId();83 const _id = id || uuid;84 const contentId = formatIds(_id)["content"];85 const headerId = formatIds(_id)["header"];86 const bodyId = formatIds(_id)["body"];87 const portalId = `chakra-portal-${_id}`;88 let addAriaLabelledby = false;89 let addAriaDescribedby = false;90 if (typeof addAriaLabels === "object") {91 addAriaLabelledby = addAriaLabels["header"];92 addAriaDescribedby = addAriaLabels["body"];93 }94 if (typeof addAriaLabels === "boolean") {95 addAriaLabelledby = addAriaLabels;96 addAriaDescribedby = addAriaLabels;97 }98 useEffect(() => {99 const dialogNode = contentRef.current;100 if (isOpen && blockScrollOnMount) {101 disableBodyScroll(dialogNode, {102 reserveScrollBarGap: preserveScrollBarGap,103 });104 }105 return () => enableBodyScroll(dialogNode);106 }, [isOpen, blockScrollOnMount, preserveScrollBarGap]);107 useEffect(() => {108 const func = event => {109 if (event.key === "Escape" && closeOnEsc) {110 onClose(event, "pressedEscape");111 }112 };113 if (isOpen && !closeOnOverlayClick) {114 canUseDOM && document.addEventListener("keydown", func);115 }116 return () => {117 canUseDOM && document.removeEventListener("keydown", func);118 };119 }, [isOpen, onClose, closeOnOverlayClick, closeOnEsc]);120 const mountRef = useAriaHider({121 isOpen,122 id: portalId,123 enableInert: useInert,124 container,125 });126 const context = {127 isOpen,128 initialFocusRef,129 onClose,130 blockScrollOnMount,131 closeOnEsc,132 closeOnOverlayClick,133 returnFocusOnClose,134 contentRef,135 scrollBehavior,136 isCentered,137 headerId,138 bodyId,139 contentId,140 size,141 addAriaLabelledby,142 addAriaDescribedby,143 };144 const activateFocusLock = useCallback(() => {145 if (initialFocusRef && initialFocusRef.current) {146 initialFocusRef.current.focus();147 } else {148 if (contentRef.current) {149 let focusables = getFocusables(contentRef.current);150 if (focusables.length === 0) {151 contentRef.current.focus();152 }153 }154 }155 }, [initialFocusRef]);156 const deactivateFocusLock = useCallback(() => {157 if (finalFocusRef && finalFocusRef.current) {158 finalFocusRef.current.focus();159 }160 }, [finalFocusRef]);161 if (!isOpen) return null;162 return (163 <ModalContext.Provider value={context}>164 <Portal container={mountRef.current}>165 <FocusLock166 returnFocus={returnFocusOnClose && !finalFocusRef}167 onActivation={activateFocusLock}168 onDeactivation={deactivateFocusLock}169 >170 {children}171 </FocusLock>172 </Portal>173 </ModalContext.Provider>174 );175};176////////////////////////////////////////////////////////////////////////177const ModalOverlay = React.forwardRef((props, ref) => {178 return (179 <Box180 pos="fixed"181 bg="rgba(0,0,0,0.4)"182 left="0"183 top="0"184 w="100vw"185 h="100vh"186 ref={ref}187 zIndex="overlay"188 onClick={wrapEvent(props.onClick, event => {189 event.stopPropagation();190 })}191 {...props}192 />193 );194});195ModalOverlay.displayName = "ModalOverlay";196////////////////////////////////////////////////////////////////////////197const ModalContent = React.forwardRef(198 ({ onClick, children, zIndex = "modal", noStyles, ...props }, ref) => {199 const {200 contentRef,201 onClose,202 isCentered,203 bodyId,204 headerId,205 contentId,206 size,207 closeOnEsc,208 addAriaLabelledby,209 addAriaDescribedby,210 scrollBehavior,211 closeOnOverlayClick,212 } = useModalContext();213 const _contentRef = useForkRef(ref, contentRef);214 const { colorMode } = useColorMode();215 const colorModeStyles = {216 light: {217 bg: "white",218 shadow: "0 7px 14px 0 rgba(0,0,0, 0.1), 0 3px 6px 0 rgba(0, 0, 0, .07)",219 },220 dark: {221 bg: "gray.700",222 shadow: `rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 5px 10px, rgba(0, 0, 0, 0.4) 0px 15px 40px`,223 },224 };225 const boxStyleProps = colorModeStyles[colorMode];226 let wrapperStyle = {};227 let contentStyle = {};228 if (isCentered) {229 wrapperStyle = {230 display: "flex",231 alignItems: "center",232 justifyContent: "center",233 };234 } else {235 contentStyle = {236 top: "3.75rem",237 mx: "auto",238 };239 }240 if (scrollBehavior === "inside") {241 wrapperStyle = {242 ...wrapperStyle,243 maxHeight: "calc(100vh - 7.5rem)",244 overflow: "hidden",245 top: "3.75rem",246 };247 contentStyle = {248 ...contentStyle,249 height: "100%",250 top: 0,251 };252 }253 if (scrollBehavior === "outside") {254 wrapperStyle = {255 ...wrapperStyle,256 overflowY: "auto",257 overflowX: "hidden",258 };259 contentStyle = {260 ...contentStyle,261 my: "3.75rem",262 top: 0,263 };264 }265 if (noStyles) {266 wrapperStyle = {};267 contentStyle = {};268 }269 return (270 <Box271 pos="fixed"272 left="0"273 top="0"274 w="100%"275 h="100%"276 zIndex={zIndex}277 onClick={event => {278 event.stopPropagation();279 if (closeOnOverlayClick) {280 onClose(event, "clickedOverlay");281 }282 }}283 onKeyDown={event => {284 if (event.key === "Escape") {285 event.stopPropagation();286 if (closeOnEsc) {287 onClose(event, "pressedEscape");288 }289 }290 }}291 {...wrapperStyle}292 >293 <Box294 ref={_contentRef}295 as="section"296 role="dialog"297 aria-modal="true"298 tabIndex={-1}299 outline={0}300 maxWidth={size}301 w="100%"302 id={contentId}303 {...(addAriaDescribedby && { "aria-describedby": bodyId })}304 {...(addAriaLabelledby && { "aria-labelledby": headerId })}305 pos="relative"306 d="flex"307 flexDir="column"308 zIndex={zIndex}309 onClick={wrapEvent(onClick, event => event.stopPropagation())}310 {...boxStyleProps}311 {...contentStyle}312 {...props}313 >314 {children}315 </Box>316 </Box>317 );318 },319);320ModalContent.displayName = "ModalContent";321////////////////////////////////////////////////////////////////////////322const ModalHeader = forwardRef((props, ref) => {323 const { headerId } = useModalContext();324 return (325 <Box326 ref={ref}327 px={6}328 py={4}329 id={headerId}330 as="header"331 position="relative"332 fontSize="xl"333 fontWeight="semibold"334 {...props}335 />336 );337});338ModalHeader.displayName = "ModalHeader";339////////////////////////////////////////////////////////////////////////340const ModalFooter = forwardRef((props, ref) => (341 <Box342 display="flex"343 justifyContent="flex-end"344 ref={ref}345 px={6}346 py={4}347 as="footer"348 {...props}349 />350));351ModalFooter.displayName = "ModalFooter";352////////////////////////////////////////////////////////////////////////353const ModalBody = forwardRef((props, ref) => {354 const { bodyId, scrollBehavior } = useModalContext();355 let style = {};356 if (scrollBehavior === "inside") {357 style = { overflowY: "auto" };358 }359 return (360 <Box ref={ref} id={bodyId} px={6} py={2} flex="1" {...style} {...props} />361 );362});363ModalBody.displayName = "ModalBody";364////////////////////////////////////////////////////////////////////////365const ModalCloseButton = forwardRef((props, ref) => {366 const { onClose } = useModalContext();367 return (368 <CloseButton369 ref={ref}370 onClick={onClose}371 position="absolute"372 top="8px"373 right="12px"374 {...props}375 />376 );377});378ModalCloseButton.displayName = "ModalCloseButton";379////////////////////////////////////////////////////////////////////////380export {381 Modal,382 ModalOverlay,383 ModalContent,384 ModalHeader,385 ModalFooter,386 ModalBody,387 ModalCloseButton,...
ItemViewer.js
Source:ItemViewer.js
1// copier coller code iss tracker2import * as THREE from "../node_modules/three/build/three.js";3import {GLTFLoader} from '../node_modules/three/examples/jsm/loaders/GLTFLoader.js'4import { RoughnessMipmapper } from '../node_modules/three/examples/jsm/utils/RoughnessMipmapper.js';5import Stats from './Stats';6import React, { Component } from "react";7import ReactDOM from "react-dom";8import {OrbitControls} from "../node_modules/three/examples/jsm/controls/OrbitControls"9import { Object3D } from "three";10import { useEffect, useRef, useState } from "react";11export default function ItemViewer(props){12 const mountRef = useRef(null);13 const [pos, setPos] = useState(false);14 const [fac, setFac] = useState(props.fac);15 useEffect(() => {16 setFac(props.fac)17 let pointclouds;18const scene = new THREE.Scene()19scene.background = new THREE.Color( 0xffffff );20const raycaster = new THREE.Raycaster();21const mouse = new THREE.Vector2();22let x = 023let y = 0;24let z = 0;25const camera = new THREE.PerspectiveCamera(26 75,27 (window.innerWidth) / (window.innerHeight),28 0.1,29 100030)31camera.position.z = 2032camera.position.y = 2033const renderer = new THREE.WebGLRenderer()34renderer.setSize(window.innerWidth *fac, window.innerHeight * fac)35mountRef.current.appendChild( renderer.domElement );36const controls = new OrbitControls(camera, renderer.domElement)37controls.enableDamping = true38 39const loader = new GLTFLoader()40loader.setCrossOrigin("anonymous");41loader.load(42 "https://lauriaristorage.blob.core.windows.net/" + props.link,43 function (gltf) {44 gltf.scene.name = "gltf"45 var box = new THREE.Box3().setFromObject(gltf.scene);46 scene.add(gltf.scene)47 },48 (xhr) => {49 console.log((xhr.loaded / xhr.total) * 100 + '% loaded')50 },51 (error) => {52 console.log(error)53 }54)55const mgeo = new THREE.SphereGeometry(1,1);56 const mmat = new THREE.MeshStandardMaterial({color: 0xFFFFFF});57 const moon = new THREE.Mesh(mgeo,mmat);58 moon.name = "intersection";59const pointLight = new THREE.PointLight(0xFFFFFF);60 pointLight.position.set(30,30,30);61 pointLight.intensity = 5;62 const ambientLight = new THREE.AmbientLight(0x404040);63 ambientLight.intensity = 1;64 scene.add(pointLight, ambientLight)65window.addEventListener('resize', onWindowResize, false)66function onWindowResize() {67 camera.aspect = window.innerWidth / (window.innerHeight)68 camera.updateProjectionMatrix()69 renderer.setSize(window.innerWidth *fac, window.innerHeight*fac)70 render()71}72window.addEventListener('pointermove', onMouseMove);73function onMouseMove(event){74 if(mountRef.current !== null){75 let posDiv = mountRef.current.getBoundingClientRect();76 if(event.clientX > posDiv.x && event.clientX < posDiv.x + posDiv.width && event.clientY > posDiv.y && event.clientY < posDiv.y + posDiv.height){77 mouse.x = ( (event.clientX - posDiv.x) / posDiv.width ) * 2 - 1;78 mouse.y = - (( event.clientY - posDiv.y) / posDiv.height ) * 2 + 1;79 }80}81 82}83function animate() {84 requestAnimationFrame(animate)85 controls.update()86 render()87}88function render() {89 raycaster.setFromCamera( mouse, camera);90 // calculate objects intersecting the picking ray91 const point = new Object3D();92 const intersects = raycaster.intersectObjects( scene.children );93 for (let i = 0; i < intersects.length; i++) {94 // You can do anything you want here, this is just an example to make the hovered object transparent95 //console.log(intersects[i].object.parent.name); 96 const newMaterial = intersects[i].object.material.clone();97 intersects[i].object.material = newMaterial;98 if(i === 2){99 x = intersects[2].point.x;100 y = intersects[2].point.y;101 z = intersects[2].point.z;102 }103 }104 window.addEventListener("click", onClick, false);105 function onClick(event){106 if(mountRef.current !== null){107 let posDiv = mountRef.current.getBoundingClientRect();108 if(event.clientX > posDiv.x && event.clientX < posDiv.x + posDiv.width && event.clientY > posDiv.y && event.clientY < posDiv.y + posDiv.height){109 let position = moon.position;110 props.click(position.x, position.y, position.z);111 }112 }113 114 }115 116 117moon.position.set(x,y,z);118 scene.add(moon);119 renderer.render(scene, camera)120}121window.addEventListener('resize', onWindowResize, false)122function onWindowResize() {123 camera.aspect = window.innerWidth / window.innerHeight124 camera.updateProjectionMatrix()125 renderer.setSize(window.innerWidth * fac, window.innerHeight * fac)126 render()127}128animate()129//return () => mountRef.current.removeChild( renderer.domElement);130 }, [])131 132 133 return (134 <>135 <div ref={mountRef} style={{cursor: "none"}}id="3d">136 </div>137 </>138 )139 140}...
App.js
Source:App.js
1import React, { useEffect, useRef, useState } from "react";2import Welcome from "./Welcome";3import Header from "./Header";4import About from "./About";5import Resume from "./Resume";6import Footer from "./Footer";7import More from "./More";8import "../styles/main.css";9import "../styles/font-awesome.min.css";10import * as THREE from "three";11import harry from "../../images/profile.jpg";12import metal from "../../images/metal.jpg";13import { Color } from "three";14export default function App() {15 const mountRef = useRef(null);16 useEffect(() => {17 let geometry, color1, color2;18 color2 = new Color(0xffffff);19 color1 = new Color(0x015353);20 const curr = mountRef.current;21 var scene = new THREE.Scene();22 var camera = new THREE.PerspectiveCamera(23 75,24 window.innerWidth / window.innerHeight,25 0.1,26 100027 );28 var renderer = new THREE.WebGLRenderer({ antialias: true });29 renderer.setPixelRatio(window.devicePixelRatio);30 renderer.setSize(window.innerWidth, window.innerHeight);31 mountRef.current.appendChild(renderer.domElement);32 camera.position.setZ(30);33 // let w = 3,34 // h = 1;35 geometry = new THREE.TorusGeometry(25, 1, 16, 100);36 const metalTexture = new THREE.TextureLoader().load(metal);37 var material = new THREE.MeshBasicMaterial({38 map: metalTexture,39 });40 var torus = new THREE.Mesh(geometry, material);41 torus.position.set(-1, 1, 0);42 // scene.add(torus);43 var light = new THREE.AmbientLight(0xffffff);44 var lightPoint = new THREE.PointLight(0xffffff);45 scene.add(lightPoint, light);46 const particlesGeometry = new THREE.BufferGeometry();47 const particlesCount = 5000;48 const posArray = new Float32Array(particlesCount * 3);49 for (let i = 0; i < particlesCount * 3; i++) {50 posArray[i] = (Math.random() + 3) * 15 * (Math.random() - 0.5);51 }52 particlesGeometry.setAttribute(53 "position",54 new THREE.BufferAttribute(posArray, 3)55 );56 const particlesMaterial = new THREE.PointsMaterial({57 size: 0.005,58 color: color2,59 });60 const particlesMesh = new THREE.Points(61 particlesGeometry,62 particlesMaterial63 );64 scene.add(particlesMesh);65 const profileTexture = new THREE.TextureLoader().load(harry);66 const profileBox = new THREE.Mesh(67 new THREE.BoxGeometry(3, 3, 3),68 new THREE.MeshBasicMaterial({ map: profileTexture })69 );70 profileBox.position.y += 13;71 profileBox.position.x -= 1;72 scene.add(profileBox);73 document.addEventListener("mousemove", animateParticles);74 document.addEventListener("mousewheel", zoomCamera, false);75 let mouseX = 0;76 let mouseY = 0;77 function animateParticles(event) {78 mouseY = event.clientY;79 mouseX = event.clientX;80 }81 function zoomCamera(event) {82 // camera.position.z += event.deltaY / 800;83 profileBox.position.z -= event.deltaY / 500;84 }85 var animate = function () {86 requestAnimationFrame(animate);87 torus.rotation.x += 0.0005;88 torus.rotation.y += 0.0005;89 torus.rotation.z += 0.0005;90 profileBox.rotation.x += 0.001;91 profileBox.rotation.y += 0.001;92 profileBox.rotation.z += 0.001;93 if (mouseX > 0) {94 camera.position.x = -mouseX * 0.003;95 camera.position.y = -mouseY * 0.003;96 }97 particlesMesh.rotation.y += -0.0005;98 // particlesMesh.rotation.x += 0.001;99 particlesMesh.rotation.z += -0.0005;100 renderer.render(scene, camera);101 };102 let onWindowResize = function () {103 camera.aspect = window.innerWidth / window.innerHeight;104 camera.updateProjectionMatrix();105 renderer.setSize(window.innerWidth, window.innerHeight);106 };107 window.addEventListener("resize", onWindowResize, false);108 animate();109 return () => curr.removeChild(renderer.domElement);110 // eslint-disable-next-line react-hooks/exhaustive-deps111 });112 return (113 <div className="App">114 <div id="c" ref={mountRef}></div>115 <Welcome />116 <About />117 <Resume />118 <More />119 <Footer />120 </div>121 );...
Model3D.jsx
Source:Model3D.jsx
1import { useEffect, useRef } from 'react';2import * as THREE from 'three';3export const Model3D = () => {4 5 const mountRef = useRef(null);6 useEffect(() => {7 const currentRef = mountRef.current; 8 const {clientWidth, clientHeight} = currentRef;9 const scene = new THREE.Scene();10 const camera = new THREE.PerspectiveCamera(25, clientWidth/clientHeight, 0.01, 1000);11 camera.position.z = 10;12 scene.add(camera);13 const renderer = new THREE.WebGLRenderer();14 renderer.setSize(clientWidth, clientHeight);15 currentRef.appendChild(renderer.domElement);16 const geometry = new THREE.BoxGeometry(0.4, 0.4, 0.4);17 const material = new THREE.MeshBasicMaterial({color:0xffff00});18 const cube = new THREE.Mesh(geometry, material);19 cube.position.x = -3;20 const geometryShepre = new THREE.SphereGeometry(0.3, 22, 22);21 const materialShepre = new THREE.MeshBasicMaterial({color:0x0f2c64});22 const Shepre = new THREE.Mesh(geometryShepre, materialShepre);23 Shepre.position.x = 1;24 const geometryCone = new THREE.ConeGeometry( 0.5, 0.7, 10 );25 const materialCone = new THREE.MeshBasicMaterial( {color: 'rgb (0,100,0)'} );26 const cone = new THREE.Mesh( geometryCone, materialCone );27 cone.position.x = -1;28 const geometryCilinder = new THREE.CylinderGeometry( 0.4, 0.4, 0.4, 20 );29 const materialCilinder = new THREE.MeshBasicMaterial( {color: 'rgb(255, 0, 0)'} );30 const cylinder = new THREE.Mesh( geometryCilinder, materialCilinder );31 cylinder.position.x = 3;32 33 scene.add(cone);34 scene.add(cylinder);35 scene.add(Shepre);36 scene.add(cube);37 38 const clock = new THREE.Clock();39 const animate = () => {40 const elapsedtime = clock.getElapsedTime();41 cube.rotation.x = elapsedtime;42 cube.rotation.y = elapsedtime;43 cube.position.y = Math.sin(elapsedtime);44 Shepre.position.y = Math.sin((elapsedtime * -1));45 cylinder.rotation.x = elapsedtime;46 cylinder.rotation.y = elapsedtime;47 cylinder.position.y = Math.sin(elapsedtime);48 cone.rotation.x = elapsedtime;49 cone.rotation.y = elapsedtime;50 cone.position.y = Math.sin(elapsedtime);51 renderer.render(scene, camera);52 requestAnimationFrame(animate);53 }54 animate();55 return () => {56 currentRef.removeChild(renderer.domElement);57 }58 }, [])59 60 return (61 <div ref={mountRef} style={{ width: '100%', height:'100vh' }}>62 </div>63 );...
ModelViewer.js
Source:ModelViewer.js
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";5const style = {6 height: 50 + "vh",7 display: "block",8 backgroundColor: "#cccccc"9};10const ModelViewer = ({fileUrl, gltfCheck}) => {11 let scene;12 let camera;13 let controls;14 let renderer;15 let requestID;16 let mountRef = useRef(null);17 const sceneSetup = () => {18 const width = mountRef.current.clientWidth;19 const height = mountRef.current.clientHeight;20 scene = new THREE.Scene();21 camera = new THREE.PerspectiveCamera(22 75,23 width / height,24 0.1,25 100026 );27 camera.position.z = 4;28 controls = new OrbitControls(camera, mountRef.current);29 renderer = new THREE.WebGLRenderer({alpha: true});30 renderer.setSize(width, height);31 renderer.outputEncoding = THREE.sRGBEncoding;32 mountRef.current.appendChild(renderer.domElement);33 };34 const addCustomSceneObjects = () => {35 const loader = new GLTFLoader();36 loader.load(fileUrl, (gltf) => {37 gltfCheck(true);38 scene.add(gltf.scene);39 }, undefined, function (error) {40 gltfCheck(false);41 console.error(error);42 });43 const lights = [];44 lights[0] = new THREE.PointLight(0xffffff, 1, 0);45 lights[1] = new THREE.PointLight(0xffffff, 1, 0);46 lights[2] = new THREE.PointLight(0xffffff, 1, 0);47 lights[0].position.set(0, 200, 0);48 lights[1].position.set(100, 200, 100);49 lights[2].position.set(-100, -200, -100);50 scene.add(lights[0]);51 scene.add(lights[1]);52 scene.add(lights[2]);53 };54 const startAnimationLoop = () => {55 renderer.render(scene, camera);56 requestID = window.requestAnimationFrame(startAnimationLoop);57 };58 const handleWindowResize = () => {59 const width = mountRef.current.clientWidth;60 const height = mountRef.current.clientHeight;61 renderer.setSize(width, height);62 camera.aspect = width / height;63 camera.updateProjectionMatrix();64 };65 useEffect(() => {66 let tempRef = mountRef.current;67 if (mountRef.current) {68 sceneSetup();69 addCustomSceneObjects();70 startAnimationLoop();71 window.addEventListener('resize', handleWindowResize);72 tempRef = mountRef.current;73 }74 return () => {75 if (tempRef) {76 tempRef.removeChild(renderer.domElement);77 window.cancelAnimationFrame(requestID);78 controls.dispose()79 }80 };81 });82 return (83 <div ref={mountRef} style={style}/>84 );85}...
earth.js
Source:earth.js
1import React from "react";2import gsap from "gsap";3import { useState, useEffect, useRef } from "react";4import * as THREE from "three";5const Earth = () => {6 const mountRef = useRef(null);7 const [MousePosition, setMousePosition] = useState({8 x: 0,9 y: 0,10 });11 const positionRef = useRef(MousePosition);12 useEffect(() => {13 const scene = new THREE.Scene();14 const camera = new THREE.PerspectiveCamera(15 75,16 window.innerWidth / window.innerHeight,17 0.1,18 100019 );20 const renderer = new THREE.WebGLRenderer({ antialias: true });21 renderer.setSize(window.innerWidth, window.innerHeight);22 renderer.setPixelRatio(window.devicePixelRatio);23 mountRef.current.appendChild(renderer.domElement);24 const geometry = new THREE.SphereGeometry(5, 50, 50);25 const material = new THREE.MeshBasicMaterial({26 map: new THREE.TextureLoader().load("/globe/earth5.jpeg"),27 });28 const sphere = new THREE.Mesh(geometry, material);29 const group = new THREE.Group();30 group.add(sphere);31 scene.add(group);32 camera.position.z = 12;33 const animate = function () {34 requestAnimationFrame(animate);35 // sphere.rotation.x += 0.01;36 renderer.render(scene, camera);37 sphere.rotation.y += 0.0005;38 // sphere.rotation.x += 0.0005;39 gsap.to(group.rotation, {40 x: positionRef.current.y * 0.5,41 y: positionRef.current.x * 0.5,42 duration: 2,43 });44 };45 animate();46 return () => {47 // eslint-disable-next-line react-hooks/exhaustive-deps48 mountRef.current.removeChild(renderer.domElement);49 scene.remove(group);50 geometry.dispose();51 material.dispose();52 };53 }, []);54 const handleMouseMove = (e) => {55 setMousePosition({56 x: (e.clientX / window.innerWidth) * 2 - 1,57 y: (e.clientY / window.innerHeight) * 2 - 1,58 });59 positionRef.current = MousePosition;60 // console.log(MousePosition);61 };62 return <div onMouseMove={(e) => handleMouseMove(e)} ref={mountRef}></div>;63};...
Search.js
Source:Search.js
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';6const PromotionSearch = () => {7 const mountRef = useRef(null);8 const [search, setSearch] = useState('');9 const [load, loadInfo] = useApi({10 debounceDelay: 300,11 url: '/promotions',12 method: 'get',13 credentials: 'include',14 params: {15 _embed: 'comments',16 _order: 'desc',17 _sort: 'id',18 title_like: search || undefined,19 },20 });21 useEffect(() => {22 load({23 debounced: mountRef.current,24 });25 if (!mountRef.current) mountRef.current = true;26 // eslint-disable-next-line react-hooks/exhaustive-deps27 }, [search]);28 return (29 <div>30 <section className="promotion-search">31 <div className="promotion-search__input">32 <input33 type="text"34 placeholder="Pesquisar Promoções"35 value={search}36 onChange={({ target }) => setSearch(target.value)}37 />38 </div>39 <Link className="promotion-search__link" to="/create">40 Criar Alerta41 </Link>42 </section>43 <PromotionList44 promotions={loadInfo.data}45 loading={loadInfo.loading}46 error={loadInfo.error}47 />48 </div>49 );50};...
Scene.js
Source:Scene.js
1import React, { useEffect, useRef } from 'react'2import { mountScene, cleanupScene } from './Script';3const Scene = () => {4 const mountRef = useRef();5 useEffect(() => {6 mountScene(mountRef);7 8 return () => {9 cleanupScene();10 }11 });12 return (13 <div className="container" style={{ width: '100%', height: '100vh' }} ref={mountRef}>14 </div>15 )16}...
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: 'google.png' });7 await browser.close();8})();
Using AI Code Generation
1const { mountRef } = require('playwright');2const { chromium } = require('playwright');3(async () => {4 const browser = await chromium.launch();5 const page = await browser.newPage();6 const elementHandle = await page.$('text=Get started');7 await mountRef(page, elementHandle, 'click');8 await page.screenshot({ path: 'click.png' });9 await browser.close();10})();11import { mountRef } from 'playwright';12import { chromium } from 'playwright';13(async () => {14 const browser = await chromium.launch();15 const page = await browser.newPage();16 const elementHandle = await page.$('text=Get started');17 await mountRef(page, elementHandle, 'click');18 await page.screenshot({ path: 'click.png' });19 await browser.close();20})();
Using AI Code Generation
1const { mountRef } = require('playwright-internal');2const { chromium } = require('playwright');3(async () => {4 const browser = await chromium.launch();5 const page = await browser.newPage();6 const elementHandle = await page.$('input[name="q"]');7 await mountRef(page, elementHandle);8 await browser.close();9})();10const { test, expect } = require('@playwright/test');11test('test', async ({ page }) => {12 const elementHandle = await page.$('input[name="q"]');13 await page.mountRef(elementHandle);14 expect(1).toBe(1);15});
Using AI Code Generation
1const { chromium } = require('playwright');2const { mountRef } = require('playwright/lib/server/browserContext');3(async () => {4 const browser = await chromium.launch();5 const context = await browser.newContext();6 await mountRef(context, 'test', 'test');7 await browser.close();8})();9import { chromium } from 'playwright';10import { mountRef } from 'playwright/lib/server/browserContext';11(async () => {12 const browser = await chromium.launch();13 const context = await browser.newContext();14 await mountRef(context, 'test', 'test');15 await browser.close();16})();17from playwright.sync_api import chromium18from playwright.sync_api._generated import mountRef19browser = chromium.launch()20context = browser.new_context()21mountRef(context, 'test', 'test')22browser.close()23import com.microsoft.playwright.*;24public class Test {25 public static void main(String[] args) {26 try (Playwright playwright = Playwright.create()) {27 BrowserType browserType = playwright.chromium();28 Browser browser = browserType.launch();29 BrowserContext context = browser.newContext();30 context.mountRef("test", "test");31 browser.close();32 }33 }34}
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const page = await browser.newPage();5 const elementHandle = await page.$('input');6 await elementHandle.mountRef();7 await browser.close();8})();
Using AI Code Generation
1const { chromium } = require('playwright');2const { mountRef } = require('playwright/lib/server/server.js');3(async () => {4 const browser = await chromium.launch();5 const context = await browser.newContext();6 const page = await context.newPage();7 const elementHandle = await page.$('h1');8 const ref = await mountRef(page, elementHandle);9 console.log(ref);10 await browser.close();11})();12{ '$$': 1, '$ref': 'element-1' }13const { chromium } = require('playwright');14const { mountRef } = require('playwright/lib/server/server.js');15(async () => {16 const browser = await chromium.launch();17 const context = await browser.newContext();18 const page = await context.newPage();19 const elementHandle = await page.$('h1');20 const ref = await mountRef(page, elementHandle);21 console.log(ref);22 const newElementHandle = await page.$(ref);23 console.log(await newElementHandle.evaluate(e => e.textContent));24 await browser.close();25})();26{ '$$': 1, '$ref': 'element-1' }27const { chromium } = require('playwright');28const { mountRef } = require('playwright/lib/server/server.js');29(async () => {30 const browser = await chromium.launch();31 const context = await browser.newContext();32 const page = await context.newPage();
Using AI Code Generation
1const { mountRef } = require('@playwright/test/lib/server/injected/injectedScript');2const { test } = require('@playwright/test');3test('test', async ({ page }) => {4 await page.setContent(`<button id="btn">Click me</button>`);5 const button = page.locator('#btn');6 await button.click();7 const ref = await mountRef(button);8 console.log(ref);9});
Using AI Code Generation
1const { mountRef } = require('playwright-core/lib/client/frames.js');2const { chromium } = require('playwright-core');3const { html, render } = require('htm/preact');4const { useState } = require('preact/hooks');5(async () => {6 const browser = await chromium.launch();7 const context = await browser.newContext();8 const page = await context.newPage();9 const [frame] = await page.frames();10 const div = document.createElement('div');11 document.body.appendChild(div);12 const [ref, setRef] = useState(null);13 render(html`<div ref=${setRef}>Hello World!</div>`, div);14 await mountRef(frame, ref);15 await browser.close();16})();17const { helper } = require('./helper');18const { assert } = require('./helper');19const { JSHandle } = require('./JSHandle');20const { ElementHandle } = require('./ElementHandle');21 * @param {!Frame} frame22 * @param {!Node} node23 * @return {!Promise<!ElementHandle>}24async function mountRef(frame, node) {25 const { page } = frame;26 const context = page._mainFrame._context;27 assert(context, 'INTERNAL ERROR: missing main world context');28 const objectHandle = await context.evaluateHandle((injected, { node }) => {29 const { htm, preact } = injected;30 const { render } = htm;31 const { useState } = preact;32 const div = document.createElement('div');33 document.body.appendChild(div);34 const [ref, setRef] = useState(null);35 render(htm`<div ref=${setRef}>Hello World!</div>`, div);36 return ref;37 }, { node });38 return ElementHandle.from(objectHandle);39}40module.exports = { mountRef };41const path = require('path');42const fs = require('fs');43const util = require('util');44const { EventEmitter } = require('events');45const { TimeoutError } = require('./Errors');46const { debugLogger } = require('./DebugLogger');47const helper = module.exports = {48 ...require('playwright-core/lib/helper'),
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?
