We’re looking to set-up some functional tests using Selenium and it’d be helpful if we could reference elements on the page with a unique ID so that our tests aren’t so fragile.
Any way to do this?
Hey @sridharan.s,
We’ve seen some projects where the owners contained certain elements in a group and then added an HTML block containing <div id=""></div> code to make use of some jQuery functions. Give it a go. 
2 Likes
Thanks for the idea @iamsalar.
@emmanuel, do you have any plans to expose unique id’s for each element? We’d like to set-up some regression testing on our app and the current workarounds would make all of the tests prohibitively brittle.
@josh, do you have any plans to expose unique id’s for elements within Bubble? If so, any ballpark sense for timing?
…would be really handy now that we can build our own plugins, easily run Javascript, etc.
Thanks,
Scott
1 Like
We’ll try to do this this week.
5 Likes
Awesome! Thanks!
I think there are going to be a lot of people in the community who are really happy about this – it’ll open up a lot of new possibilities.
For us, specifically, it’ll enable us to set-up automated regression testing with selenium and more effectively utilize JS in other areas of our app. #BigWin
yaaaay thanks @emmanuel. have been waiting for this.
We just added this
Please read the warning in the reference: we do not guarantee the HTML structure inside the element will always be the same for Bubble Elements.
But that should help with a few things.
8 Likes
Is there a way to have the app automatically create default values for these IDs so that we don’t have to go through and name each of the elements?
One specific implementation would be to use the default name of the element (e.g., “Text A”) so the IDs are both unique and also tied to a mental model with which we’re already familiar.
@emmanuel, is there an easy way for you guys to automatically create default values for these IDs?
Would save us half a day of coordinating our functional test creator / adding IDs to the specific elements they need throughout our app. Plus, seems like it’d make it easier for anyone to get outside help with JS, etc. without having to give the outside help to their Bubble app (and risking them moving elements that break responsive, etc.).
Thanks again.
Nevermind. We’re more than half-way through doing it manually. Would be nice if this was automated for everyone else though.
Are you limited to Selenium only? In case there is an option for you to try something else for this task, you could do that with a visual regression testing tool. Such as <a href+“http://screenster.io/?utm_source=external-blogs&utm_medium=bubble.is&utm_campaign=Screenster”>Screenster which is actually an alternative to Selenium for visual/CSS testing tasks.
Screenster is a test automation tool which performs screenshot-based comparison of different versions of your web pages. First it creates a visual baseline for a page, taking a screenshot for each user action. During the next run it takes a new screenshot at each step, compares it with the one from baseline and highlights differences. It also has a number of features for easy maintenance of tests: here is how it handles regression testing of Gmail UI.
Do you work for them?
Sometime within the last few months, this seemed to stop working where it did previously - elements where I’ve defined an ID attribute no longer have that attribute in the actual markup. Any idea what might be causing this?
I’ve already tried reverting Bubble to an older version, disabling and re-enabling the setting, and a few other things.
Would greatly appreciate help here.
Found the problem - looks like you need to check “This element is visible at page load” for the HTML element to be present on the page.
just hide it with js…still loads but not visible $("#rg1").css(“elementid”, “hidden”);