Stopped working - booking page has changed again

[Lyannel12]

Hi All

have you experience issue with the app.. now it all shows all the months calendar which is good but it is not refreshing automatically.. i check on the MIQ website and it is the same

[mark-bloom]

The program line await page.waitForSelector('#accommodation-calendar', {visible: true}); doesn't ever complete, causing an error in the prepareAndCheckPage function

[alexDrinkwater]

Will take a look tonight

[alexDrinkwater]

Looks like they are no longer using flatpickr as the calendar. If someone could send me the page source when they see an available date that would be really helpful. Not sure what it looks like when a data is available.

[alexDrinkwater]

Looks like all the dates have a .no class and there is a .yes class which makes a date look like this:

[stilljake]

I've only seen it from the https://allocation.miq.govt.nz/portal/ page (not logged in) but it seems to be the same calendar now.

An available date is missing the class="no" attribute.

        <div class="vud__d__item">
            <div 7="" aria-label="August 31" tabindex="-1">31</div>
        </div>

[mark-bloom]

Oddly enough though, just making a date 'able to be selected' seems to be more than just removing the .no class

You can select a 'date' that isn't in the month, but if you change an actual date by removing the .no class, it can't be clicked on (however the display when adding .yes does match when clicking an empty space)

[alexDrinkwater]

I think we should be able to find the "yes" dates under the the #accomodation id. document.querySelector('#accommodation .yes')

[alexDrinkwater]

@mark-bloom How did you make the date to be able to be selected?

[alexDrinkwater]

@angusmcdonald There are some more tweaks needed to then convert that element into the YYYY-MM-DD format

[mark-bloom]

@alexDrinkwater I haven't been able to work out how to make a date able to be selected. If I change the class to .yes then it higlights black, but removing all classes doesn't make it 'clickable' and in below example cannot change selection from 1st to 2nd, so I'm unsure what I'm missing.

Perhaps it has to do with 'on page load identify class to give properties'

In below: 1st Oct manually changed class to .yes and 2nd Oct removed .no class.

[alexDrinkwater]

I found this:

[alexDrinkwater]

I'm busy for the next few hours. If you guys can figure out how to enable clicking on a date let me know and I can make an update tonight.

[mark-bloom]

Not particularly a developer, but to pseudo-code:

• Loop through all vud__d__item divs
• Go to child div
• If not empty (non-calendar dates just have  ) and not class="no" then add class="yes" [ERROR: THIS DOES NOT ENABLE THE SUBMIT BUTTON]
• [If anything changed to "yes"] Beep away

[shrey91]

I got this far to fetch all dates but having some trouble with fetching the aria-label to convert the date into something i can compare.

[shrey91]

@mark-bloom I'm getting all the elements via a simple document.getElementsByClassName('vud__d__item');
Since these are the elements that contain the child class with the dates.

Here's the full method that I've been working with. It's a little hacky since i didnt have much time.

` async function findAvailability(page) {

await page.evaluate((myDates, testDates, findAnyDate, checkedCount) => {
    let elements = document.getElementsByClassName('vud__d__item');
    // if (testDates && testDates.length > 0 && checkedCount > 2) {
    //     const arr = [];
    //     for(const val of testDates){
    //         console.log("Test Date is " +val);
    //         let ariaWord = changeDateToWord(val);
    //         Array.from(elements).forEach(v => v.getAttribute('aria-label').includes(ariaWord) ? arr.push(v) : v);
    //         if(arr.length === 1){
    //             arr[0].classList.remove("no")
    //         }
    //     }
    // }
    const dataArrivalDates = [];
    console.log("Elements are : " + elements);
    for (let element of elements){
        const nodes=[], values=[];
        for (let att, i = 0, atts = element.attributes, n = atts.length; i < n; i++){
            att = atts[i];
            nodes.push(att.nodeName);
            values.push(att.nodeValue);
            console.log("Child element attribute name: " + att.nodeName + " value: "+atts.nodeValue);
        }

        if(!element.getElementsByTagName('div')[0].classList.contains("no") && !element.getElementsByTagName('div')[0].textContent.includes("nbsp") &&
            !element.getElementsByTagName('div')[0].textContent.includes(" ")) {
            console.log("Found Empty Date " + element.getElementsByTagName('div')[0].getAttribute("aria-label"));
            if(element){
                let wordToDate = changeWordToDate(element.getElementsByTagName('div')[0].getAttribute("aria-label"));
                dataArrivalDates.push(wordToDate);
            }
        }
    }
    console.log("Dates are: "+ dataArrivalDates);
    const matchingDates = dataArrivalDates.filter(d => myDates.indexOf(d) !== -1);
    const myMonths = [...new Set(myDates.filter(d => d.split('-').length === 2).map(d => d.split('-')[1]))].sort();
    const matchingMonths = dataArrivalDates.filter(d => myMonths.indexOf(d.split('-')[1]) > -1);

    if (matchingDates.length > 0 || matchingMonths.length > 0 || (findAnyDate && dataArrivalDates[0])) {
        beep()
        return true;
    }

    return false;

    function beep() {
        var snd = new Audio("data:audio/wav;base64,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qJrx4KOQjahZxWbcZgztj2c49nKmkId44S71j0c8eV9yDK6uPRzx5X18eDvjvQ6yKo9ZSS6l//8elePK/Lf//IInrOF/FvDoADYAGBMGb7FtErm5MXMlmPAJQVgWta7Zx2go+8xJ0UiCb8LHHdftWyLJE0QIAIsI+UbXu67dZMjmgDGCGl1H+vpF4NSDckSIkk7Vd+sxEhBQMRU8j/12UIRhzSaUdQ+rQU5kGeFxm+hb1oh6pWWmv3uvmReDl0UnvtapVaIzo1jZbf/pD6ElLqSX+rUmOQNpJFa/r+sa4e/pBlAABoAAAAA3CUgShLdGIxsY7AUABPRrgCABdDuQ5GC7DqPQCgbbJUAoRSUj+NIEig0YfyWUho1VBBBA//uQZB4ABZx5zfMakeAAAAmwAAAAF5F3P0w9GtAAACfAAAAAwLhMDmAYWMgVEG1U0FIGCBgXBXAtfMH10000EEEEEECUBYln03TTTdNBDZopopYvrTTdNa325mImNg3TTPV9q3pmY0xoO6bv3r00y+IDGid/9aaaZTGMuj9mpu9Mpio1dXrr5HERTZSmqU36A3CumzN/9Robv/Xx4v9ijkSRSNLQhAWumap82WRSBUqXStV/YcS+XVLnSS+WLDroqArFkMEsAS+eWmrUzrO0oEmE40RlMZ5+ODIkAyKAGUwZ3mVKmcamcJnMW26MRPgUw6j+LkhyHGVGYjSUUKNpuJUQoOIAyDvEyG8S5yfK6dhZc0Tx1KI/gviKL6qvvFs1+bWtaz58uUNnryq6kt5RzOCkPWlVqVX2a/EEBUdU1KrXLf40GoiiFXK///qpoiDXrOgqDR38JB0bw7SoL+ZB9o1RCkQjQ2CBYZKd/+VJxZRRZlqSkKiws0WFxUyCwsKiMy7hUVFhIaCrNQsKkTIsLivwKKigsj8XYlwt/WKi2N4d//uQRCSAAjURNIHpMZBGYiaQPSYyAAABLAAAAAAAACWAAAAApUF/Mg+0aohSIRobBAsMlO//Kk4soosy1JSFRYWaLC4qZBYWFRGZdwqKiwkNBVmoWFSJkWFxX4FFRQWR+LsS4W/rFRb/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////VEFHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAU291bmRib3kuZGUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMjAwNGh0dHA6Ly93d3cuc291bmRib3kuZGUAAAAAAAAAACU=");
        snd.loop = true;
        snd.play();
    }
    function changeDateToWord(testDate){
        const split = testDate.split("-");
        let month = "January";
        let date = split[2];
        switch (split[1]){
            case "2":
                month = "February"
                break;
            case "3":
                month = "March";
                break;
            case "4":
                month = "April";
                break;
            case "5":
                month = "May";
                break;
            case "6":
                month = "June";
                break;
            case "7":
                month = "July";
                break;
            case "8":
                month = "August";
                break;
            case "9":
                month = "September";
                break;
            case "10":
                month = "October";
                break;
            case "11":
                month = "November";
                break;
            case "12":
                month = "December";
                break;
        }
        return month + " " + date;
    }

    function changeWordToDate(word){
        const split = word.split(" ");
        let month;
        let date = split[1];
        const year = new Date().getFullYear();
        switch (split[0]){
            case "February":
                month = "02";
                break;
            case "March":
                month = "03";
                break;
            case "April":
                month = "04";
                break;
            case "May":
                month = "05";
                break;
            case "June":
                month = "06";
                break;
            case "July":
                month = "07";
                break;
            case "August":
                month = "08";
                break;
            case "September":
                month = "09";
                break;
            case "October":
                month = "10";
                break;
            case "November":
                month = "11";
                break;
            case "December":
                month = "12";
                break;
            default:
                month = "01";
        }
        return year + "-" + month + "-" + date;
    }
}, myDates, testDates, findAnyDate, checkedCount);

}`

[shrey91]

Look's like they are changing the prefix of the class. It was 'vud' a couple of hours ago but has changed to 'kex'

[mark-bloom]

Yup, I haven't gotten an available result to properly test, but here's what I'm using atm to refresh and attempt to select. Uses querySelectorAll instead of getElement*** as what google told me to cover the classname changes (since in the react code it shows a if contains "__d__item".

Just had to get rid of the await page.waitForSelector('#accommodation-calendar', {visible: true}); (and ignore that the top two lines refuse to get in the code)

`async function findAvailability(page) {
return await page.evaluate((myDates, testDates, findAnyDate, checkedCount) => {

    let calenderElems = document.querySelectorAll('[class$="__d__item"]');
    let nextButton = document.getElementById("form_next");

    // // TESTING
    // if (checkedCount > 1) {
    //     calenderElems[50].getElementsByTagName('div')[0].classList.remove("no");
    // }

    for (let element of calenderElems){
        if(!element.getElementsByTagName('div')[0].classList.contains("no") &&
            !element.getElementsByTagName('div')[0].textContent.includes(String.fromCharCode(160)) &&
            !element.getElementsByTagName('div')[0].textContent.includes(" ")){
            
            if(element){
                // Doesn't active "next" button
                element.click();
                element.getElementsByTagName('div')[0].classList.add("yes")
                nextButton.disabled = false;
                beep()
                return true;
            }
        }
    }

    return false;

    function beep() {
        var snd = new Audio("data:audio/wav;base64,//THESEAREVERYLONG");
        snd.loop = true;
        snd.play();
    }
}, myDates, testDates, findAnyDate, checkedCount)

}`

[alexDrinkwater]

@mark-bloom Could you please check out my branch from #102 and see if it is working for you?

[alexDrinkwater]

@mark-bloom Your intel helped a lot, thanks!

[mochi889]

@alexDrinkwater Did you figure out how to fix it ?

[mark-bloom]

@alexDrinkwater Oddly enough raised an error about puppeteer-firefox (which resolved after reinstalling puppeteer via npm, so probably just on my end).

Running it now, looks like it should be fine, but I know the behaviour on the 'next' button + selecting a date is a bit weird atm, so until one pops up, can't guarantee.

[alexDrinkwater]

@mark-bloom If you haven't, try setting testDates to true and see if the date gets selected for you. Still need to improve the test dates to make it like it used to be where you could specify a date, but this is better than nothing for now.

@mochi889 Yes

[scottharman]

The selector for testDates fails with a rogue '.' so I've commented out that block for the moment until I've had a chance to review

[mark-bloom]

@alexDrinkwater Yeah, testDates on true works fine; beeps and can click on next, so should be working fine.

[alexDrinkwater]

@mark-bloom Thanks. Merged in the Pull Request and published windows release. Closing this issue for now. @jvolker Paging you for a mac release.

[mark-bloom]

At this point 'dates' will more annoying than previously. Like @shrey91 was doing earlier, I guess you'd have to split the aria-label and then pass it through a switch etc.

[alexDrinkwater]

@mark-bloom I think I solved that issue with getDateStringFromElement() in the fix for this issue. If you pass it any date element from the calendar it will give it back in the format 'YYYY-MM-DD'

[alexDrinkwater]

@mark-bloom I think I understand what you mean now. You are referring to finding the correct element from 'YYYY-MM-DD' format. It also a little difficult because I found you need to change the DOM before the miq js runs otherwise the click handler doesn't get registered.

[shrey91]

@alexDrinkwater I've got to the point where test dates work as well. It just refreshes after 5 seconds of wait. In case you wanted to see what the change was.
@mark-bloom thanks to you, i was able to grab the label value

`async function findAvailability(page) {

await page.evaluate((myDates, testDates, findAnyDate, checkedCount) => {
    const elements = document.querySelectorAll('[class$="__d__item"]');
    let nextButton = document.getElementById("form_next");
    const arr = [];
    for (let element of elements) {
        let childElement = element.getElementsByTagName('div')[0];
        if (testDates && testDates.length > 0 && checkedCount > 2) {
            for (const val of testDates) {
                let ariaWord = changeDateToWord(val);
                childElement.ariaLabel != null && childElement.ariaLabel.includes(ariaWord) ? arr.push(element) : element;
            }
        }
    }
    if (arr.length > 0) {
        for(let item of arr){
            item.getElementsByTagName('div')[0].classList.remove("no")
        }

    }
    for (let element of elements){
        let childElement = element.getElementsByTagName('div')[0];

        if(!childElement.classList.contains("no") &&
            !childElement.textContent.includes(String.fromCharCode(160)) &&
            !childElement.textContent.includes(" ")){

            if(element){
                // Doesn't active "next" button
                element.click();
                childElement.classList.add("yes")
                nextButton.disabled = false;
                beep();
                return true;
            }
        }
    }

    return false;

    function beep() {
        var snd = new Audio("audioFile");
        snd.loop = true;
        snd.play();
    }
    function changeDateToWord(testDate){
        const split = testDate.split("-");
        console.log("Test date split is: " + split);
        let month = "January";
        let date = split[2];
        switch (split[1]){
            case "2":
            case "02":
                month = "February"
                break;
            case "3":
            case "03":
                month = "March";
                break;
            case "4":
            case "04":
                month = "April";
                break;
            case "5":
            case "05":
                month = "May";
                break;
            case "6":
            case "06":
                month = "June";
                break;
            case "7":
            case "07":
                month = "July";
                break;
            case "8":
            case "08":
                month = "August";
                break;
            case "9":
            case "09":
                month = "September";
                break;
            case "10":
                month = "October";
                break;
            case "11":
                month = "November";
                break;
            case "12":
                month = "December";
                break;
        }
        return month + " " + date;
    }

}`

[jvolker]

@mark-bloom Thanks. Merged in the Pull Request and published windows release. Closing this issue for now. @jvolker Paging you for a mac release.

Thanks a lot, @alexDrinkwater. I just uploaded the mac release.