Test suit doesn't work with chrome headless

[ShaharGilad]

running the following code works with Chrome standard mode, Firefox, and Edge, it fails with Chrome headless:

const { By, Key } = require('selenium-webdriver');
const until = require('selenium-webdriver/lib/until');
const { Options} = require('selenium-webdriver/chrome');
const { Builder } = require('@tpio/javascript-opensdk');
const { assert } = require('chai');

const CONSTANT = {
    TOKEN: 'TOKEN',
    DATES:{
        IN:'2021-05-01',
        OUT:'2021-05-08'
    }
};

describe("Chrome airbnb test headless",() =>{
    let driver;
    const chromeOption = new Options();
    chromeOption.headless();
    beforeEach(async ()=>{
        driver = await new Builder().forBrowser('chrome').setChromeOptions(chromeOption).withToken(CONSTANT.TOKEN).build();
    });

    afterEach(async()=>{
        await driver.quit();
    });

    it("Book a room headless", async () =>{
        await driver.get('https://www.airbnb.com/');

        await driver.wait(async () => {
            const searchElement = await driver.findElement(By.xpath("//input[contains(@id, 'bigsearch-query-detached-query-input')]"));
            const displayedSearchElement = await searchElement.isDisplayed();
            return displayedSearchElement !== false;
        }, 5000);

        const input = await driver.findElement(By.xpath("//input[contains(@id, 'bigsearch-query-detached-query-input')]"));
        await input.click();
        await input.sendKeys('NYC');
        await driver.findElement(By.css('[data-testid="structured-search-input-field-split-dates-0"]')).click();
        await driver.findElement(By.css(`[data-testid="datepicker-day-${CONSTANT.DATES.IN}"]`)).click();
        await driver.findElement(By.css(`[data-testid="datepicker-day-${CONSTANT.DATES.OUT}"]`)).click();

        await driver.findElement(By.css('[data-testid="structured-search-input-field-guests-button"]')).click();
        await driver.findElement(By.css('[data-testid="stepper-adults-increase-button"]')).click();
        await driver.findElement(By.css('[data-testid="stepper-adults-increase-button"]')).click();

        await driver.findElement(By.css('[data-testid="stepper-children-increase-button"]')).click();
        await driver.findElement(By.css('[data-testid="stepper-children-increase-button"]')).click();
        await driver.findElement(By.css('[data-testid="stepper-children-increase-button"]')).click();

        await driver.findElement(By.css('[data-testid="structured-search-input-search-button"]')).click();
        const ele = await driver.findElement(By.css('h1[tabindex="-1"]'));
        const title = await ele.getText();
        assert.equal(title,'Stays in New York');

        const typeOfPlace = await driver.findElement(By.xpath("//div[contains(@id, 'menuItemButton-room_type')]"));
        await typeOfPlace.click();

        await driver.findElement(By.xpath("//input[contains(@id, 'filterItem-room_type-checkbox-room_types-Entire_home_apt')]")).click();
        await driver.findElement(By.xpath("//input[contains(@id, 'filterItem-room_type-checkbox-room_types-Private_room')]")).click();
        await driver.findElement(By.xpath("//input[contains(@id, 'filterItem-room_type-checkbox-room_types-Hotel_room')]")).click();
        await driver.findElement(By.xpath("//button[contains(@id, 'filter-panel-save-button')]")).click();

        let typeOfPlaceEle;
        let typeOfPlaceAttr;
        await driver.wait(async () => {
            typeOfPlaceEle = await driver.findElement(By.xpath("//div[contains(@id, 'menuItemButton-room_type')]//button"));
            typeOfPlaceAttr = await typeOfPlaceEle.getAttribute('aria-pressed');
            return typeOfPlaceAttr !== 'false';
        }, 5000);

        await driver.findElement(By.xpath("//div[contains(@id, 'menuItemButton-price_range')]//button")).sendKeys(Key.ENTER);
        // await prices.click();
        const minPrice = await driver.findElement(By.xpath("//input[contains(@id, 'price_filter_min')]"));
        await minPrice.sendKeys(Key.chord(Key.CONTROL,"a",Key.DELETE));
        await minPrice.sendKeys('500');
        const maxPrice = await driver.findElement(By.xpath("//input[contains(@id, 'price_filter_max')]"));
        await maxPrice.sendKeys(Key.chord(Key.CONTROL,"a",Key.DELETE));
        await maxPrice.sendKeys('2000');

        await driver.findElement(By.xpath("//button[contains(@id, 'filter-panel-save-button')]")).click();

        let priceEle;
        let priceAttr;
        await driver.wait(async () => {
            priceEle = await driver.findElement(By.xpath("//div[contains(@id, 'menuItemButton-price_range')]//button"));
            priceAttr = await priceEle.getAttribute('aria-pressed');
            return priceAttr !== 'false';
        }, 5000);

        const roomElement = await driver.findElement(By.xpath('//*[@id="ExploreLayoutController"]/div[1]/div[1]/div[2]/div/div[2]/div/div/div[3]/div/div/div/div/div[1]/div/div/div/div/div[2]/a'));
        const url = await roomElement.getAttribute('href');

        await driver.get(url)

        let roomTitle;
        let displayed;
        await driver.wait(async () => {
            roomTitle = await driver.findElement(By.css('[data-plugin-in-point-id="OVERVIEW_DEFAULT"]'));
            displayed = await roomTitle.isDisplayed();
            return displayed !== false;
        }, 5000);

        assert.equal(displayed, true);

        driver.report().step('Room screenshot', 'Airbnb room screenshot', true);
    });
});

The error:

[r-kyjak]

have you tried setting a fixed window size for headless chrome? what i have come to understand is that when using headless the window size was different than when not using headless

try adding this as a chrome flag --window-size=1920,1080