I have a question regarding the test CDN that we use to run tests on the projects. Has anyone been successful in changing the appearance or move the hamburger icon somewhere else on the page? I tried several things, but couldn’t get it to work such as adding a class name to the element that had custom CSS I wrote for that class. Just wondering, because the current project I’m designing and working on would look much better if the test icon was not at the top left of the page. Thanks for any help.
You can get to the elements inside the shadow DOM using shadowRoot. Not sure messing with it is such a good idea as it might break something.
window.addEventListener('load', () => {
const wrapper = document.getElementById('fcc_test_suite_wrapper');
const shadowRoot = wrapper.shadowRoot;
const shadowElements = shadowRoot.childNodes;
const shadowStyles = shadowRoot.childNodes[0];
console.log(shadowRoot);
console.log(shadowElements);
console.log(shadowStyles);
});
It might be safer to just add a nice button somewhere on the page that will toggle adding and removing the test script.
@lasjorg Yeah, I tried digging around the elements like you mentioned, but I didn’t wanna alter it and possibly break it. Your idea of a button to add the test script is brilliant, thank you!