毎日1時間でWebページ1,000以上のうち1pxの変化を逃さない、ソフトバンクのE2Eビジュアルリグレッションテスト取り組みについて

async function scrollToBottom(page, viewportHeight) {
    const getScrollHeight = () => {
        return Promise.resolve(document.documentElement.scrollHeight)
    }
 
    let scrollHeight = await page.evaluate(getScrollHeight)
    let currentPosition = 0
    let scrollNumber = 0
 
    while (currentPosition < scrollHeight) {
        scrollNumber += 1
        const nextPosition = scrollNumber * viewportHeight
        await page.evaluate(function (scrollTo) {
            return Promise.resolve(window.scrollTo(0, scrollTo))
        }, nextPosition)
        await page.waitForNavigation({ waitUntil: 'networkidle2', timeout: 5000 })
            .catch(e => console.log('timeout exceed. proceed to next operation'));
 
        currentPosition = nextPosition;
        scrollHeight = await page.evaluate(getScrollHeight);
        console.log(format('Scroll operation with scroll number: {0}, current position: {1}, scroll height: {2}', scrollNumber, currentPosition, scrollHeight));
    }
}

// puppeteer-extra は、puppeteer のドロップイン代替品です。
// インストールされているpuppeteerにプラグイン機能を追加するものです。
https://www.npmjs.com/package/puppeteer-extra-plugin-stealth
const puppeteer = require('puppeteer-extra');
// ステルスプラグインを追加し、デフォルト（全回避）を使用する。
const stealthPlugin = require('puppeteer-extra-plugin-stealth');
puppeteer.use(stealthPlugin());

pyppeteer.errors.TimeoutError: Navigation Timeout Exceeded: 30000 ms exceeded

page.setDefaultNavigationTimeout(commonConfig.defaultTimeout);

let elements = null;
if (items[4] === '0') {
    elements = await page.$x(tmpElementXPath);
} else {
    console.log(format('get element from frame of : {0}', items[4]));
    let frame = page.frames().find(frame => frame.name() === items[4]);
    elements = await frame.$x(tmpElementXPath);
}
console.log(format('found element or not : {0}', (elements.length > 0)));
if (elements.length === 0) {
    for (let tmpFrame of page.frames()) {
        elements = await tmpFrame.$x(tmpElementXPath);
        if (elements.length > 0) {
            break;
        }
    }
}

/**
 * スクリーンショットの前の無駄なdivセクションを削除
 *  @param {*} page
 */
async function removeUselessSectionBeforeScreenshots(page) {
    let uselessSections = commonConfig.hiddenDiv;
    for (let section of uselessSections) {
        var tmpElement = await page.$(section);
        if (tmpElement) {
            await tmpElement.evaluate((el) => el.style.display = 'none');
        }
    }
}

var pageProductName = await page.$eval(commonConfig.pageProductName, el => el.innerHTML);
var pageUpdateDate = await page.$eval(commonConfig.pageUpdateDate, el => el.innerHTML);

/**
 * リンクリストがある場合、ターゲットエリアから取得
 *  @param {*} page
 *  @param {*} area
 *  @returns
 */
async function getLinkListInTargetArea(page, area) {
    // ページからの関連リンクの取得
    let arrayList = await page.evaluate((area) => {
        let nodeListLinks = area.querySelectorAll('a'),
            array = [...nodeListLinks],
            list = array.map(({ innerText, href }) => ({ innerText, href }))
        return list;
    }, area);
    return arrayList;
}

sync function checkMenuLinks(page, url, areaPath = null, retry = commonConfig.requestRetryTimes) {
    try {
        // Go to target page
        await page.goto(url, { waitUntil: 'networkidle0' });
        // Prepare checking area
        if (areaPath == null) {
            var area = await page.$('body');
        } else {
            var elements = await page.$x(areaPath);
            var area = elements[0];
        }
        // Sometimes the doc link is not ready for reading, such as IDaaS https://www.alibabacloud.com/help/en/idaas
        if (elements.length === 0 || area == undefined) {
            return [];
        }
        // Click expand all icon
        await expandAllIcons(page);
 
        // Click other expand icons if any
        await expandAllIconsInTargetArea(area);
 
        // Checking from the page
        let arrayList = await getLinkListInTargetArea(page, area);
 
        return arrayList;
    } catch (err) {
        console.log(format('Error occurred when checking links with retry opportunities: {0}', retry));
        console.log(err);
        if (retry === 0) {
            console.log('No retry opportunities!');
            return [];
        } else {
            console.log('Retrying!');
            await checkMenuLinks(page, url, areaPath, retry - 1);
        }
    }
}

/**
 *  @param {*} page
 *  @param {*} area
 *  @returns
 */
 async function getLinkListInTargetArea(page, area) {
    // Get related links from the page
    let arrayList = await page.evaluate((area) => {
        let nodeListLinks = area.querySelectorAll('a'),
            array = [...nodeListLinks],
            list = array.map(({ innerText, href }) => ({ innerText, href }))
        return list;
    }, area);
    return arrayList;
}

const cmd = format('java -jar {0} -r ./src/sikuli/slider.sikuli', commonConfig.sikuliLocal);

try:
    stream_one = tmp_bucket.get_object(path_one)
    stream_two = tmp_bucket.get_object(path_two)
    file_bytes_a = np.asarray(bytearray(stream_one.read()), dtype=np.uint8)
    file_bytes_b = np.asarray(bytearray(stream_two.read()), dtype=np.uint8)
    img1 = cv2.imdecode(file_bytes_a, cv2.IMREAD_GRAYSCALE)
    img2 = cv2.imdecode(file_bytes_b, cv2.IMREAD_GRAYSCALE)
 
    clahe = cv2.createCLAHE(clipLimit=10.0, tileGridSize=(10, 10))
    img1 = clahe.apply(img1)
    img2 = clahe.apply(img2)
 
    img1 = cv2.GaussianBlur(img1, (13, 13), 0)
    img2 = cv2.GaussianBlur(img2, (13, 13), 0)
 
    diff = cv2.absdiff(img1, img2)
    ret, diff = cv2.threshold(diff, 60, 255, cv2.THRESH_BINARY)
    diff = cv2.GaussianBlur(diff, (11, 11), 0)
 
    is_diff = False
    img3 = cv2.imdecode(file_bytes_a, cv2.IMREAD_COLOR)
    img1 = cv2.imdecode(file_bytes_a, cv2.IMREAD_COLOR)
    img2 = cv2.imdecode(file_bytes_b, cv2.IMREAD_COLOR)
    _, contours, hierarchy = cv2.findContours(diff, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE)
 
    for threshold in thresholds:
        if not is_diff:
            for c in contours:
                x, y, w, h = cv2.boundingRect(c)
 
                if w > threshold and h > threshold:
                    print('Diff! >>>>> threshold:{0}'.format(threshold))
                    is_diff = True
                    cv2.rectangle(img3, (x, y), (x + w, y + h), (0, 0, 255), 2)
                    text_x, text_y = get_tips_position(x, y, w, h)
                    cv2.putText(img3, "HERE!", (text_x, text_y), cv2.FONT_HERSHEY_SIMPLEX, 1.5, (0, 0, 255), 2)
 
                    print('Target images have differences, save the differences as image: {0} and {1}'.format(path_one, path_two))
                    # 結果画像フォーマットの更新
                    _, img_buf = cv2.imencode('.png', img3)
                    save_to_oss_single(tmp_bucket, img_buf, diff_img_location.format(threshold))
                    break
    if not is_diff:
        print('Target images are same: {0} and {1}!'.format(path_one, path_two))
    return is_diff
except Exception as e:
    print(e)
    return False