Using phantomjs to interact and automate actions on a phoenix based web App

Hi everyone. I’ve come across html code containing “phx-click” and a google search has lead me to phoenix and this forum. I hope I’m at the right place and that someone here can help me.

First off, I don’t really know Javascript, so phoenix and elixir is completely foreign to me, I don’t even know how the two relate to each other.

I’m trying to automate changing a setting on a Web app for a device in my home using phantomjs. Note I can access the http webpage of the device, but do not have any control over the html or javascript code itself. Right now the obstacle I’m trying to pass is clicking on the following link:

<a href="#" phx-click="edit_settings" phx-target="1">edit</a>

Code in my phantomjs script is:

SetTimeout(function() {
    console.log("");
    console.log("### STEP 3: Click on edit link");
    page.evaluate(function() {
        var ev = document.createEvent("MouseEvents");
        ev.initEvent("click", true, true);
        document.querySelector("#settings > div > form > div > div.full > h3 > span > a").dispatchEvent(ev);
    });
}, 6000);

I’ve also tried replacing dispatchEvent(ev) with click().

As far as I can see the correct element is selected, but the page doesn’t switch to edit mode, i.e. doesn’t respond to the click. I’ve tried tracing what happens when the link is clicked in chrome Web tools, but then too the page doesn’t respond to the click. Any suggestions on how I can get the page to switch to edit mode.

From my searches online I’ve gathered that if a link is coded with the normal on-click attribute then the phoenix stuff don’t respond or work with that code and the opposite seem to be true as well. With the link having the phx-click attribute the normal click methods and events doesn’t seem to effect the link.

Ultimately I would like phantomjs to click above mentioned edit link, change a value in a drop down box and click the save button. I believe if I can get past the first edit link obstacle I should be able to manage the rest. I’m hoping that there is perhaps something like “element.phxclick(‘edit-settings’)” that can be used to trigger the click on that edit link. Any help or suggestions would be much appreciated. Even if the solution doesn’t involve using phantomjs. As long as it is a command line command I can enter to change the setting so that I can use that in another script again. Maybe one don’t even have to simulate the click and one can somehow just send the necessary data directly to the device using a http post, but I can’t figure out how the data is sent to the device either.