Basically I want to set bootstrap version as env variable so, I could dynamically assign selectors. For that below code should be execute before all the test. It will okay if it executes only once but it should before all the test.

js
cy.window()
  .its('bootstrap.Button.VERSION')
  .invoke('startsWith', '4')
  .then((bootstrap4) => {
    if (bootstrap4) {
      cy.log('**Bootstrap 4**')
      cy.contains('button.btn-block', 'Save')
    } else {
      cy.log('**Bootstrap 5**')
      cy.contains('button', 'Save')
    }
  })

CREDIT for above code: @gray-kilobyte-89541

Sure. Execute it in the

before

hook and then pick the selectors to use in the tests

Sir, Thanks for the quick help. I've added this method inside index before hook so it will run before all the tests, also I have set different config variable for bootstrap changed class name such as following:

js
before(() => {
    // Code to be executed before all tests
    cy.visit('/') // Visit your application's homepage or any relevant page
    .then(() => {
        cy.log('stating detecting bootstrap version...');
        cy.window()
            .its('bootstrap.Button.VERSION')
            .invoke('startsWith', '4')
            .then((bootstrap4) => {
                if (bootstrap4) {
                    cy.log('**Bootstrap 4**');
                    Cypress.env('bootstrapVersion', 'v4');
                    Cypress.config('data-title-selector', 'data-original-title');
                    Cypress.config('data-target-selector', 'data-target');
                } else {
                    cy.log('**Bootstrap 5**');
                    Cypress.env('bootstrapVersion', 'v5');
                    Cypress.config('data-title-selector', 'data-bs-original-title');
                    Cypress.config('data-target-selector', 'data-bs-target');
                }
            });
    });
  });

However, this dynamic boostrap properties used many times in page object so, I would like to create veraiable and assign the value using Cypress.config('key'). But I could not find any way to declare before hook in page object.js files so I could able to initialize with the value of the variable. Is there any other way to initialize variable globally in the class?

js
let title_selector = '';
export class DashboardPage {
  // below before block is giving syntax error:Unexpected keyword or identifier.
  before{
    title_selector = Cypress.config('data-title-selector');
  }

  navigate(itemName) {
        cy.log(this.title_selector)
        cy.get(`.nav ul li a[${Cypress.config(**${title_selector}**)}="${itemName}"]`)
            .click({ force: true });
    }
}

You are overcomplicated things. Plus do not store your values in Cypress.config object, use Cypress.env. There are no

before

hooks in the page objects, that is correct. Instead do the following:

js
export const DashboardPageV4 {
  navigate(itemName) {
    // use bootstrap v4 selectors
  }
}
export const DashboardPageV5 {
  navigate(itemName) {
    // use bootstrap v5 selectors
  }
}
// in your e2e.js or spec file
import {DashboardPageV4, DashboardPageV5} from '...'

let pageObject
before(() => {
  cy.window()
            .its('bootstrap.Button.VERSION')
            .invoke('startsWith', '4')
            .then((bootstrap4) => {
                if (bootstrap4) {
                 pageObject = DashboardPageV4
                } else {
      pageObject = DashboardPageV5
}
})
it('works', () => {
  pageObject.navigate(...)
})