Can't add more than one step on the same element

Hi there!

I have a use case that involves running two different steps on the same element. (Specifically, I’m trying to update the contents of this div with Angular between steps.)

Example:

driver.defineSteps([
	{
		element: '#thing1',
		popover: {
			title: 'Thing 1',
			position: 'top'
		}
	},
	{
		element: '#thing2',
		popover: {
			title: 'Thing 2, Part 1',
			position: 'top'
		}
	},
	{
		element: '#thing2',
		popover: {
			title: 'Thing 2, Part 2',
			position: 'top'
		}
	},
]);

When I do that, I see “Thing 1” and “Thing 2, Part 1”. When I click Next, nothing seems to happen – i.e. the popover doesn’t update, so the title doesn’t change to “Thing2, Part 2” and the Close button isn’t added. When I click Next again, the driver ends altogether as if I were looking at the last step.

I’ve also tried using a different element selector, like div#thing2 or .class#thing2, but it behaves the same way as if I reference them identically (like in my example).

Any light you can shed on this would be wonderful! 😄

[Attrash-Islam]

You can put two classes on the same element and put every class in a step 😆 Didn’t try it but seems cleaner and it should work!

driver.defineSteps([
	{
		element: '.element1',
		popover: {
			title: 'Thing 1',
			position: 'top'
		}
	},
	{
		element: '.element2-step1',
		popover: {
			title: 'Thing 2, Part 1',
			position: 'top'
		}
	},
	{
		element: '.element2-step2',
		popover: {
			title: 'Thing 2, Part 2',
			position: 'top'
		}
	},
]);

Thing1 <div id="thing1" class="element1"></div>
Thing2 <div id="thing2" class="element2-step1 element2-step2"></div>

[dohliam]

I ran into this same issue trying to add multiple steps on a single element – basically a complicated explanation broken up into several smaller parts, but all about the same element.

I managed to find a workaround by surrounding the element in question (e.g. #thing2) with a superfluous div element (say #thing3), and then alternating back and forth between the two until all steps for the element are completed.

This is an example of what the page structure might look like before the change:

<div id="thing2">
	<p>Some stuff that will be highlighted</p>
</div>

And this is what it would look like after applying the workaround:

<div id="thing3">
	<div id="thing2">
		<p>Some stuff that will be highlighted</p>
	</div>
</div>

This might not work for your case if the div itself is changing, but I found it worked out perfectly despite being a bit of a kludge, in the sense that the switching between divs is completely transparent when the driver is running (since they are the same size and one is on top of the other).

In any case, as far as I can tell, this is the only relatively simple way to work around this bug for the moment.