Join the 1-day Testing & QA Summit featuring 15+ Expert Speakers.Register for FREE! 
How to use beginWork method in Playwright Internal
Best JavaScript code snippet using playwright-internal
get-label-from-stack-trace.js
Source:get-label-from-stack-trace.js 
1// @flow2import { getLabelFromStackTrace } from '../src/get-label-from-stack-trace'3/**4 * # Safari stack traces5 *6 * The component name may not appear in the Safari stack trace because Safari7 * implements Proper Tail Calls.8 *9 * Two components that seem almost identical may produce different stack traces10 * based on whether or not a Proper Tail Call optimization was possible. As a11 * result, you may not get the same stack traces if you try to reproduce these12 * test cases on your own.13 *14 * If Safari omits the component name from the stack trace, the best thing we15 * can do is:16 *17 * 1. Match the parent component's name if it is in the stack trace, or18 * 2. Return `undefined`.19 */20// Ensure that it works for components that have numbers and $ in their name21const expectedLabel = 'MyComponent-9'22/**23 * E.g.24 *25 * ```26 * function MyComponent$9() {27 * return <div css={{ color: 'red' }} />28 * }29 * ```30 *31 * See `playgrounds/cra/.env` for instructions on testing with the old JSX32 * transform.33 *34 * All tests after this block are for runtime=automatic, i.e. the new JSX35 * transform introduced in React 1736 */37describe('typical function component - runtime=classic', () => {38 test('Chrome', () => {39 // Each "at" line starts with some whitespace40 const stackTrace = `Error41 at createEmotionProps (emotion-element-1fb5ab00.browser.esm.js:143)42 at jsx (emotion-react.browser.esm.js:100)43 at MyComponent$9 (App.js:22)44 at renderWithHooks (react-dom.development.js:14803)45 at mountIndeterminateComponent (react-dom.development.js:17482)46 at beginWork (react-dom.development.js:18596)`47 expect(getLabelFromStackTrace(stackTrace)).toBe(expectedLabel)48 })49 test('Firefox', () => {50 const stackTrace = `createEmotionProps@http://localhost:3000/static/js/bundle.js:46440:4051jsx@http://localhost:3000/static/js/bundle.js:46636:11352MyComponent$9@http://localhost:3000/static/js/bundle.js:47600:7253renderWithHooks@http://localhost:3000/static/js/bundle.js:18904:2754mountIndeterminateComponent@http://localhost:3000/static/js/bundle.js:21583:1355beginWork@http://localhost:3000/static/js/bundle.js:22697:16`56 expect(getLabelFromStackTrace(stackTrace)).toBe(expectedLabel)57 })58 test('Safari', () => {59 const stackTrace = `createEmotionProps@http://localhost:3000/static/js/bundle.js:46440:4960jsx@http://localhost:3000/static/js/bundle.js:46635:11361renderWithHooks@http://localhost:3000/static/js/bundle.js:18904:2762mountIndeterminateComponent@http://localhost:3000/static/js/bundle.js:21583:2863beginWork$1@http://localhost:3000/static/js/bundle.js:27280:23`64 expect(getLabelFromStackTrace(stackTrace)).toBeUndefined()65 })66 test('SSR', () => {67 const stackTrace = `Error68 at Object.createEmotionProps (webpack-internal:///../../packages/react/dist/emotion-element-7a506f09.cjs.dev.js:195:40)69 at jsx (webpack-internal:///../../packages/react/dist/emotion-react.cjs.dev.js:103:45)70 at MyComponent$9 (webpack-internal:///./pages/index.js:20:61)71 at processChild (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3043:14)72 at resolve (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:2960:5)73 at ReactDOMServerRenderer.render (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3435:22)74 at ReactDOMServerRenderer.read (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3373:29)75 at Object.renderToString (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3988:27)76 at Object.renderPage (C:/Projects/OSS/emotion/node_modules/next/dist/server/render.js:621:45)77 at Object.defaultGetInitialProps (C:/Projects/OSS/emotion/node_modules/next/dist/server/render.js:301:51)`78 expect(getLabelFromStackTrace(stackTrace)).toBe(expectedLabel)79 })80})81/**82 * E.g.83 *84 * ```85 * function MyComponent$9() {86 * return <div css={{ color: 'red' }} />87 * }88 * ```89 */90describe('typical function component', () => {91 test('Chrome', () => {92 const stackTrace = `Error93 at createEmotionProps (emotion-element-895e3bbe.browser.esm.js:142)94 at jsxDEV (emotion-react-jsx-dev-runtime.browser.esm.js:18)95 at MyComponent$9 (App.js:5)96 at renderWithHooks (react-dom.development.js:14803)97 at mountIndeterminateComponent (react-dom.development.js:17482)98 at beginWork (react-dom.development.js:18596)99 at beginWork$1 (react-dom.development.js:23179)`100 expect(getLabelFromStackTrace(stackTrace)).toBe(expectedLabel)101 })102 test('Firefox', () => {103 const stackTrace = `createEmotionProps@http://localhost:3000/static/js/main.chunk.js:844:40104jsxDEV@http://localhost:3000/static/js/main.chunk.js:1126:247105MyComponent$9@http://localhost:3000/static/js/main.chunk.js:2274:92106renderWithHooks@http://localhost:3000/static/js/vendors~main.chunk.js:16616:31107mountIndeterminateComponent@http://localhost:3000/static/js/vendors~main.chunk.js:19228:17108beginWork@http://localhost:3000/static/js/vendors~main.chunk.js:20306:20`109 expect(getLabelFromStackTrace(stackTrace)).toBe(expectedLabel)110 })111 test('Safari', () => {112 const stackTrace = `createEmotionProps@http://localhost:3000/static/js/main.chunk.js:844:49113jsxDEV@http://localhost:3000/static/js/main.chunk.js:1126:247114MyComponent$9@http://localhost:3000/static/js/main.chunk.js:2274:92115renderWithHooks@http://localhost:3000/static/js/vendors~main.chunk.js:16616:31116mountIndeterminateComponent@http://localhost:3000/static/js/vendors~main.chunk.js:19228:32117beginWork$1@http://localhost:3000/static/js/vendors~main.chunk.js:24848:27`118 expect(getLabelFromStackTrace(stackTrace)).toBe(expectedLabel)119 })120 test('SSR', () => {121 const stackTrace = `Error122 at Object.createEmotionProps (webpack-internal:///../../packages/react/dist/emotion-element-7a9c77b4.cjs.dev.js:175:40)123 at jsxDEV (webpack-internal:///../../packages/react/jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.cjs.dev.js:22:75)124 at MyComponent$9 (webpack-internal:///./pages/index.js:60:85)125 at processChild (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3043:14)126 at resolve (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:2960:5)127 at ReactDOMServerRenderer.render (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3435:22)128 at ReactDOMServerRenderer.read (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3373:29)129 at Object.renderToString (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3988:27)130 at Object.renderPage (C:/Projects/OSS/emotion/node_modules/next/dist/server/render.js:621:45)131 at Object.defaultGetInitialProps (C:/Projects/OSS/emotion/node_modules/next/dist/server/render.js:301:51)`132 expect(getLabelFromStackTrace(stackTrace)).toBe(expectedLabel)133 })134})135/**136 * E.g.137 *138 * ```139 * function MyComponent$9() {140 * function renderSpan() {141 * return <span css={{ color: 'orchid' }}>Orchid</span>142 * }143 *144 * return <div>{renderSpan()}</div>145 * }146 * ```147 */148describe('render function within function component', () => {149 test('Chrome', () => {150 const stackTrace = `Error151 at createEmotionProps (emotion-element-895e3bbe.browser.esm.js:142)152 at jsxDEV (emotion-react-jsx-dev-runtime.browser.esm.js:18)153 at renderSpan (App.js:5)154 at MyComponent$9 (App.js:8)155 at renderWithHooks (react-dom.development.js:14803)156 at mountIndeterminateComponent (react-dom.development.js:17482)157 at beginWork (react-dom.development.js:18596)`158 expect(getLabelFromStackTrace(stackTrace)).toBe(expectedLabel)159 })160 test('Firefox', () => {161 const stackTrace = `createEmotionProps@http://localhost:3000/static/js/main.chunk.js:844:40162jsxDEV@http://localhost:3000/static/js/main.chunk.js:1126:247163renderSpan@http://localhost:3000/static/js/main.chunk.js:2273:89164MyComponent$9@http://localhost:3000/static/js/main.chunk.js:2287:15165renderWithHooks@http://localhost:3000/static/js/vendors~main.chunk.js:16616:31166mountIndeterminateComponent@http://localhost:3000/static/js/vendors~main.chunk.js:19228:17167beginWork@http://localhost:3000/static/js/vendors~main.chunk.js:20306:20168beginWork$1@http://localhost:3000/static/js/vendors~main.chunk.js:24848:18`169 expect(getLabelFromStackTrace(stackTrace)).toBe(expectedLabel)170 })171 test('Safari', () => {172 const stackTrace = `createEmotionProps@http://localhost:3000/static/js/main.chunk.js:844:49173jsxDEV@http://localhost:3000/static/js/main.chunk.js:1126:247174MyComponent$9@http://localhost:3000/main.4d087bc1a783e9f2b657.hot-update.js:36:25175renderWithHooks@http://localhost:3000/static/js/vendors~main.chunk.js:16616:31176updateFunctionComponent@http://localhost:3000/static/js/vendors~main.chunk.js:18795:39177beginWork$1@http://localhost:3000/static/js/vendors~main.chunk.js:24848:27`178 expect(getLabelFromStackTrace(stackTrace)).toBe(expectedLabel)179 })180 test('SSR', () => {181 const stackTrace = `Error182 at Object.createEmotionProps (webpack-internal:///../../packages/react/dist/emotion-element-7a9c77b4.cjs.dev.js:175:40)183 at jsxDEV (webpack-internal:///../../packages/react/jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.cjs.dev.js:22:75)184 at renderSpan (webpack-internal:///./pages/index.js:28:82)185 at MyComponent$9 (webpack-internal:///./pages/index.js:71:15)186 at processChild (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3043:14)187 at resolve (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:2960:5)188 at ReactDOMServerRenderer.render (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3435:22)189 at ReactDOMServerRenderer.read (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3373:29)190 at Object.renderToString (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3988:27)191 at Object.renderPage (C:/Projects/OSS/emotion/node_modules/next/dist/server/render.js:621:45)`192 expect(getLabelFromStackTrace(stackTrace)).toBe(expectedLabel)193 })194})195/**196 * E.g.197 *198 * ```199 * function MyComponent$9() {200 * return <div>201 * {[0].map(i => <div css={{ color: 'red' }} key={i} />)}202 * </div>203 * }204 * ```205 */206describe('element returned by Array.map', () => {207 test('Chrome', () => {208 const stackTrace = `Error209 at createEmotionProps (emotion-element-895e3bbe.browser.esm.js:142)210 at jsxDEV (emotion-react-jsx-dev-runtime.browser.esm.js:18)211 at App.js:5212 at Array.map (<anonymous>)213 at MyComponent$9 (App.js:5)214 at renderWithHooks (react-dom.development.js:14803)215 at mountIndeterminateComponent (react-dom.development.js:17482)216 at beginWork (react-dom.development.js:18596)217 at beginWork$1 (react-dom.development.js:23179)`218 expect(getLabelFromStackTrace(stackTrace)).toBe(expectedLabel)219 })220 test('Firefox', () => {221 const stackTrace = `createEmotionProps@http://localhost:3000/static/js/main.chunk.js:844:40222jsxDEV@http://localhost:3000/static/js/main.chunk.js:1126:247223MyComponent$9/<.children<@http://localhost:3000/static/js/main.chunk.js:2274:106224MyComponent$9@http://localhost:3000/static/js/main.chunk.js:2274:19225renderWithHooks@http://localhost:3000/static/js/vendors~main.chunk.js:16616:31226mountIndeterminateComponent@http://localhost:3000/static/js/vendors~main.chunk.js:19228:17227beginWork@http://localhost:3000/static/js/vendors~main.chunk.js:20306:20228beginWork$1@http://localhost:3000/static/js/vendors~main.chunk.js:24848:18`229 expect(getLabelFromStackTrace(stackTrace)).toBe(expectedLabel)230 })231 test('Safari', () => {232 const stackTrace = `createEmotionProps@http://localhost:3000/static/js/main.chunk.js:844:49233jsxDEV@http://localhost:3000/static/js/main.chunk.js:1126:247234map@[native code]235MyComponent$9@http://localhost:3000/static/js/main.chunk.js:2274:22236renderWithHooks@http://localhost:3000/static/js/vendors~main.chunk.js:16616:31237mountIndeterminateComponent@http://localhost:3000/static/js/vendors~main.chunk.js:19228:32238beginWork$1@http://localhost:3000/static/js/vendors~main.chunk.js:24848:27`239 expect(getLabelFromStackTrace(stackTrace)).toBe(expectedLabel)240 })241 test('SSR', () => {242 const stackTrace = `Error243 at Object.createEmotionProps (webpack-internal:///../../packages/react/dist/emotion-element-7a9c77b4.cjs.dev.js:175:40)244 at jsxDEV (webpack-internal:///../../packages/react/jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.cjs.dev.js:22:75)245 at eval (webpack-internal:///./pages/index.js:78:99)246 at Array.map (<anonymous>)247 at MyComponent$9 (webpack-internal:///./pages/index.js:78:19)248 at processChild (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3043:14)249 at resolve (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:2960:5)250 at ReactDOMServerRenderer.render (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3435:22)251 at ReactDOMServerRenderer.read (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3373:29)252 at Object.renderToString (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3988:27)`253 expect(getLabelFromStackTrace(stackTrace)).toBe(expectedLabel)254 })255})256/**257 * E.g.258 *259 * ```260 * const test = {261 * MyComponent$9() {262 * return <div css={{ color: 'red' }}>red</div>263 * }264 * }265 *266 * function App() {267 * const el = test.MyComponent$9()268 *269 * return ...270 * }271 * ```272 */273describe('function component within object', () => {274 test('Chrome', () => {275 const stackTrace = `Error276 at createEmotionProps (emotion-element-6352414e.browser.esm.js?fcc6:142)277 at jsxDEV (emotion-react-jsx-dev-runtime.browser.esm.js?cf67:18)278 at Object.MyComponent$9 (index.js?bee7:7)279 at App (index.js?bee7:14)280 at renderWithHooks (react-dom.development.js?3c4a:14803)281 at mountIndeterminateComponent (react-dom.development.js?3c4a:17482)282 at beginWork (react-dom.development.js?3c4a:18596)283 at beginWork$1 (react-dom.development.js?3c4a:23179)`284 expect(getLabelFromStackTrace(stackTrace)).toBe(expectedLabel)285 })286 test('Firefox', () => {287 const stackTrace = `createEmotionProps@webpack-internal:///../../packages/react/dist/emotion-element-6352414e.browser.esm.js:163:40288jsxDEV@webpack-internal:///../../packages/react/jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.browser.esm.js:35:230289MyComponent$9@webpack-internal:///./pages/index.js:32:82290App@webpack-internal:///./pages/index.js:49:17291renderWithHooks@webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:14803:27292mountIndeterminateComponent@webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:17482:13293beginWork@webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:18596:16294beginWork$1@webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:23179:14`295 expect(getLabelFromStackTrace(stackTrace)).toBe(expectedLabel)296 })297 test('Safari', () => {298 // MyComponent$9 does not appear in the stack trace299 const stackTrace = `createEmotionProps@http://localhost:3000/static/js/main.chunk.js:866:49300jsxDEV@http://localhost:3000/static/js/main.chunk.js:1147:247301App@http://localhost:3000/static/js/main.chunk.js:2290:32302renderWithHooks@http://localhost:3000/static/js/vendors~main.chunk.js:19152:31303mountIndeterminateComponent@http://localhost:3000/static/js/vendors~main.chunk.js:21764:32304beginWork$1@http://localhost:3000/static/js/vendors~main.chunk.js:27384:27`305 expect(getLabelFromStackTrace(stackTrace)).toBe('App')306 })307 test('SSR', () => {308 const stackTrace = `Error309 at Object.createEmotionProps (webpack-internal:///../../packages/react/dist/emotion-element-7a9c77b4.cjs.dev.js:175:40)310 at jsxDEV (webpack-internal:///../../packages/react/jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.cjs.dev.js:22:75)311 at Object.MyComponent$9 (webpack-internal:///./pages/index.js:31:82)312 at App (webpack-internal:///./pages/index.js:47:19)313 at processChild (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3043:14)314 at resolve (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:2960:5)315 at ReactDOMServerRenderer.render (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3435:22)316 at ReactDOMServerRenderer.read (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3373:29)317 at Object.renderToString (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3988:27)318 at Object.renderPage (C:/Projects/OSS/emotion/node_modules/next/dist/server/render.js:621:45)`319 expect(getLabelFromStackTrace(stackTrace)).toBe(expectedLabel)320 })321})322test('Chrome: Module.jsx', () => {323 // From https://github.com/emotion-js/emotion/issues/1947324 const stackTrace = `Error325 at Module.jsx (http://localhost:10400/foo/bar/Combo?WZC6ZC&1ECYELF&12FP1RC&17F9LE8&P29J1Z&19IF3L2&AS09Z5&DHIG3C&EZJOER&13HZV70&1Y0F1JC&7UNIX3&SXHPTZ&K2YF13&11KMHHF&ZT36EV&Z44N8N&1QZW1DM&O16D0M&CW2QNS&1FH6TF2&ZWDLTF&1X87ICA&6LRWIZ&ME66AT&1SR9GT&1YH9ZQP&HHC8F2&1DB0VYO&FKOBET&1MJ8I38&JLAULY&1CH0G0Z&1TVRXYJ&SPNXDO&1JYOJGK&1LO9VOK&11TND7U&1YWNKYV&1DXWRM&TK6KOI&154ANPU&RWT5PA&19HGOKC&1YUJVCR&VFG0H0&172UQH&WFFZOK&1G8KK9P&Z4U2ZW&9UOM25&CBEUA3&1BURRUK&34VP40&CT8SCX&C5EGO8&XBSA9O&LL4E3N&1G5530W&R7QR2I&11ZITTG&1OIUGH1&ZN50OK&19R3ZDC&68ZZJF&413IE5&P0AYR7&1SMIEQU&1I34GN7&1GCT1EE&165FEOI&1NN6TMC&1FGT66H&1CP9Y2C&1R3WFPP&16Z97O3&1HGGWC2&AL9WFH&JXOSA2&QUXERX&NU7E4G&3HPVD3&16NVKFB&1JO5LOD&PIJWGC&1HD0KL3&A5KQ0E&UVG8ZT&156786I&1EGYRX&931PJP&71A44J&K4T5RR&YJS0J6&6NKXDV&15LGDNT&DK4XFH:6963:17)326 at MyComponent$9 (http://localhost:10400/foo/bar/Combo?WZC6ZC&1ECYELF&12FP1RC&17F9LE8&P29J1Z&19IF3L2&AS09Z5&DHIG3C&EZJOER&13HZV70&1Y0F1JC&7UNIX3&SXHPTZ&K2YF13&11KMHHF&ZT36EV&Z44N8N&1QZW1DM&O16D0M&CW2QNS&1FH6TF2&ZWDLTF&1X87ICA&6LRWIZ&ME66AT&1SR9GT&1YH9ZQP&HHC8F2&1DB0VYO&FKOBET&1MJ8I38&JLAULY&1CH0G0Z&1TVRXYJ&SPNXDO&1JYOJGK&1LO9VOK&11TND7U&1YWNKYV&1DXWRM&TK6KOI&154ANPU&RWT5PA&19HGOKC&1YUJVCR&VFG0H0&172UQH&WFFZOK&1G8KK9P&Z4U2ZW&9UOM25&CBEUA3&1BURRUK&34VP40&CT8SCX&C5EGO8&XBSA9O&LL4E3N&1G5530W&R7QR2I&11ZITTG&1OIUGH1&ZN50OK&19R3ZDC&68ZZJF&413IE5&P0AYR7&1SMIEQU&1I34GN7&1GCT1EE&165FEOI&1NN6TMC&1FGT66H&1CP9Y2C&1R3WFPP&16Z97O3&1HGGWC2&AL9WFH&JXOSA2&QUXERX&NU7E4G&3HPVD3&16NVKFB&1JO5LOD&PIJWGC&1HD0KL3&A5KQ0E&UVG8ZT&156786I&1EGYRX&931PJP&71A44J&K4T5RR&YJS0J6&6NKXDV&15LGDNT&DK4XFH:13679:15)327 at renderWithHooks (http://localhost:10400/foo/bar/Combo?1J6XZOQ&CV1G7Q&178CDN5&8GO7HW&1NEWTVK&11D8SWR&EUW1RW&B0SNY0&UKYKU8&Z2LJ32&OMFXIN&1CKRK5M&1DCE7I2&BTKQMZ&BF6IS9&IGMBPD&17GLBW0&F1NR3R&1BYJ6GK&1QMDI0S&1YBURTD&N3FA6J&1OKN2Q4&1VX6R8D&1RN5YOY&1PGEWZS&186NYSC&6OOHB&DAQXGM&18F8OG0&IEBF22&16BSJS0&270VGN&220EF0&PP2DW2&EXOH0W&1UI8QOX&BESS5A&SYNC6D&3EWNSZ&TX0EOZ&YHES22&SS37DN&155I4KT&SBSDY7&G2CFJM&1L12OEG&189382Y&4IWM93&RVOAXW&NMAEHJ&A3HW6D&react_v16.8.4&react-dom_v16.8.4&1I1OITG&1ZY465&1R86UXI&WLU3QX&1OO689&1N913EH&RZP360&15WCYOM&17TCHPC&115R68D&1VRCLJ7&12F8G3T&QXNNQC&128FRJB&1OH35FB&CHPVZ7&15VJLWF&DXTQHG&TI7NW9&8F7DFB&3ER51Q&1DTSSTA&1PQZ3V&1CA54WE&1GEM33A&OC7AMR&3AYWID&1KYS5DS&O76Y7S&1CD2C6F&1SB1JQ0&1DMMKMS&OCFDX4&1MO3710&1GVEDEZ&1FT6HVF&4JF9F9&1F8VFMW&1GAQQYW&149YUOT&12GEY49&4MFMGQ&16N8W14&12SV68C&2F7EYB&23HVSL&4TAXU8&1YL1F3&14H19K&1WHTWL7&1PYNLWK&1RUO08N&1PLVRSS&126YWXW&1TAPDE6&18TCRAP:78801:18)328 at updateFunctionComponent (http://localhost:10400/foo/bar/Combo?1J6XZOQ&CV1G7Q&178CDN5&8GO7HW&1NEWTVK&11D8SWR&EUW1RW&B0SNY0&UKYKU8&Z2LJ32&OMFXIN&1CKRK5M&1DCE7I2&BTKQMZ&BF6IS9&IGMBPD&17GLBW0&F1NR3R&1BYJ6GK&1QMDI0S&1YBURTD&N3FA6J&1OKN2Q4&1VX6R8D&1RN5YOY&1PGEWZS&186NYSC&6OOHB&DAQXGM&18F8OG0&IEBF22&16BSJS0&270VGN&220EF0&PP2DW2&EXOH0W&1UI8QOX&BESS5A&SYNC6D&3EWNSZ&TX0EOZ&YHES22&SS37DN&155I4KT&SBSDY7&G2CFJM&1L12OEG&189382Y&4IWM93&RVOAXW&NMAEHJ&A3HW6D&react_v16.8.4&react-dom_v16.8.4&1I1OITG&1ZY465&1R86UXI&WLU3QX&1OO689&1N913EH&RZP360&15WCYOM&17TCHPC&115R68D&1VRCLJ7&12F8G3T&QXNNQC&128FRJB&1OH35FB&CHPVZ7&15VJLWF&DXTQHG&TI7NW9&8F7DFB&3ER51Q&1DTSSTA&1PQZ3V&1CA54WE&1GEM33A&OC7AMR&3AYWID&1KYS5DS&O76Y7S&1CD2C6F&1SB1JQ0&1DMMKMS&OCFDX4&1MO3710&1GVEDEZ&1FT6HVF&4JF9F9&1F8VFMW&1GAQQYW&149YUOT&12GEY49&4MFMGQ&16N8W14&12SV68C&2F7EYB&23HVSL&4TAXU8&1YL1F3&14H19K&1WHTWL7&1PYNLWK&1RUO08N&1PLVRSS&126YWXW&1TAPDE6&18TCRAP:80490:19)329 at beginWork (http://localhost:10400/foo/bar/Combo?1J6XZOQ&CV1G7Q&178CDN5&8GO7HW&1NEWTVK&11D8SWR&EUW1RW&B0SNY0&UKYKU8&Z2LJ32&OMFXIN&1CKRK5M&1DCE7I2&BTKQMZ&BF6IS9&IGMBPD&17GLBW0&F1NR3R&1BYJ6GK&1QMDI0S&1YBURTD&N3FA6J&1OKN2Q4&1VX6R8D&1RN5YOY&1PGEWZS&186NYSC&6OOHB&DAQXGM&18F8OG0&IEBF22&16BSJS0&270VGN&220EF0&PP2DW2&EXOH0W&1UI8QOX&BESS5A&SYNC6D&3EWNSZ&TX0EOZ&YHES22&SS37DN&155I4KT&SBSDY7&G2CFJM&1L12OEG&189382Y&4IWM93&RVOAXW&NMAEHJ&A3HW6D&react_v16.8.4&react-dom_v16.8.4&1I1OITG&1ZY465&1R86UXI&WLU3QX&1OO689&1N913EH&RZP360&15WCYOM&17TCHPC&115R68D&1VRCLJ7&12F8G3T&QXNNQC&128FRJB&1OH35FB&CHPVZ7&15VJLWF&DXTQHG&TI7NW9&8F7DFB&3ER51Q&1DTSSTA&1PQZ3V&1CA54WE&1GEM33A&OC7AMR&3AYWID&1KYS5DS&O76Y7S&1CD2C6F&1SB1JQ0&1DMMKMS&OCFDX4&1MO3710&1GVEDEZ&1FT6HVF&4JF9F9&1F8VFMW&1GAQQYW&149YUOT&12GEY49&4MFMGQ&16N8W14&12SV68C&2F7EYB&23HVSL&4TAXU8&1YL1F3&14H19K&1WHTWL7&1PYNLWK&1RUO08N&1PLVRSS&126YWXW&1TAPDE6&18TCRAP:81500:13)330 at performUnitOfWork (http://localhost:10400/foo/bar/Combo?1J6XZOQ&CV1G7Q&178CDN5&8GO7HW&1NEWTVK&11D8SWR&EUW1RW&B0SNY0&UKYKU8&Z2LJ32&OMFXIN&1CKRK5M&1DCE7I2&BTKQMZ&BF6IS9&IGMBPD&17GLBW0&F1NR3R&1BYJ6GK&1QMDI0S&1YBURTD&N3FA6J&1OKN2Q4&1VX6R8D&1RN5YOY&1PGEWZS&186NYSC&6OOHB&DAQXGM&18F8OG0&IEBF22&16BSJS0&270VGN&220EF0&PP2DW2&EXOH0W&1UI8QOX&BESS5A&SYNC6D&3EWNSZ&TX0EOZ&YHES22&SS37DN&155I4KT&SBSDY7&G2CFJM&1L12OEG&189382Y&4IWM93&RVOAXW&NMAEHJ&A3HW6D&react_v16.8.4&react-dom_v16.8.4&1I1OITG&1ZY465&1R86UXI&WLU3QX&1OO689&1N913EH&RZP360&15WCYOM&17TCHPC&115R68D&1VRCLJ7&12F8G3T&QXNNQC&128FRJB&1OH35FB&CHPVZ7&15VJLWF&DXTQHG&TI7NW9&8F7DFB&3ER51Q&1DTSSTA&1PQZ3V&1CA54WE&1GEM33A&OC7AMR&3AYWID&1KYS5DS&O76Y7S&1CD2C6F&1SB1JQ0&1DMMKMS&OCFDX4&1MO3710&1GVEDEZ&1FT6HVF&4JF9F9&1F8VFMW&1GAQQYW&149YUOT&12GEY49&4MFMGQ&16N8W14&12SV68C&2F7EYB&23HVSL&4TAXU8&1YL1F3&14H19K&1WHTWL7&1PYNLWK&1RUO08N&1PLVRSS&126YWXW&1TAPDE6&18TCRAP:85175:11)331 at workLoop (http://localhost:10400/foo/bar/Combo?1J6XZOQ&CV1G7Q&178CDN5&8GO7HW&1NEWTVK&11D8SWR&EUW1RW&B0SNY0&UKYKU8&Z2LJ32&OMFXIN&1CKRK5M&1DCE7I2&BTKQMZ&BF6IS9&IGMBPD&17GLBW0&F1NR3R&1BYJ6GK&1QMDI0S&1YBURTD&N3FA6J&1OKN2Q4&1VX6R8D&1RN5YOY&1PGEWZS&186NYSC&6OOHB&DAQXGM&18F8OG0&IEBF22&16BSJS0&270VGN&220EF0&PP2DW2&EXOH0W&1UI8QOX&BESS5A&SYNC6D&3EWNSZ&TX0EOZ&YHES22&SS37DN&155I4KT&SBSDY7&G2CFJM&1L12OEG&189382Y&4IWM93&RVOAXW&NMAEHJ&A3HW6D&react_v16.8.4&react-dom_v16.8.4&1I1OITG&1ZY465&1R86UXI&WLU3QX&1OO689&1N913EH&RZP360&15WCYOM&17TCHPC&115R68D&1VRCLJ7&12F8G3T&QXNNQC&128FRJB&1OH35FB&CHPVZ7&15VJLWF&DXTQHG&TI7NW9&8F7DFB&3ER51Q&1DTSSTA&1PQZ3V&1CA54WE&1GEM33A&OC7AMR&3AYWID&1KYS5DS&O76Y7S&1CD2C6F&1SB1JQ0&1DMMKMS&OCFDX4&1MO3710&1GVEDEZ&1FT6HVF&4JF9F9&1F8VFMW&1GAQQYW&149YUOT&12GEY49&4MFMGQ&16N8W14&12SV68C&2F7EYB&23HVSL&4TAXU8&1YL1F3&14H19K&1WHTWL7&1PYNLWK&1RUO08N&1PLVRSS&126YWXW&1TAPDE6&18TCRAP:85215:22)332 at renderRoot (http://localhost:10400/foo/bar/Combo?1J6XZOQ&CV1G7Q&178CDN5&8GO7HW&1NEWTVK&11D8SWR&EUW1RW&B0SNY0&UKYKU8&Z2LJ32&OMFXIN&1CKRK5M&1DCE7I2&BTKQMZ&BF6IS9&IGMBPD&17GLBW0&F1NR3R&1BYJ6GK&1QMDI0S&1YBURTD&N3FA6J&1OKN2Q4&1VX6R8D&1RN5YOY&1PGEWZS&186NYSC&6OOHB&DAQXGM&18F8OG0&IEBF22&16BSJS0&270VGN&220EF0&PP2DW2&EXOH0W&1UI8QOX&BESS5A&SYNC6D&3EWNSZ&TX0EOZ&YHES22&SS37DN&155I4KT&SBSDY7&G2CFJM&1L12OEG&189382Y&4IWM93&RVOAXW&NMAEHJ&A3HW6D&react_v16.8.4&react-dom_v16.8.4&1I1OITG&1ZY465&1R86UXI&WLU3QX&1OO689&1N913EH&RZP360&15WCYOM&17TCHPC&115R68D&1VRCLJ7&12F8G3T&QXNNQC&128FRJB&1OH35FB&CHPVZ7&15VJLWF&DXTQHG&TI7NW9&8F7DFB&3ER51Q&1DTSSTA&1PQZ3V&1CA54WE&1GEM33A&OC7AMR&3AYWID&1KYS5DS&O76Y7S&1CD2C6F&1SB1JQ0&1DMMKMS&OCFDX4&1MO3710&1GVEDEZ&1FT6HVF&4JF9F9&1F8VFMW&1GAQQYW&149YUOT&12GEY49&4MFMGQ&16N8W14&12SV68C&2F7EYB&23HVSL&4TAXU8&1YL1F3&14H19K&1WHTWL7&1PYNLWK&1RUO08N&1PLVRSS&126YWXW&1TAPDE6&18TCRAP:85298:5)333 at performWorkOnRoot (http://localhost:10400/foo/bar/Combo?1J6XZOQ&CV1G7Q&178CDN5&8GO7HW&1NEWTVK&11D8SWR&EUW1RW&B0SNY0&UKYKU8&Z2LJ32&OMFXIN&1CKRK5M&1DCE7I2&BTKQMZ&BF6IS9&IGMBPD&17GLBW0&F1NR3R&1BYJ6GK&1QMDI0S&1YBURTD&N3FA6J&1OKN2Q4&1VX6R8D&1RN5YOY&1PGEWZS&186NYSC&6OOHB&DAQXGM&18F8OG0&IEBF22&16BSJS0&270VGN&220EF0&PP2DW2&EXOH0W&1UI8QOX&BESS5A&SYNC6D&3EWNSZ&TX0EOZ&YHES22&SS37DN&155I4KT&SBSDY7&G2CFJM&1L12OEG&189382Y&4IWM93&RVOAXW&NMAEHJ&A3HW6D&react_v16.8.4&react-dom_v16.8.4&1I1OITG&1ZY465&1R86UXI&WLU3QX&1OO689&1N913EH&RZP360&15WCYOM&17TCHPC&115R68D&1VRCLJ7&12F8G3T&QXNNQC&128FRJB&1OH35FB&CHPVZ7&15VJLWF&DXTQHG&TI7NW9&8F7DFB&3ER51Q&1DTSSTA&1PQZ3V&1CA54WE&1GEM33A&OC7AMR&3AYWID&1KYS5DS&O76Y7S&1CD2C6F&1SB1JQ0&1DMMKMS&OCFDX4&1MO3710&1GVEDEZ&1FT6HVF&4JF9F9&1F8VFMW&1GAQQYW&149YUOT&12GEY49&4MFMGQ&16N8W14&12SV68C&2F7EYB&23HVSL&4TAXU8&1YL1F3&14H19K&1WHTWL7&1PYNLWK&1RUO08N&1PLVRSS&126YWXW&1TAPDE6&18TCRAP:86205:5)334 at performWork (http://localhost:10400/foo/bar/Combo?1J6XZOQ&CV1G7Q&178CDN5&8GO7HW&1NEWTVK&11D8SWR&EUW1RW&B0SNY0&UKYKU8&Z2LJ32&OMFXIN&1CKRK5M&1DCE7I2&BTKQMZ&BF6IS9&IGMBPD&17GLBW0&F1NR3R&1BYJ6GK&1QMDI0S&1YBURTD&N3FA6J&1OKN2Q4&1VX6R8D&1RN5YOY&1PGEWZS&186NYSC&6OOHB&DAQXGM&18F8OG0&IEBF22&16BSJS0&270VGN&220EF0&PP2DW2&EXOH0W&1UI8QOX&BESS5A&SYNC6D&3EWNSZ&TX0EOZ&YHES22&SS37DN&155I4KT&SBSDY7&G2CFJM&1L12OEG&189382Y&4IWM93&RVOAXW&NMAEHJ&A3HW6D&react_v16.8.4&react-dom_v16.8.4&1I1OITG&1ZY465&1R86UXI&WLU3QX&1OO689&1N913EH&RZP360&15WCYOM&17TCHPC&115R68D&1VRCLJ7&12F8G3T&QXNNQC&128FRJB&1OH35FB&CHPVZ7&15VJLWF&DXTQHG&TI7NW9&8F7DFB&3ER51Q&1DTSSTA&1PQZ3V&1CA54WE&1GEM33A&OC7AMR&3AYWID&1KYS5DS&O76Y7S&1CD2C6F&1SB1JQ0&1DMMKMS&OCFDX4&1MO3710&1GVEDEZ&1FT6HVF&4JF9F9&1F8VFMW&1GAQQYW&149YUOT&12GEY49&4MFMGQ&16N8W14&12SV68C&2F7EYB&23HVSL&4TAXU8&1YL1F3&14H19K&1WHTWL7&1PYNLWK&1RUO08N&1PLVRSS&126YWXW&1TAPDE6&18TCRAP:86117:5)`335 expect(getLabelFromStackTrace(stackTrace)).toBe(expectedLabel)336})337/**338 * E.g.339 *340 * ```341 * const MyComponent$9 = React.forwardRef(function MyComponent$9() {342 * return <div css={{ color: 'red' }} />343 * })344 * ```345 */346describe('React.forwardRef with named function', () => {347 // forwardRef only changes the stack trace for SSR348 test('SSR', () => {349 const stackTrace = `Error350 at Object.createEmotionProps (webpack-internal:///../../packages/react/dist/emotion-element-7a9c77b4.cjs.dev.js:175:40)351 at jsxDEV (webpack-internal:///../../packages/react/jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.cjs.dev.js:22:75)352 at Object.MyComponent$9 [as render] (webpack-internal:///./pages/index.js:31:80)353 at ReactDOMServerRenderer.render (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3535:44)354 at ReactDOMServerRenderer.read (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3373:29)355 at Object.renderToString (C:/Projects/OSS/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3988:27)356 at Object.renderPage (C:/Projects/OSS/emotion/node_modules/next/dist/server/render.js:621:45)357 at Object.defaultGetInitialProps (C:/Projects/OSS/emotion/node_modules/next/dist/server/render.js:301:51)358 at Function.getInitialProps (webpack-internal:///../../node_modules/next/dist/pages/_document.js:187:16)359 at Object.loadGetInitialProps (C:/Projects/OSS/emotion/node_modules/next/dist/shared/lib/utils.js:69:29)`360 expect(getLabelFromStackTrace(stackTrace)).toBe(expectedLabel)361 })362})363/**364 * E.g. (put an @ in front of jsxImportSource if doing this for real)365 *366 * ```367 * // jsxImportSource theme-ui368 *369 * function MyComponent$9() {370 * return <div sx={{ color: 'red' }} />371 * }372 * ```373 *374 * See https://theme-ui.com/sx-prop.375 */376describe('multiple jsx factories', () => {377 test('Chrome', () => {378 const stackTrace = `Error379 at createEmotionProps (emotion-element-db00a197.browser.esm.js:78)380 at jsxDEV (emotion-react-jsx-dev-runtime.browser.esm.js:14)381 at jsxDEV (theme-ui-core-jsx-dev-runtime.esm.js:7)382 at MyComponent$9 (App.js:6)383 at renderWithHooks (react-dom.development.js:14803)384 at mountIndeterminateComponent (react-dom.development.js:17482)385 at beginWork (react-dom.development.js:18596)386 at beginWork$1 (react-dom.development.js:23179)`387 expect(getLabelFromStackTrace(stackTrace)).toBe(expectedLabel)388 })389 test('Firefox', () => {390 const stackTrace = `createEmotionProps@http://localhost:3000/static/js/main.chunk.js:771:40391jsxDEV@http://localhost:3000/static/js/main.chunk.js:942:247392jsxDEV@http://localhost:3000/static/js/vendors~main.chunk.js:3998:87393MyComponent$9@http://localhost:3000/static/js/main.chunk.js:2094:86394renderWithHooks@http://localhost:3000/static/js/vendors~main.chunk.js:21501:31395mountIndeterminateComponent@http://localhost:3000/static/js/vendors~main.chunk.js:24113:17396beginWork@http://localhost:3000/static/js/vendors~main.chunk.js:25191:20397beginWork$1@http://localhost:3000/static/js/vendors~main.chunk.js:29733:18`398 expect(getLabelFromStackTrace(stackTrace)).toBe(expectedLabel)399 })400 test('Safari', () => {401 const stackTrace = `createEmotionProps@http://localhost:3000/static/js/main.chunk.js:866:49402jsxDEV@http://localhost:3000/static/js/main.chunk.js:1147:247403MyComponent$9@http://localhost:3000/static/js/main.chunk.js:2277:86404renderWithHooks@http://localhost:3000/static/js/vendors~main.chunk.js:19627:31405mountIndeterminateComponent@http://localhost:3000/static/js/vendors~main.chunk.js:22239:32406beginWork$1@http://localhost:3000/static/js/vendors~main.chunk.js:27859:27`407 expect(getLabelFromStackTrace(stackTrace)).toBe(expectedLabel)408 })409 test('SSR', () => {410 const stackTrace = `Error411 at Object.createEmotionProps (C:/Projects/OSS/emotion/packages/react/dist/emotion-element-7a9c77b4.cjs.dev.js:175:40)412 at Object.jsxDEV (C:/Projects/OSS/emotion/packages/react/jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.cjs.dev.js:22:75)413 at jsxDEV (C:/Projects/OSS/emotion/playgrounds/nextjs/node_modules/@theme-ui/core/jsx-dev-runtime/dist/theme-ui-core-jsx-dev-runtime.cjs.dev.js:15:24)414 at MyComponent$9 (webpack-internal:///./pages/index.js:64:79)415 at processChild (C:/Projects/OSS/emotion/playgrounds/nextjs/node_modules/react-dom/cjs/react-dom-server.node.development.js:3043:14)416 at resolve (C:/Projects/OSS/emotion/playgrounds/nextjs/node_modules/react-dom/cjs/react-dom-server.node.development.js:2960:5)417 at ReactDOMServerRenderer.render (C:/Projects/OSS/emotion/playgrounds/nextjs/node_modules/react-dom/cjs/react-dom-server.node.development.js:3435:22)418 at ReactDOMServerRenderer.read (C:/Projects/OSS/emotion/playgrounds/nextjs/node_modules/react-dom/cjs/react-dom-server.node.development.js:3373:29)419 at Object.renderToString (C:/Projects/OSS/emotion/playgrounds/nextjs/node_modules/react-dom/cjs/react-dom-server.node.development.js:3988:27)420 at Object.renderPage (C:/Projects/OSS/emotion/playgrounds/nextjs/node_modules/next/dist/server/render.js:621:45)`421 expect(getLabelFromStackTrace(stackTrace)).toBe(expectedLabel)422 })423 // From https://github.com/emotion-js/emotion/pull/1714#discussion_r365518850424 test('dollar signs in jsx', () => {425 const stackTrace = `jsx@http://localhost:3000/_next/static/development/pages/theme_ui.js?ts=1578745166666:440:17426jsx$$1@http://localhost:3000/_next/static/development/pages/theme_ui.js?ts=1578745166666:2777:60427MyComponent$9@http://localhost:3000/_next/static/development/pages/theme_ui.js?ts=1578745166666:23:62428renderWithHooks@http://localhost:3000/_next/static/development/dll/dll_d6a88dbe3071bd165157.js?ts=1578745166666:16511:27429mountIndeterminateComponent@http://localhost:3000/_next/static/development/dll/dll_d6a88dbe3071bd165157.js?ts=1578745166666:19045:13`430 expect(getLabelFromStackTrace(stackTrace)).toBe(expectedLabel)431 })432})433/**434 * E.g.435 *436 * ```437 * class MyComponent$9 extends React.Component {438 * render() {439 * return <div css={{ color: 'red' }} />440 * }441 * }442 * ```443 */444describe('class component', () => {445 test('Chrome', () => {446 const stackTrace = `Error447 at createEmotionProps (emotion-element-6352414e.browser.esm.js:142)448 at jsxDEV (emotion-react-jsx-dev-runtime.browser.esm.js:18)449 at MyComponent$9.render (App.js:6)450 at finishClassComponent (react-dom.development.js:17163)451 at updateClassComponent (react-dom.development.js:17110)452 at beginWork (react-dom.development.js:18620)453 at beginWork$1 (react-dom.development.js:23179)`454 expect(getLabelFromStackTrace(stackTrace)).toBeUndefined()455 })456 test('Firefox', () => {457 const stackTrace = `createEmotionProps@http://localhost:3000/static/js/main.chunk.js:844:40458jsxDEV@http://localhost:3000/static/js/main.chunk.js:1125:247459render@http://localhost:3000/static/js/main.chunk.js:2276:89460finishClassComponent@http://localhost:3000/static/js/vendors~main.chunk.js:23777:22461updateClassComponent@http://localhost:3000/static/js/vendors~main.chunk.js:23727:48462beginWork@http://localhost:3000/static/js/vendors~main.chunk.js:25187:20463beginWork$1@http://localhost:3000/static/js/vendors~main.chunk.js:29705:18`464 expect(getLabelFromStackTrace(stackTrace)).toBeUndefined()465 })466 test('Safari', () => {467 // render does not appear in the stack trace468 const stackTrace = `createEmotionProps@http://localhost:3000/static/js/main.chunk.js:866:49469jsxDEV@http://localhost:3000/static/js/main.chunk.js:1147:247470finishClassComponent@http://localhost:3000/static/js/vendors~main.chunk.js:21453:41471updateClassComponent@http://localhost:3000/static/js/vendors~main.chunk.js:21406:48472beginWork$1@http://localhost:3000/static/js/vendors~main.chunk.js:27384:27`473 expect(getLabelFromStackTrace(stackTrace)).toBeUndefined()474 })475 test('SSR', () => {476 const stackTrace = `Error477 at Object.createEmotionProps (C:/Projects/OSS/emotion/packages/react/dist/emotion-element-7a9c77b4.cjs.dev.js:175:40)478 at Object.jsxDEV (C:/Projects/OSS/emotion/packages/react/jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.cjs.dev.js:22:75)479 at jsxDEV (C:/Projects/OSS/emotion/playgrounds/nextjs/node_modules/@theme-ui/core/jsx-dev-runtime/dist/theme-ui-core-jsx-dev-runtime.cjs.dev.js:15:24)480 at MyComponent$9.render (webpack-internal:///./pages/index.js:40:76)481 at processChild (C:/Projects/OSS/emotion/playgrounds/nextjs/node_modules/react-dom/cjs/react-dom-server.node.development.js:3134:18)482 at resolve (C:/Projects/OSS/emotion/playgrounds/nextjs/node_modules/react-dom/cjs/react-dom-server.node.development.js:2960:5)483 at ReactDOMServerRenderer.render (C:/Projects/OSS/emotion/playgrounds/nextjs/node_modules/react-dom/cjs/react-dom-server.node.development.js:3435:22)484 at ReactDOMServerRenderer.read (C:/Projects/OSS/emotion/playgrounds/nextjs/node_modules/react-dom/cjs/react-dom-server.node.development.js:3373:29)485 at Object.renderToString (C:/Projects/OSS/emotion/playgrounds/nextjs/node_modules/react-dom/cjs/react-dom-server.node.development.js:3988:27)486 at Object.renderPage (C:/Projects/OSS/emotion/playgrounds/nextjs/node_modules/next/dist/server/render.js:621:45)`487 expect(getLabelFromStackTrace(stackTrace)).toBeUndefined()488 })489})490/**491 * E.g.492 *493 * ```494 * import React from 'react'495 *496 * var __extends =497 * (this && this.__extends) ||498 * (function () {499 * var extendStatics = function (d, b) {500 * extendStatics =501 * Object.setPrototypeOf ||502 * ({ __proto__: [] } instanceof Array &&503 * function (d, b) {504 * d.__proto__ = b505 * }) ||506 * function (d, b) {507 * for (var p in b)508 * if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]509 * }510 * return extendStatics(d, b)511 * }512 * return function (d, b) {513 * extendStatics(d, b)514 * function __() {515 * this.constructor = d516 * }517 * d.prototype =518 * b === null ? Object.create(b) : ((__.prototype = b.prototype), new __())519 * }520 * })()521 *522 * export const MyComponent$9 = (function (_super) {523 * __extends(MyComponent$9, _super)524 * function MyComponent$9() {525 * var _this = (_super !== null && _super.apply(this, arguments)) || this526 * return _this527 * }528 * MyComponent$9.prototype.render = function () {529 * // Defining a variable to prevent Proper Tail Call530 * const el = <div css={{ color: 'red' }} />531 * return el532 * }533 * return MyComponent$9534 * })(React.PureComponent)535 * ```536 */537describe('class component transpiled to ES 5', () => {538 test('Chrome', () => {539 const stackTrace = `Error540 at createEmotionProps (emotion-element-10a9af6f.browser.esm.js?d0a2:168)541 at jsxDEV (emotion-react-jsx-dev-runtime.browser.esm.js?cf67:18)542 at MyComponent$9.render (MyComponent9.js?2fbf:37)543 at finishClassComponent (react-dom.development.js?3c4a:17160)544 at updateClassComponent (react-dom.development.js?3c4a:17110)545 at beginWork (react-dom.development.js?3c4a:18620)546 at beginWork$1 (react-dom.development.js?3c4a:23179)547 at performUnitOfWork (react-dom.development.js?3c4a:22154)548 at workLoopSync (react-dom.development.js?3c4a:22130)549 at performSyncWorkOnRoot (react-dom.development.js?3c4a:21756)`550 expect(getLabelFromStackTrace(stackTrace)).toBeUndefined()551 })552 test('Firefox', () => {553 const stackTrace = `createEmotionProps@webpack-internal:///../../packages/react/dist/emotion-element-10a9af6f.browser.esm.js:189:42554jsxDEV@webpack-internal:///../../packages/react/jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.browser.esm.js:35:230555MyComponent$9</MyComponent$9.prototype.render@webpack-internal:///./pages/MyComponent9.js:62:82556finishClassComponent@webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:17163:18557updateClassComponent@webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:17110:44558beginWork@webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:18620:16559beginWork$1@webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:23179:14560performUnitOfWork@webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:22154:12561workLoopSync@webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:22130:22`562 expect(getLabelFromStackTrace(stackTrace)).toBeUndefined()563 })564 test('Safari', () => {565 // No idea why the function name is just blank in this stack trace566 const stackTrace = `createEmotionProps@http://localhost:3000/static/js/main.chunk.js:973:49567jsxDEV@http://localhost:3000/static/js/main.chunk.js:1609:247568@http://localhost:3000/static/js/main.chunk.js:2926:93569finishClassComponent@http://localhost:3000/static/js/vendors~main.chunk.js:21433:41570updateClassComponent@http://localhost:3000/static/js/vendors~main.chunk.js:21386:48571beginWork$1@http://localhost:3000/static/js/vendors~main.chunk.js:27364:27572performUnitOfWork@http://localhost:3000/static/js/vendors~main.chunk.js:26352:27573workLoopSync@http://localhost:3000/static/js/vendors~main.chunk.js:26328:43574performSyncWorkOnRoot@http://localhost:3000/static/js/vendors~main.chunk.js:25946:25`575 expect(getLabelFromStackTrace(stackTrace)).toBeUndefined()576 })577 test('SSR', () => {578 const stackTrace = `Error579 at Object.createEmotionProps (webpack-internal:///../../packages/react/dist/emotion-element-491a37fd.cjs.dev.js:201:42)580 at jsxDEV (webpack-internal:///../../packages/react/jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.cjs.dev.js:22:75)581 at MyComponent$9.render (webpack-internal:///./pages/MyComponent9.js:60:82)582 at processChild (/Users/sammagura/Documents/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3134:18)583 at resolve (/Users/sammagura/Documents/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:2960:5)584 at ReactDOMServerRenderer.render (/Users/sammagura/Documents/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3435:22)585 at ReactDOMServerRenderer.read (/Users/sammagura/Documents/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3373:29)586 at Object.renderToString (/Users/sammagura/Documents/emotion/node_modules/react-dom/cjs/react-dom-server.node.development.js:3988:27)587 at Object.renderPage (/Users/sammagura/Documents/emotion/node_modules/next/dist/server/render.js:621:45)588 at Object.defaultGetInitialProps (/Users/sammagura/Documents/emotion/node_modules/next/dist/server/render.js:301:51)`589 expect(getLabelFromStackTrace(stackTrace)).toBeUndefined()590 })591})592/**593 * https://github.com/emotion-js/emotion/issues/2614594 *595 * Not sure how to reproduce this other than this repro project:596 * https://github.com/srmagura/emotion-issue-2614597 */598describe('issue #2614 - class component transpiled to ES 5', () => {599 test('Chrome', () => {600 const stackTrace = `Error601 at createEmotionProps (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-699e6908.browser.esm.js:183)602 at Module.jsx (webpack-internal:///./node_modules/@emotion/react/dist/emotion-react.browser.esm.js:127)603 at Loader.render (webpack-internal:///./node_modules/react-spinners/ScaleLoader.js:56)604 at finishClassComponent (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:17485)605 at updateClassComponent (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:17435)606 at beginWork (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:19073)607 at beginWork$1 (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:23935)608 at performUnitOfWork (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:22771)609 at workLoopSync (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:22702)610 at renderRootSync (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:22665)`611 expect(getLabelFromStackTrace(stackTrace)).toBeUndefined()612 })613 test('Firefox', () => {614 const stackTrace = `createEmotionProps@webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-699e6908.browser.esm.js:183:40615jsx@webpack-internal:///./node_modules/@emotion/react/dist/emotion-react.browser.esm.js:127:105616Loader.prototype.render@webpack-internal:///./node_modules/react-spinners/ScaleLoader.js:56:35617finishClassComponent@webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:17485:31618updateClassComponent@webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:17435:44619beginWork@webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:19073:16620beginWork$1@webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:23935:14621performUnitOfWork@webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:22771:12622workLoopSync@webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:22702:22`623 expect(getLabelFromStackTrace(stackTrace)).toBeUndefined()624 })625 test('Safari', () => {626 // No idea why the function name is blank and there are no file locations627 const stackTrace = `createEmotionProps@628jsx@629@630finishClassComponent@631updateClassComponent@632beginWork$1@633performUnitOfWork@634workLoopSync@635renderRootSync@636performSyncWorkOnRoot@637scheduleUpdateOnFiber@638updateContainer@`639 expect(getLabelFromStackTrace(stackTrace)).toBeUndefined()640 })641 // No SSR stack trace since this comes from a Gatsby project...
fiber.js
Source:fiber.js
...121 * 122 * æ ¹æ® current === null ? å¤ææ¯ mount è¿æ¯ update123 * 124 * // react-dom125 * beginWork(current, workInProgress)126 * HostRoot (æ host å°±æ¯åç dom) #root127 * App128 * 深度ä¼å
éåè¿ç¨ï¼å½ workInProgress èç¹æ²¡æåèç¹ æéåå®ææåèç¹åä¼è¿å
¥ completeWork129 * 没æåèç¹ï¼å»ç¸é»å
å¼èç¹ beginWork-completeWork130 * å
å¼èç¹é½ç»æåï¼å»ç¶èç¹ completeWork131 * *注æï¼å½èç¹åªæä¸ä¸ªææ¬åèç¹æ¶ä¸ä¼çæèªå·±ç fiber èç¹132 * 133 * 134 * beginWork å
é¨æ§è¡æ¹æ³ï¼135 * updateHostComponent136 * reconcileChildren æ è®° effectTag137 * mountChildFibers = ChildReconciler(false) // ä¸å effectTag æ è®°138 * reconcileChildFibers = ChildReconciler(true) // å»å effectTag æ è®°139 * * diff ç®æ³æ¯å¨è¿ä½ç¨çï¼ç¨äºçæ effectTag [update]ï¼[mount]é¶æ®µæ¯æ diff && effectTag ç...
informQC.js
Source:informQC.js
...57 p.find("#memo_color").html(n.memo_color);58 p.find("#memo_other").html(n.memo_other);59 p.find("#sendInformQC").attr("onclick","sendInformQC(this)");60 if(n.status == "0"){61 p.find("#beginWork").attr("onclick","beginWork(this)");62 }else{63 p.find("#beginWork").html(n.status_trans+"...");64 p.find("#beginWork").attr("disabled",true);65 }66 props.append(p);67 });68 }69};7071//éç¥è´¨æ£72var sendInformQC = function(data){73 var dom = $(data).parent();74 var seeds_id = dom.find("#seeds_id").html();75 var PH = dom.find("#PH").html();
...
App.js
Source:App.js
1import React from 'react';2import './App.css';3import 'bootstrap/dist/css/bootstrap.min.css';4import Maincontent from './components/Maincontent/Maincontent';5import Outgoing from './components/Outgoing/Outgoing';6import AddnewDocContainer from './components/AddNewDocument/AddNewDocumentContainer';7import InfoAboutDocumentContainer from './components/Maincontent/InfoAboutDocument/InfoAboutDocumentContainer'8import BeginWork from './components/BeginWork/BeginWork'9import CreateTask from './components/CreateTask/CreateTaskContainer'10import LoginPageContainer from './components/LoginPage/LoginPageContainer'11import InfoAboutDocumentOutgoingContainer from './components/Outgoing/InfoAboutDocumentOutgoing/InfoAboutDocumentOutgoingContainer'12import InfoUser from './components/InfoUser/InfoUser'13import Help from './components/Help/Help';14import MyTasks from './components/MyTasks/MyTasks'15import {Route,BrowserRouter} from 'react-router-dom'16function App(props){17 const additionalInfIncoming = new RegExp('incoming/\\w+');18 const additionalInfOutgoing = new RegExp('outgoing/\\w+');19 return (20 <BrowserRouter>21 <div className="App">22 <Route path = {additionalInfOutgoing} render = {() => <InfoAboutDocumentOutgoingContainer dispatch = {props.dispatch} documents = {props.state.newDocsReducer.table} statusAction={props.state.newDocsReducer.statusAction} userInSystem={props.state.userReducer.userInSystem}/>}/>23 <Route path = {additionalInfIncoming} render = {() => <InfoAboutDocumentContainer documents = {props.state.newDocsReducer.table} dispatch = {props.dispatch} statusAction={props.state.newDocsReducer.statusAction} userInSystem={props.state.userReducer.userInSystem}/>}/>24 <Route exact path ="/" render = {()=> <BeginWork userInSystem = {props.state.userReducer.userInSystem}/>}/>25 <Route exact path ="/info" render = {()=> <InfoUser dispatch = {props.dispatch} userInSystem = {props.state.userReducer.userInSystem} />}/>26 <Route exact path ="/login" render = {()=> <LoginPageContainer dispatch = {props.dispatch} usersData = {props.state.userReducer} />}/>27 <Route exact path ="/help" render = {() => <Help userInSystem = {props.state.userReducer.userInSystem} dispatch = {props.dispatch}/>}/>28 <Route exact path ='/incoming' render = { () => <Maincontent dispatch = {props.dispatch} table = {props.state.newDocsReducer.table} userInSystem = {props.state.userReducer.userInSystem} inputValue= {props.state.newDocsReducer.inputToFind} sorted = {props.state.newDocsReducer.sorted} themeToFind = {props.state.newDocsReducer.themeToFind}/>}/>29 <Route exact path ='/outgoing' render = {() => <Outgoing dispatch = {props.dispatch} table = {props.state.newDocsReducer.table} userInSystem = {props.state.userReducer.userInSystem} inputValue= {props.state.newDocsReducer.inputToFind} sorted = {props.state.newDocsReducer.sorted} themeToFind = {props.state.newDocsReducer.themeToFind}/>} />30 <Route exact path ='/create' render = { () => <AddnewDocContainer dispatch = {props.dispatch} userInSystem = {props.state.userReducer.userInSystem} newDocument ={props.state.newDocsReducer.newDocument} statusAction={props.state.newDocsReducer.statusAction} tasks={props.state.tasksReducer.tasks} names = {props.state.userReducer.names}/>}/>31 <Route exact path ='/tasks' render = {() => <MyTasks myTasks = {props.state.tasksReducer} dispatch ={props.dispatch} userInSystem ={props.state.userReducer.userInSystem}/>}/>32 <Route exact path ="/createTask" render = {()=> <CreateTask newTask = {props.state.tasksReducer.newTask} dispatch = {props.dispatch} userInSystem = {props.state.userReducer.userInSystem} names = {props.state.userReducer.names} status ={props.state.tasksReducer.status}/>}/>33 </div>34 </BrowserRouter>35 )36}...
scheduleCtrl.js
Source:scheduleCtrl.js
1const Schedule = require('../models/scheduleModel');2const User = require('../models/userModel');3const scheduleCtrl = {4/////////////////////////////////////////// INSERT SCHEDULE ////////////////////////////////////////////5 addSchedule: async (req, res) => {6 try {7 const { day, beginWork, endWork,restFrom, restTo} = req.body;8 const user = req.user.id9 let schedule = await Schedule.create({ // creating schedule10 day, beginWork, endWork,restFrom,restTo, user11 });12 await User.findOneAndUpdate(req.user.id, { // adding schedule id to User collection13 $push: { schedule: schedule._id }14 });15 res.status(200).json({ success: true, msg:"Schedule added Successfully" });16 17 } catch (err) {18 return res.status(500).json({ msg: err.message })19 }20 },21/////////////////////////////////////////// UPDATE SCHEDULE ////////////////////////////////////////////22 editSchedule: async (req, res) => {23 try {24 const { day, beginWork, endWork,restFrom,restTo } = req.body;25 const updateFields = [];26 if (day) updateFields.day = day;27 if (beginWork) updateFields.beginWork = beginWork;28 if (endWork) updateFields.endWork = endWork;29 if (restFrom) updateFields.restFrom = restFrom;30 if (restTo) updateFields.restTo = restTo;31 const schedule = await Schedule.findByIdAndUpdate(req.params.id, { // pushing updates32 $set: { ...updateFields } 33 },34 {35 new: true, runValidators: true36 })37 res.status(200).json({success:true,msg:" Schedule Updated Successfully"})38 39 } catch (err) {40 return res.statue(500).json({ msg: err.message });41 }42 },43/////////////////////////////////////////// DELETING SCHEDULE ////////////////////////////////////////////44 deleteSchedule : async (req,res) =>{45 try {46 const schedule = await Schedule.findById(req.params.id);47 if(!schedule) return res.status(404).json({msg:"Schedule Not Found"});48 await User.findByIdAndDelete(req.user.id,{49 $pull :{schedule : req.params.id}50 })51 await schedule.remove(); // removing schedule from database52 res.status(200).json({msg:"Schedule successfully deleted"})53 54 } catch (err) {55 return res.status(500).json({msg:err.message});56 }57 },58/////////////////////////////////////////// SCHEDULE INFORMATION ////////////////////////////////////////////59 getSchedule : async (req,res) =>{60 try {61 const schedule = await Schedule.find({user:req.user.id}); // find all schedules with user id62 res.status(200).json({schedule});63 } catch (err) {64 return res.status(500).json({msg:err.message});65 }66 }67}...
3.fiber.js
Source:3.fiber.js
...49 requestIdleCallback(workLoop, { timeout: 1000 })50 }51}52function performUnitOfWork(fiber) {53 beginWork(fiber);//å¤ç54 if (fiber.child) {55 return fiber.child;56 }57 while (fiber) {58 completeUnitOfWork(fiber);59 if (fiber.sibling) {60 return fiber.siblingW61 }62 fiber = fiber.return;63 }64 // while(fiber){65 // if(fiber.sibling){66 // return fiber.sibling;67 // }68 // completeUnitOfWork(fiber);69 // fiber = fiber.return70 // }71 // completeUnitOfWork(fiber);72 // if (fiber.sibling) {73 // return fiber.sibling;74 // }75 // fiber = fiber.return;76 // completeUnitOfWork(fiber);77 // if (fiber.sibling) {78 // return fiber.sibling;79 // }80}81function completeUnitOfWork(fiber) {82 console.log('ç»æ', fiber.key)83}84function beginWork(fiber) {85 console.log('å¼å§', fiber.key);86 // sleep(20);87}88nextUnitOfWork = rootFiber;89// requestIdleCallback(workLoop,{timeout:1000})90workLoop();91function sleep(d) {92 let start = Date.now();93 while (Date.now() - start <= d) {94 }95}96// function performUnitOfWork(fiber) {97// beginWork(fiber);//å¤ç98// if (fiber.child) {99// return fiber.child;100// }101// completeUnitOfWork(fiber);102// while(fiber){103// if(fiber.sibling){104// return fiber.sibling;105// }106// fiber = fiber.return;107// completeUnitOfWork(fiber);108// if(fiber.sibling){109// return fiber.sibling;110// }111// return;...
ReactFiberWorkLoop.js
Source:ReactFiberWorkLoop.js
...26}27function performUnitOfWork(unitOfWork) {28 debugger29 var current = unitOfWork.alternate;30 return beginWork(current, unitOfWork)31}32function workLoop() {33 while (workInProgress !== null) {34 workInProgress = performUnitOfWork(workInProgress)35 }36}37export function render(fiber) {38 workInProgress = fiber39 workLoop()40}41function reconcileChildren(current, workInProgress, children) {42 let childFiber = {43 tag: HostComponent,44 type: children.type,...
worker.js
Source:worker.js
...13 });14 let instance = app(config);15 instance.on('ready', beginWork);16 process.on('SIGTERM', shutdown);17 function beginWork() {18 instance.on('lost', shutdown);19 instance.startScraping();20 }21 function shutdown() {22 logger.log({type: 'info', msg: 'shutting down'});23 process.exit();24 }...
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.click('text=Get Started');7 await page.click('text=Docs');8 await page.click('text=API');
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 const internal = page._delegate;7 const frame = internal._mainFrame;8 const work = internal._beginWork(frame);9 console.log(work);10 await internal._runAbortableTask(async () => {11 await work;12 });13})();14Promise { <pending> }
Using AI Code Generation
1const { chromium } = require('playwright');2const { beginWork } = require('playwright/lib/server/browserType');3(async () => {4 const browser = await chromium.launch();5 const context = await browser.newContext();6 const page = await context.newPage();7 await beginWork(page, {8 });9 await page.screenshot({ path: 'google.png' });10 await browser.close();11})();12### `beginWork(page: Page, options: BeginWorkOptions): Promise<void>`
Using AI Code Generation
1const { beginWork } = require('playwright/lib/server/browserType');2const { chromium } = require('playwright');3(async () => {4 const browser = await chromium.launch();5 const context = await browser.newContext();6 const page = await context.newPage();7 const [worker] = await Promise.all([8 page.waitForEvent('worker'),9 page.evaluate(() => new Worker(URL.createObjectURL(new Blob([`10 self.addEventListener('message', event => {11 self.postMessage(event.data);12 });13 ]);14 const result = await beginWork({15 });16 await browser.close();17})();18const { beginWork } = require('playwright/lib/server/browserType');19const { chromium } = require('playwright');20(async () => {21 const browser = await chromium.launch();22 const context = await browser.newContext();23 const page = await context.newPage();24 const [worker] = await Promise.all([25 page.waitForEvent('worker'),26 page.evaluate(() => new Worker(URL.createObjectURL(new Blob([`27 self.addEventListener('message', event => {28 self.postMessage(event.data);29 });30 ]);31 const result = await beginWork({32 });33 await browser.close();34})();
Using AI Code Generation
1const { beginWork } = require('playwright/lib/server/supplements/recorder/recorderSupplement');2const { beginWork } = require('playwright/lib/server/supplements/recorder/recorderSupplement');3const { beginWork } = require('playwright/lib/server/supplements/recorder/recorderSupplement');4const { beginWork } = require('playwright/lib/server/supplements/recorder/recorderSupplement');5const { beginWork } = require('playwright/lib/server/supplements/recorder/recorderSupplement');6const { beginWork } = require('playwright/lib/server/supplements/recorder/recorderSupplement');7const { beginWork } = require('playwright/lib/server/supplements/recorder/recorderSupplement');
Using AI Code Generation
1const { beginWork } = require('playwright/lib/server/supplements/recorder/recorderSupplement');2const { Page } = require('playwright/lib/server/page');3const { ElementHandle } = require('playwright/lib/server/frames');4const page = await context.newPage();5const { recorder } = await beginWork(context, page);6const selector = 'text="Click me"';7const handle = await page.$(selector);8await recorder.recordAction('click', handle, {});9const page = await context.newPage();10const { recorder } = await beginWork(context, page);11const page = await context.newPage();12const { recorder } = await beginWork(context, page);13await recorder.recordAction('press', page, { key: 'ArrowRight' });14const page = await context.newPage();15const { recorder } = await beginWork(context, page);16await recorder.recordAction('select', page, { value: 'blue' });17const page = await context.newPage();18const { recorder } = await beginWork(context, page);19await recorder.recordAction('check', page, { checked: true });20const page = await context.newPage();21const { recorder } = await beginWork(context, page);22await recorder.recordAction('uncheck', page, { checked: false });23const page = await context.newPage();24const { recorder } = await beginWork(context, page);25await recorder.recordAction('fill', page, { value: 'John Doe' });26const page = await context.newPage();27const { recorder } = await beginWork(context, page);28await recorder.recordAction('setInputFiles', page, { files: ['file1.txt', 'file2.txt'] });29const page = await context.newPage();30const { recorder } = await beginWork(context, page
Using AI Code Generation
1const { beginWork } = require('playwright/lib/server/trace/recorder');2const { chromium } = require('playwright');3(async () => {4 const browser = await chromium.launch();5 const page = await browser.newPage();6 await beginWork(page, 'trace.zip');7 await page.close();8 await browser.close();9})();
Using AI Code Generation
1const { beginWork } = require('playwright/lib/server/supplements/recorder/recorderSupplement');2const { context } = require('playwright/lib/server/chromium/crBrowser');3const { chromium } = require('playwright');4const fs = require('fs');5(async () => {6 const browser = await chromium.launch();7 const page = await browser.newPage();8 const context = page.context();9 const recorder = beginWork(context, {10 });11 await page.click('text=Get started');12 await page.click('text=Docs');13 await page.click('text=API');14 await page.click('text=Browser');15 await page.click('text=BrowserContext');16 await page.click('text=BrowserType');17 await page.click('text=Page');18 await page.click('text=Frame');19 await page.click('text=ElementHandle');20 await page.click('text=JSHandle');21 await page.click('text=Request');22 await page.click('text=Response');23 await page.click('text=Route');24 await page.click('text=Worker');25 await page.click('text=ConsoleMessage');26 await page.click('text=Dialog');27 await page.click('text=Download');28 await page.click('text=WebSocket');29 await page.click('text=TimeoutError');30 await page.click('text=Selectors');31 await page.click('text=Accessibility');
Using AI Code Generation
1const { beginWork } = require('playwright/lib/utils/worker');2const { BrowserContext } = require('playwright/lib/server/chromium/crBrowser');3const { launch } = require('playwright');4const browser = await launch();5const context = await browser.newContext();6const page = await context.newPage();7const worker = await beginWork(context);8const { pageProxy } = await worker.createPageInContext();9console.log(pageProxy);
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?
