Selectors playground

[rszatkowski]

Trying to set up a selector playground in my project:
https://docs.cypress.io/api/cypress-api/selector-playground-api

I added the code to the index.js file in the support folder:

support/index.js

Cypress.SelectorPlayground.defaults({
    selectorPriority: ['id', 'class', 'attributes'],
  })

  Cypress.SelectorPlayground.defaults({
    onElement: ($el) => {
      const customId = $el.attr('my-custom-attr')
  
      if (customId) {
        return `[my-custom-attr=${customId}]`
      }
    },
  })

Then i am trying to use the selector in my code:

 const $el = Cypress.$('input')
        const selector = Cypress.SelectorPlayground.getSelector($el)

        cy.get(selector).click()

But the selector element is empty

This is the selector:
<input id="username" class="form-control" placeholder="Enter your username" type="text">

Can somebody explain to me step by step what I am doing wrong? The tutorial from cypress seemed to be clear but it doesn't work for me.