← Back to Discord Forum

Recording after overwriting the window object

I want to use the recorder from the official app in visual studio code, but to run our application we need to manipulate the window.FB object (to mock logging in with Facebook).

Is there a way to open a chrome tab with the window already mocked? Otherwise I guess I have to edit the window object in the console?

This thread is trying to answer question "How can I inject a script into a Chrome window before it launches with the recording extension in Visual Studio Code?"

4 replies

Here is the code I use to do it in tests:

const callbackLoginFunction: (
      callback: (response: FacebookLoginResponseType) => void,
      scopes: {
        scope: string;
        auth_type?: "rerequest" | "reauthorize" | "reauthenticate";
        enable_profile_selector?: boolean;
    ) => void = (callback) => {
        authResponse: { userID: id, accessToken: "12345" },
        status: "connected",

    window.FB = {
      login: callbackLoginFunction,
  }, userID);```

But I want to make this happen and then use the recorder so that I don't have to manually write my tests.

How can I inject this into a chrome window before it launches with the recording extension.

I managed to do it for one instance by using the console, but I fear that if I close this browser window I'll have to set it all up again

My solution is to use UI mode and then I can use the picker mid test, although I can't record the full thing...


Mocking window.fb with Playwright

Yes, you can mock window.fb when opening a Chrome tab with Playwright. You can use the page.addInitScript() method to set up mocks before the page starts loading. This lets you modify browser APIs and test your application's response.

Here's how you can do it:

await page.addInitScript(() => {
  const mockFb = {
    property1: 'mocked value',
    method1: () => { /* mocked implementation */ },

  Object.defineProperty(window, 'fb', { value: mockFb });

In this code, mockFb is an object with mocked properties and methods for window.fb. You can customize these according to your testing needs. Object.defineProperty() is used to override the existing window.fb with our mock object. This ensures that any references to window.fb in your application will now point to our mocked version.

Remember, this approach only works within Playwright's context during automated tests. If you want to modify the actual behavior of browser APIs in a live Chrome tab or console session outside of Playwright, you would need to edit the window object directly in those environments.

In short, Playwright's page.addInitScript() method lets you easily mock browser APIs like window.fb. This allows you to test your application's behavior with customized API responses without the need to edit the window object manually.

Related Discord Threads

AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.