How to use mountRef method in Playwright Internal

Best JavaScript code snippet using playwright-internal

index.js

Source:index.js Github

copy

Full Screen

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,...

Full Screen

Full Screen

ItemViewer.js

Source:ItemViewer.js Github

copy

Full Screen

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}...

Full Screen

Full Screen

App.js

Source:App.js Github

copy

Full Screen

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 );...

Full Screen

Full Screen

Model3D.jsx

Source:Model3D.jsx Github

copy

Full Screen

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 );...

Full Screen

Full Screen

ModelViewer.js

Source:ModelViewer.js Github

copy

Full Screen

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}...

Full Screen

Full Screen

earth.js

Source:earth.js Github

copy

Full Screen

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};...

Full Screen

Full Screen

Search.js

Source:Search.js Github

copy

Full Screen

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};...

Full Screen

Full Screen

Scene.js

Source:Scene.js Github

copy

Full Screen

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}...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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});

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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}

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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});

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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'),

Full Screen

Full Screen

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:

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. 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.
  12. 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.

... View sample repo... View DocumentationSign up Free
›
_

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

...
Sign up with GoogleSign up with Email
Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful