mardi 20 septembre 2022

Modifying Ember.js Components from Console

My company does A/B testing for clients who have sites built with various CRM/Middleware providers. One them uses a product built on the Ember.js framework. I do not have access to the source code for the site itself. I need to change the value of a selector component upon page load which I am planning on doing with a Javascript one-liner.

Unfortunately, I can't just change the value of the DOM element directly using document.getElementByID('selectorElement) as this won't trigger other events on the page. I tried using document.getElementByID('selectorElement).click() which had no effect on the page at all. I think it has to be done by interfacing with Ember directly, but I'm not very familiar with the framework.

As an example, imagine you were to navigate to https://guides.emberjs.com/release/. An answer to this question would be a script that can be run in the console that would change the version selector from the default to one of the other options.

The HTML for the component in question is below.

<select name="_name_" data-test-selector="_name_" data-test-form-field-input="_name_" aria-invalid="false" id="ember53-input" class="_inlineSelectInput_tuesss _selectInputBase_tuesss _inputBase_tuesss _inlineInputBase_tuesss _inlineSelectInput_tuesss _selectInputBase_tuesss _inputBase_tuesss _inlineInputBase_tuesss ember-view">
          <option disabled="" hidden="" value="">
              Select a type
          </option>
          <option value="Option1">
            Option1
          </option>
          <option value="Option2">
            Option2
          </option>
          <option value="Option3">
            Option3
          </option>
      
</select>



Aucun commentaire:

Enregistrer un commentaire