0

I'm on a website (you don't have access) which requires you to choose a car with select tags.

Everything works fine if i work manually. However updating things in an automated way does not update anything else. Here is a series of select tag, updating 1 manually, automatically populates the next tag.

example of tags

attempt 1 (update value of select tag)

Instead of clicking and choosing one of the tags manually , if i do this in the developer tools

var elem = document.evaluate("/html/body/div[2]/div[2]/div/mat-dialog-container/mq-add-vehicle-dialog/div[2]/select", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;

elem.value = "07"; // (because 07 = value of model group 595)

Then the model group does update, but the model does not get populated with options and so i can not proceed. I'm left with what you see below.

html

So this method does work on the current select tags, but for some reason does not update the next tag with options

attempt 2 (clicking)

I figured, if updating the value with .value doesn't work i might be able to click on the select tag to bring the options up, and then clicking on the 595 option manually, i might populate the model. So i attempted that...

var elem = document.evaluate("/html/body/div[2]/div[2]/div/mat-dialog-container/mq-add-vehicle-dialog/div[2]/select", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;

elem.click();

This does nothing at all. I hoped it would bring the drop down list of options like in the image below, so i could then click on one of the options.

options after select click

I have also tried just directly clicking on the options tag without bringing up the select list. this also does nothing (probably because the select tag is closed).

I'm wondering where they hid the function that updates the next tag. does anyone have any ideas where i'm going wrong? or what i should try next? ive literally tried iterating through every element on the page, clicking on every single element looking for which thing when clicked opens the select tag. nothing seems to interact with it programatically. it only responds to real users.

How can i programatically manipulate these tags?

update

Following on from a previous answer, suggesting the problem is angularjs i have downloaded batarang and attempted to check the scope of my elements. however this fails. is this website angularjs? what would be the give away? something in the head?

below is a picture showing me checking the scope of a test sample website (to show batarang was working) and the website im working on.

angular js pic

tgm_jack_uk
  • 21
  • 6

1 Answers1

0

As I can see from the html source, the website uses angular. I am guessing the website updates itself according to the values of its angular scope variable. Depending if this is angularjs or angular(later version) the way to access the scope would change but for angularjs's case you should be to acces the scope programatically. And my bet is this page is angularjs (not angular). When the angularjs scope changes it should update its inner state accordingly.

Turker Teke
  • 38
  • 4
  • hi, i had a go at what you said (had to learn a few things first). im not sure if this website is angular. because $scope doesnt do anything when i select an element. – tgm_jack_uk Nov 16 '21 at 10:36
  • I've looked at the html and search for the classes(ng-star-inserted especially) and found out that the website is actually angular 5 because those classes are inserted by a module of angular as per the answer (https://stackoverflow.com/a/47796687/9485858). After I did some searching to realize that angular5 does not expose the inner state of the application by default. There is a ng.probe function, but for it to work, website should be build with debug mode enabled. – Turker Teke Nov 17 '21 at 06:49