Is there a way for Playwright to utilize Apple Silicon instead of Intel Chrome on an M1 Mac device?

Recently, I made the switch from an older, less powerful Mac Mini to the high-performing Mac Studio with an M1 Max chip.

Unexpectedly, my Playwright end-to-end tests have started running at a sluggish pace.

Upon further investigation in debug mode, I noticed that the page I am testing is taking approximately 15 seconds to appear in the browser. Previously, on my Intel-based Mac Mini, the page would load in just 1-2 seconds.

While running the tests in debug mode, I verified the version of Chrome being used and found that it was optimized for the translated Intel version, rather than the arm64 (Apple Silicon) version. Interestingly, launching Chrome from the Apps list utilizes the arm64 version as intended.

Upon installation of Chrome, I opted for the universal version.

Is there a way to compel Playwright to utilize the arm64 version of Chrome? I am speculating that this discrepancy may be attributing to the sluggish loading of the tests.

typescriptgoogle-chromee2e-testingplaywright

Answer №1

Setting up a new M1 Mac allows you to easily transfer your apps and data from your previous device.

To optimize performance, it is recommended to reinstall the arm64 versions of your apps after the transfer.

In a personal experience, using the Intel version of nvm/NodeJS/npm led to launching the Intel version of Playwright in universal Chrome.

Switching to arm64 NVM/NodeJS/NPM and reinstalling Playwright resulted in improved performance with the arm64 version of Chrome, reducing loading times for tests.

Furthermore, Jest unit tests now execute at a faster pace after the transition.

To identify the version of an app installed, refer to the instructions provided in this informative article:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Replace a portion of text with a RxJS countdown timer

I am currently working on integrating a countdown timer using rxjs in my angular 12 project. Here is what I have in my typescript file: let timeLeft$ = interval(1000).pipe( map(x => this.calcTimeDiff(orderCutOffTime)), shareReplay(1) ); The calcTim ...

javascriptangulartypescriptrxjs

In order to effectively manage the output of these loaders, it may be necessary to incorporate an extra loader. This can be achieved by using the

I'm currently working with react typescript and trying to implement a time zone picker using a select component. I attempted to utilize the npm package react-timezone-select, but encountered some console errors: index.js:1 ./node_modules/react-timezo ...

javascriptreactjstypescriptnpm

TSX is throwing an error: "No matching overload found for this call."

Just starting out with React and TypeScript here! I tried passing the propTypes into a styled-component and ran into this error message: Oh no, there's an issue with the overloads. Overload 1 of 2 seems to be missing some properties. Overload 2 of ...

reactjstypescriptstyled-componentsreact-proptypes

TypeScript and Node.js: The type of 'this' is implicitly set to 'any'

Help Needed with TypeScript issue: An issue is arising in my TypeScript code related to a mongoose schema's post function. It is used to generate a profile for a user upon signing up, using the User model. Even though the code functions properly, th ...

node.jstypescriptexpressmongoosetypescript-typings

Strategies for redirecting search queries when adding a new path

Issue I am facing a challenge with pushing a new path to the URI while maintaining existing search queries. For example: Current URL: https://example.com/foo?bar=123&foobar=123 When I use history.push('newPath'), I end up with https://exa ...

javascriptreactjstypescriptreact-router-dom

Struggling with integrating Handlebars partials in a NestJS and Fastify environment

I am in the process of enhancing my project by replacing static content with templates using Handlebars. The project is named ready-to-read, and the file structure looks like the following: ready-to-read -public -src -views --(some .hbs files) --partials - ...

typescriptnestjshandlebars.jsfastify

Struggling to successfully deploy an Angular application on Azure

I'm currently in the process of deploying my Angular app to Azure. Utilizing VS Code and the "Azure App Service" extension. I have diligently followed this guide step by step: Upon completing the guide, I was successful in deploying the Angular app ...

javascriptangulartypescriptazuredeployment

"Troubleshooting issues with data loading using React's useEffect function

While working on my project, I encountered a strange issue where the isLoading state is being set to false before the data fetching process is completed. I am using the useEffect hook to show a loading spinner while fetching data from an API, and then disp ...

javascriptreactjstypescriptreact-hooks

Guide on transferring data from one table to another by choosing one or multiple rows with the help of Angular 2

https://i.sstatic.net/CF1Xo.pngHello, I'm currently facing an issue with my requirements. I'm attempting to display two tables. Data for Table One: TableOne =[ { "Id": 1, "Name": "ONLINE", "Status": false, "Track": false, }, ...

angulartypescriptionic2

It is not possible to utilize a JavaScript function once the script has been loaded through

I am attempting to programmatically load a local JavaScript file - PapaParse library, and then utilize one of its functions: $.getScript("./Content/Scripts/papaparse.js", function () { console.log("Papaparse loaded successfully"); Papa.parse(file, ...

javascriptjquerytypescriptpapaparse

Is it possible that an error is triggered when utilizing canActivate or canChildActivate?

A problem has arisen while using canActivateChild or canActivate in the child route. Despite working fine previously, an error is now being thrown: ERROR in src/app/app-routing.module.ts(8,7): error TS2322: Type '({ path: string; redirectTo: string; ...

angulartypescript

"Implementing a unique constraint in Drizzle-orm PostgreSQL with the additional condition of deleted_at being

Is there a way to construct a table using a WHEN SQL tag? I am interested in setting up a table similar to this: "members_table", { id: serial("id").primaryKey(), email: text("email").notNull(), team_id: text(&q ...

typescriptpostgresqlnext.jsdrizzledrizzle-orm

Assigning function types to functions that accept generics: A guide

type FormValidationHandler<FormValues> = (params: { formValues: FormValues, debugName?: string, }) => { isValid: boolean, fieldErrors: Record<string, unknown>, formError: string, } const validateForm: FormValidationHandler = param ...

typescript

Utilize localStorage.getItem() in conjunction with TypeScript to retrieve stored data

Within my codebase, I have the following line: const allGarments = teeMeasuresAverages || JSON.parse(localStorage.getItem("teeMeasuresAverages")) || teeMeasuresAveragesLocal; Unexpectedly, Typescript triggers an alert with this message: Argument ...

reactjstypescriptlocal-storage

What is the reason behind the varying dimensions of images on Chrome compared to Firefox?

I've been working on enhancing my web development skills and decided to create a personal portfolio. During the development process, I focused mainly on Firefox as my browser of choice. One section of the portfolio includes showcasing my skills using ...

cssgoogle-chromefirefoxflexbox

Error encountered while attempting to utilize 'load' in the fetch function of a layer

I've been exploring ways to implement some pre-update logic for a layer, and I believe the fetch method within the layer's props could be the key. Initially, my aim is to understand the default behavior before incorporating custom logic, but I&ap ...

angulartypescriptdeck.gl

Avoid using `object` as a data type, as it can be challenging to work with

const useSetState = <T extends dataStructure>( initialState: T = {} as T ): [T, (patch: Partial<T> | ((prevState: T) => Partial<T>)) => void] => { const [state, setState] = useState<T>(initialState); const setMergeSta ...

typescript

Discovering the process of reaching service members through an HTML View

Currently, I am in the process of learning Angular 2 and find myself unsure about the most efficient way to update the view. For instance, let's say I have two components: User and Main. The User component retrieves a list of users from the UserServ ...

angulartypescript

What does the reportProgress function do in HTTP services with JavaScript?

Can someone explain the functionality of reportProgress in JavaScript, specifically when used with Angular Typescript? I am having trouble finding documentation on this. return this.httpClient.request<ProductResponse>('get',`${this.basePath ...

javascriptangulartypescriptapiswagger-codegen

Using a border-radius of 50% is causing imperfect circles to appear in the Chrome browser

Typically, using border-radius: 50% is effective for many situations, and in Chrome it creates a circle appearance. However, when attempting to rapidly rotate a circle in this specific case, an issue arises. Is this a glitch with Chrome's border-radi ...

cssgoogle-chrome