In Tritium, how do I switch the position of two elements?

Question

I have two elements next to each other like this:

<div id="parent">
    <div id="child1"></div>
    <div id="child2"></div>
</div>

What's the fastest way to switch the order of the two child elements?

Answer 1

You can use the move_to function with the position specifier after like so:

html() {
  $("/html/body") {
    $("./div[@id='parent']/div[@id='child1']") {
        move_to("../div[@id='child2']", "after") 
    }
  }
}

Here's a link to tritium playground: http://play.tritium.io/4078eded016a450e165d9f358cd547d3e47602d6

Answer 2

I like to use move_to with bottom. This is good also if there is no id on the elements, so you can just select the first, for instance and then move it to the bottom. It's another variation from @noj response:

$("//div[@id='parentDiv')]/div[@id='anyChildGoingToBottom'") {
  move_to("..", "bottom")
}

http://tester.tritium.io/923b23858ddb8fd7d9ccf348b2e7dc67fddb8cde